介绍
AOS是一个用在网页滚动中的动画库，顾名思义，AOS是随着滚动条而伴随的网页动画效果，AOS非常有效的使某些长网页更加的生动和丰富，对于提升网页整体质量具备了促进作用。
Github
14.9k stars，可见使用的人还是非常多的
https://github.com/michalsnik/aos使用方式
下载好相应的js和css文件
<link rel="stylesheet" href="./dist/aos.css" /> <script src="./dist/aos.js"></script>
<script>
AOS.init();
</script>或者使用包管理工具
- yarn add aos@next
- or npm install --save aos@next
import AOS from 'aos';
import 'aos/dist/aos.css';
AOS.init();- 具体使用
最简单的就是
AOS.init();或者也可以自行配置一些选项
AOS.init({
// 全局配置：
disable: false, // 接受以下值：“phone”、“tablet”、“mobile”、boolean、expression或function
startEvent: 'DOMContentLoaded', // 在document上调度的事件的名称，AOS应在该事件上初始化
initClassName: 'aos-init', // 初始化后应用的class
animatedClassName: 'aos-animate', // 动画类名称
useClassNames: false, //如果为true，将在滚动时将“data aos”的内容添加为类
disableMutationObserver: false, // 禁用自动突变检测（高级）
debounceDelay: 50, // 调整窗口大小时使用的解除抖动延迟（高级）
throttleDelay: 99, // 滚动页面时使用的节流延迟（高级）
// 可以按每个元素重写的设置，按`data aos-*`属性：
offset: 120, // 从原始触发点偏移（px）
delay: 0, // 值从0到3000，步长为50ms
duration: 400, // 值从0到3000，步长为50ms
easing: 'ease', // AOS动画的默认缓和
once: false, // 动画是否只应发生一次（向下滚动时）
mirror: false, // 当元素滚动过去时是否应该动画化
anchorPlacement: 'top-bottom', //定义元素相对于窗口的哪个位置应触发动画
});使用data-aos属性设置动画：
<div data-aos="fade-in"></div>并使用data-aos-*属性调整行为：
<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>动画效果如下：