qiusj
/
meface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
meface/docs/article/web/css/aos.md

237 lines
5.9 KiB
Markdown
Raw Normal View History

init project
2023-11-17 10:54:23 +08:00
---
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