AOS库使滚动动画变得很酷

作为前端开发人员，您可能会从客户那里得到一个普遍的要求，那就是在页面滚动上实现惊人的动画效果。 有许多库可以使我们轻松完成此任务。 AOS ，也称为Scroll上的Animate ，就是一个这样的库，它的名称恰如其名：它使您可以在元素滚动到视图时将不同种类的动画应用于元素。

在这里，您将了解AOS的内部工作原理，如何安装该库并使它正常工作。 在本教程结束时，为您的客户滚动创建动画将变得轻而易举。

如何安装AOS库

您可以使用Bower或npm安装AOS。

凉亭：

bower install aos --save

npm：

npm install aos --save

接下来，链接AOS样式和脚本：

<link rel="stylesheet" href="bower_components/aos/dist/aos.css">

<script src="bower_components/aos/dist/aos.js"></script>

如果愿意，可以使用CDN下载AOS样式表和JavaScript文件，如下所示：

CSS：

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

JavaScript：

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

就是这样，没有其他依赖性，这有助于使您的网站的性能得到控制。

要初始化AOS，只需在JavaScript文件中写以下行。

AOS.init();

AOS入门

初始化库后，您要做的就是添加一