介绍AOS是一个用在网页滚动中的动画库，顾名思义，AOS是随着滚动条而伴随的网页动画效果，AOS非常有效的使某些长网页更加的生动和丰富，对于提升网页整体质量具备

Github

14.9k star，可见使用的人还是很多的。

https://github.com/michalsnik/aos

使用方式

下载对应的js和css文件

链接rel=’stylesheet’ href=’./dist/aos.css’/script src=’./dist/aos.js’/script 脚本AOS.init(); /script 或使用包管理工具

让网页更加生动，网页滚动动画效果AOS

纱线添加aos@nextor npm install –save aos@nextimport AOS from ‘aos’;导入’aos/dist/aos.css’; AOS.init();最简单的使用方法是

AOS.init();或者你可以自己配置一些选项

AOS.init({ //全局配置：disable: false, //接受以下值： “phone”, “tablet”, “mobile”, boolean, expression or function startEvent: ‘DOMContentLoaded’, //调度事件的值在文档名称上，AOS应该在此事件上初始化initClassName: ‘aos-init’, //初始化后应用的类AnimatedClassName: ‘aos-animate’, //动画类名称useClassNames: false, //如果为true，则“ data aos” 添加为类disableMutationObserver: false, //禁用自动突变检测（高级） debounceDelay: 50, //调整窗口大小时使用的反跳延迟（高级）throttleDelay: 99, //滚动页面时使用的油门延迟（高级）//可在每个元素的基础上覆盖的设置，每个`data aos-*` 属性： offset: 120, //距原始触发点的偏移量(px) delay: 0, //值从0 到3000，步长50ms longuration: 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=’淡出’ 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 动画效果如下：