aos页面滚动动画库的使用步骤

一、参考文档

1.官网：http://michalsnik.github.io/aos/
2.案例展示在本官网下方。
3.获取文件地址在最下方。
4.其他使用说明：https://github.com/michalsnik/aos/blob/next/README.md

下载完成之后，我们需要的只是其中两个文件。

• aos.css文件
• aos.js文件

二、使用步骤

（一）项目中放入aos.css文件和aos.js文件。
（二）在页面中引用这两个文件并进行使用。

1. 引入：

<link rel="stylesheet" href="./css/aos.css" />
<script src="./js/aos.js"></script>

2. js代码：

<script>
  AOS.init();
</script>

3. 哪个元素使用就添加相应的自定义属性。
   例如：我想让元素从左边进入就添加自定义属性：data-aos="fade-down-right"向右进入。
   

（三）改变进入的速度

<script>
   AOS.init({
        duration: 2000,
   });
</script>

三、总结

整体来说这个aos库还是比较好用的，经常用到的场景是，页面滚动，下方的内容慢慢显示出来。