滚动动画可以为你的网站增添优雅的效果。一点动画修饰可以让你的网站看起来全面完整。使用JavaScript和CSS，在向下滚动页面时，元素可以淡出、滑动甚至旋转。

而且，你甚至不需要自己写所有的代码！多亏了免费AOS库，美化你的网站就像添加脚本一样简单。只需使用CDN或者程序包管理器安装JavaScript和CSS文件，然后插入几行代码。然后，制作动画会变得容易。

我们将向您展示如何在这里设置它AOS并为您提供一些实用的库AOS实验示例。

设置AOS

假如你用的是CDN或者程序包管理器，它们将为您托管所有文件并正确安装，然后将AOS在你的网站上安装是一个简单的过程。如果您不想这样做，您需要下载文件并自行设置。

使用包管理器，您所要做的就是在安装服务器的命令行/终端中输入代码。npm它是一种流行的解决方案，也是自动和Node.js绑在一起。使用以下命令：

npm install --saveaos@next

还有Bower，需要npm。尽管它已被抛弃，但它仍然可以被许多人维护和使用。若已安装，请启动以下脚本：

bower install aos --save

最后，还有Yarn，这是Bower流行替代品。这是您需要的代码：

yarn addaos@next

假如你更喜欢用CDN，这些脚本将安装您需要介绍的文件和样式表。确保两者同时包含，否则将无法正常工作。

CSS脚本：

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS脚本：

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

无论使用哪种方法，最后一步是使用此代码进行初始化AOS并完成设置过程：

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

然后，只需要创建动画！请查看此动画控件表，以及可以使用的这些预定义动画。请查看这个动画控件表，以及这些可以使用的预定义动画。您将决定适合您独特网站的完美效果。如遇困难，请尽量联系客服。

AOS实验与范例

学习新库的最好方法是检查运行中的代码，这就是为什么CodePen这样的网站如此有价值的原因。查看下面的代码片段，您将能够在输出旁边看到运行AOS JavaScript。您甚至可以实时调整代码。然后，用你获得的知识来构建你自己的超级动画！

模型AOS Animate On Scroll库AOS动画AOS锚点AOS放置锚点和锚点AOS自定义动画滚动示例上的动画–禁用动画AOS JS电影的滚动效果变得简单

借助AOS之类的JavaScript库，创建一个动画精美的网站并不容易。学习图书馆的内容可能需要一些时间，特别是如果你是初学者，但这将使新的网站开发人员更容易访问整个过程。这意味着你不必自己创建它。

如果你正在寻找一个可以轻松实现优雅滚动效果的库，你绝对可以考虑尝试AOS。它很容易安装，甚至更容易学习，所以你可以快速启动和运行滚动动画。