237 lines
5.9 KiB
Markdown
237 lines
5.9 KiB
Markdown
---
|
||
title: 页面滚动动画库(aos)
|
||
date: 2020-10-26
|
||
author: ac
|
||
tags:
|
||
- aos
|
||
- CSS3
|
||
categories:
|
||
- Web
|
||
---
|
||
|
||
> aos.js是一款用于页面滚动动画效果的js库。该动画库可以在页面滚动时提供28种不同的动画效果，以及多种easing效果，在页面滚动时，给元素添加动画过渡到原来的状态。
|
||
|
||
<!-- more -->
|
||
|
||
## 页面滚动动画库(aos)
|
||
|
||
[[aos的github地址](https://github.com/michalsnik/aos)] `https://github.com/michalsnik/aos`
|
||
|
||
### 安装
|
||
|
||
1. CDN 的方式
|
||
|
||
引用aos的样式文件
|
||
|
||
```html
|
||
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||
```
|
||
|
||
在`body`标签 中添加`aos`库
|
||
|
||
```html
|
||
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||
```
|
||
|
||
2. npm 的方式
|
||
|
||
```shell
|
||
npm insatll aos
|
||
```
|
||
|
||
在入口文件`main.js`中引入`AOS`库
|
||
|
||
```javascript
|
||
import AOS from 'aos';
|
||
import 'aos/dist/aos.css';
|
||
```
|
||
|
||
### 使用
|
||
|
||
#### 1.初始化`AOS`
|
||
|
||
执行`AOS.init(option)`函数，`AOS`会在`<body>`元素中添加一些`option`配置项内容，通常配置页面整体的一些动画过渡属性和全局的配置。
|
||
|
||
```javascript
|
||
AOS.init({
|
||
// Global settings:
|
||
disable: false, // 设置AOS禁用的条件: 'phone', 'tablet', 'mobile', boolean, expression or function
|
||
startEvent: 'DOMContentLoaded', // 初始化监听事件
|
||
initClassName: 'aos-init', // 每个aos渲染的元素初始化的class样式，默认是‘aos-init’
|
||
animatedClassName: 'aos-animate', // 每个aos渲染的元素的动态属性的样式
|
||
useClassNames: false, //当为true时，进行或完成动画的元素的`data-aos`属性的值会添加到class属性中
|
||
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
|
||
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
|
||
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
|
||
|
||
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
|
||
offset: 120, //初始触发点的(Y轴)偏移量(单位:px)
|
||
delay: 0, // 动画的延迟时间，取值[0,3000]，步长50ms
|
||
duration: 400, // 动画的持续时间，取值[0,3000], 步长50ms
|
||
easing: 'ease', // default easing for AOS animations
|
||
once: false, // 动画是否只渲染一次
|
||
mirror: false, // 当滚动经过元素时，是否应该将其动画化
|
||
anchorPlacement: 'top-bottom', // 元素触发动画的位置
|
||
|
||
});
|
||
```
|
||
|
||
|
||
|
||
#### 2.配置动画元素属性
|
||
|
||
```html
|
||
<div
|
||
data-aos="fade-up"
|
||
data-aos-offset="200"
|
||
data-aos-delay="50"
|
||
data-aos-duration="1000"
|
||
data-aos-easing="ease-in-out"
|
||
data-aos-mirror="true"
|
||
data-aos-once="false"
|
||
data-aos-anchor-placement="top-center"
|
||
>
|
||
</div>
|
||
```
|
||
|
||
| **属性** | **属性** | **属性** | **默认值** |
|
||
| -------------------- | -------------------------------------------------- | ------------ | ---------- |
|
||
| aos-offset | 触发元素动画的位置在Y轴上的偏移量 | 200 | 120 |
|
||
| aos-duration | 动画持续时间 | 600 | 400 |
|
||
| aos-easing | 动画的easing动画效果 | ease-in-sine | ease |
|
||
| aos-delay | 动画的延迟时间 | 300 | 0 |
|
||
| aos-anchor | 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 | #selector | null |
|
||
| aos-anchor-placement | 锚位置，触发动画时元素位于屏幕的位置 | top-center | top-bottom |
|
||
| aos-once | 动画是否只会触发一次，或者每次上下滚动都会触发 | true | false |
|
||
|
||
**淡入淡出动画：**
|
||
|
||
- fade-up
|
||
- fade-down
|
||
- fade-left
|
||
- fade-right
|
||
- fade-up-right
|
||
- fade-up-left
|
||
- fade-down-right
|
||
- fade-down-left
|
||
|
||
**翻转动画：**
|
||
|
||
- flip-up
|
||
- flip-down
|
||
- flip-left
|
||
- flip-right
|
||
|
||
**滑动动画：**
|
||
|
||
- slide-up
|
||
- slide-down
|
||
- slide-left
|
||
- slide-right
|
||
|
||
**缩放动画：**
|
||
|
||
- zoom-in
|
||
- zoom-in-up
|
||
- zoom-in-down
|
||
- zoom-in-left
|
||
- zoom-in-right
|
||
- zoom-out
|
||
- zoom-out-up
|
||
- zoom-out-down
|
||
- zoom-out-left
|
||
- zoom-out-right
|
||
|
||
**锚位置**
|
||
|
||
- top-bottom
|
||
- top-center
|
||
- top-top
|
||
- center-bottom
|
||
- center-center
|
||
- center-top
|
||
- bottom-bottom
|
||
- bottom-center
|
||
- bottom-top
|
||
|
||
**easing动画**
|
||
|
||
你可以使用以下的一些easing动画效果：
|
||
|
||
- linear
|
||
- ease
|
||
- ease-in
|
||
- ease-out
|
||
- ease-in-out
|
||
- ease-in-back
|
||
- ease-out-back
|
||
- ease-in-out-back
|
||
- ease-in-sine
|
||
- ease-out-sine
|
||
- ease-in-out-sine
|
||
- ease-in-quad
|
||
- ease-out-quad
|
||
- ease-in-out-quad
|
||
- ease-in-cubic
|
||
- ease-out-cubic
|
||
- ease-in-out-cubic
|
||
- ease-in-quart
|
||
- ease-out-quart
|
||
- ease-in-out-quart
|
||
|
||
#### 3.示例
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>AOS示例</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
.item {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 50px auto;
|
||
padding-top: 75px;
|
||
background: #ccc;
|
||
text-align: center;
|
||
color: #FFF;
|
||
font-size: 3em;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||
<body>
|
||
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||
<script>
|
||
AOS.init({
|
||
duration: 1200,
|
||
})
|
||
</script>
|
||
<div class="item" data-aos="fade-up">1</div>
|
||
<div class="item" data-aos="fade-down">2</div>
|
||
<div class="item" data-aos="fade-right">3</div>
|
||
<div class="item" data-aos="fade-left">4</div>
|
||
|
||
<div class="item" data-aos="zoom-in">5</div>
|
||
<div class="item" data-aos="zoom-out">6</div>
|
||
|
||
<div class="item" data-aos="slide-up">7</div>
|
||
|
||
<div class="item" data-aos="flip-up">8</div>
|
||
<div class="item" data-aos="flip-down">9</div>
|
||
<div class="item" data-aos="flip-right">10</div>
|
||
<div class="item" data-aos="flip-left">11</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
```
|
||
|
||
### 参考文章
|
||
|
||
[1] aos.js超赞页面滚动元素动画jQuery动画库 https://www.jq22.com/jquery-info8150
|
||
|
||
[2] aos https://github.com/michalsnik/aos#animations |