aos.js动画_AOS库使滚动动画变得很酷

aos.js动画

As front-end developer, a popular request you might get from your clients is to implement stunning animation effects on page scroll. There are many libraries to make this task easier for us. AOS, also called Animate on Scroll, is one such library and it does exactly what its name suggests: it lets you apply different kinds of animations to elements as they scroll into view.

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

Here, you will learn about the inner workings of AOS, how to install the library and get it to work. By the end of this tutorial, building animations on scroll for your clients will be a breeze.

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

如何安装AOS库 (How to Install the AOS Library)

You can install AOS using Bower or npm.

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

Bower:

凉亭：

bower install aos --save

npm:

npm：

npm install aos --save

Next, link AOS styles and scripts:

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

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

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

If you prefer, you can download the AOS stylesheet and JavaScript files using a CDN as follows:

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

The CSS:

CSS：

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

The JavaScript:

JavaScript：

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

That’s it, there are no other dependencies, which helps to keep your website’s performance under control.

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

To initialize AOS, just write the line below in your JavaScript file.

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

AOS.init();

AOS入门 (Getting Started With AOS)

After initializing the library all you have to do is add some specific attributes.

初始化库后，您要做的就是添加一些特定的属性。

To use basic animations you just need to add data-aos="animation_name" to your HTML elements.

要使用基本动画，您只需要在HTML元素中添加data-aos="animation_name" 。

There are several types of animation you can choose from. For example, you can add fade animations like “fade”, “fade-up” and “fade-down-left”. Similarly, you can also add flip and slide animations like “flip-up”, “flip-left”, “slide-down”, and “slide-right”.

您可以选择几种动画类型。 例如，您可以添加淡入淡出的动画，例如“淡入淡出”，“淡入淡出”和“淡入淡出左”。 同样，您也可以添加翻转和滑动动画，例如“上翻”，“左翻”，“下滑”和“右滑”。

Here’s the markup of our first example: