Cool On Scroll Animations with AOS Library

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 install aos --save



npm install aos --save

Next, link AOS styles and scripts:


<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:


The CSS:


<link href="" rel="stylesheet">

The JavaScript:


<script src=""></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入门 (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.


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:


<div class="box a" data-aos="fade-up">
  <h2>Animated usingfade-up.</h2>
<div class="box b" data-aos="flip-down">
  <h2>Animated using flip-down.</h2>
<div class="box b" data-aos="zoom-in">
  <h2>Animated using zoom-in.</h2>

Besides the initialization line in the previous section, animating the elements doesn’t require you to do anything else.


Have a look at the code above in action:


See the Pen Animate on Scroll Examples by SitePoint (@SitePoint) on CodePen.

请参见CodePen上的SitePoint ( @SitePoint )上的“ 滚动示例上的笔动画”

使用AOS数据属性配置动画 (Configuring Your Animations With AOS Data Attributes)

Let’s dive into the list of the data attributes you can use to configure your animations.


  • data-aos-offset — You can use this attribute to trigger the animation sooner or later than the designated time. Its default value is 120px.

    data-aos-offset您可以使用此属性早于指定时间触发动画。 其默认值为120px。

  • data-aos-duration — You can use this attribute to specify the duration of the animation. The duration value can be anywhere between 50 and 3000 with steps of 50ms. Since the duration is handled in CSS, using smaller steps or a wider range would have unnecessarily increased the size of the CSS code. This range should be sufficient for almost all animations. The default value for this attribute is 400.

    data-aos-duration您可以使用此属性指定动画的持续时间。 持续时间值可以在50到3000之间,步长为50ms。 由于持续时间是在CSS中处理的,因此使用较小的步长或更大的范围将不必要地增加CSS代码的大小。 对于几乎所有动画,此范围都应该足够。 此属性的默认值为400。

  • data-aos-easing — You can use this attribute to control the timing function for animating different elements. Possible values are: linear,ease-in-out and ease-out-quart. You can see a list of all accepted values on the project’s Readme file on GitHub.

    data-aos-easing —您可以使用此属性来控制对不同元素进行动画处理的定时功能。 可能的值为: linearease-in-out ease-out-quart 。 您可以在GitHub上的项目自述文件中看到所有接受的值的列表。

Here’s an example using data-aos-duration and data-aos-easing:


More data attributes you can use are:


  • data-aos-anchor — This attribute is useful when you want to trigger the animation based on the position of some other element. It accepts any selector as its value. The default value is null. This means that all the animations will be triggered with respect to the element’s own position.

    data-aos-anchor —当您要基于其他元素的位置触发动画时,此属性很有用。 它接受任何选择器作为其值。 默认值为null 。 这意味着将根据元素自己的位置触发所有动画。

  • data-aos-anchor-placement — By default, the animations on an element are applied as soon as its top part reaches the bottom part of the window. This behavior can be changed using the data-aos-anchor-placement attribute. As its value, this attribute accepts two words separated by a hyphen. For example, you can set it to top-bottom, top-center or top-top. Three such combinations are also possible for both the center and bottom values.

    data-aos-anchor-placement —默认情况下,一旦元素的顶部到达窗口的底部,就会应用该元素上的动画。 可以使用data-aos-anchor-placement属性更改此行为。 作为其值,此属性接受由连字符分隔的两个单词。 例如,您可以将其设置为top-bottomtop-centertop-topcenter值和bottom值的三种这样的组合也是可能的。

  • data-aos-once — You can also control if the animations should be played only when you get to a particular element the first time or every time you scroll up or down. By default, the animations are replayed every time the elements scroll into view. You can set the value of this attribute to false in order to animate the elements only once.

    data-aos-once —您也可以控制是否只在第一次访问特定元素时或每次向上或向下滚动时才播放动画。 默认情况下,每当元素滚动到视图中时,动画都会重播。 您可以将此属性的值设置为false ,以便仅对元素进行一次动画处理。

Below is an example of using data-aos-anchor-placement:


探索AOS图书馆的内部运作方式 (Exploring the AOS Library’s Inner Workings)

The aim of Animate on Scroll is to handle the logic and the animation separately. For this purpose, the logic is written inside the JavaScript but the animation is written inside the CSS. This separation permits us to write our own animations and modify them based on the needs of the project in a very clean and maintainable workflow.

Scroll上Animate的目的是分别处理逻辑和动画。 为此,逻辑被编写在JavaScript中,而动画被编写在CSS中。 这种分离使我们可以编写自己的动画,并在非常干净且可维护的工作流中根据项目的需要对其进行修改。

The library keeps track of all the elements and their positions. This way it can dynamically add or remove the aos-animate class based on the settings that we have provided. For example, the aos-animate class is removed whenever the elements to which it is applied move out of the viewport. However, if an element has the value of data-aos-once set to true, the aos-animate class will not be removed from that particular element, thereby preventing any animation from happening on subsequent scroll events that bring the element into view.

该库跟踪所有元素及其位置。 这样,它可以根据我们提供的设置动态添加或删除aos-animate类。 例如,只要将要应用它的元素移出视口,就将aos-animate类移除。 但是,如果某个元素的data-aos-once设置为true ,则不会从该特定元素中删除aos-animate类,从而防止在使该元素出现的后续滚动事件中发生任何动画。

AOS also applies the default value of attributes to the <body> element on the HTML document. For example, data-aos-easing will be set to ease and data-aos-duration to 400 .

AOS还将属性的默认值应用于HTML文档上的<body>元素。 例如, data-aos-easing将被设定为easedata-aos-duration400

As I have already mentioned, the library applies animation duration only in the range of 50 to 3000 with steps of 50ms. This means that by default, you cannot have an animation duration of 225ms. However, you can add that duration yourself using CSS as follows:

正如我已经提到的,该库仅以50ms的步长在50到3000范围内应用动画持续时间。 这意味着默认情况下,动画持续时间不能为225ms。 但是,您可以使用CSS自己添加该持续时间,如下所示:

body[data-aos-duration='225'] [data-aos],
  transition-duration: 225ms;

Adding your own custom animations to AOS is also quite straightforward.


Just create a data-aos attribute selector and set it to the name of your custom animation.


Next, add the property you want to animate with its initial value, as well as the transition property set to the name of the property you want to animate.


For example, let’s say your animation is called rotate-c and the element to which it is applied is initially rotated by -180 degrees.

例如,假设您的动画称为rotate-c ,并且对其应用的元素最初被旋转-180度。

Here’s what your CSS should look like:


[data-aos="rotate-c"] {
  transform: rotate(-180deg);
  transition-property: transform;

To set the final stage of your animation (in our example this will be the element rotating from -180 degrees to 0 degrees) you add the following CSS rule just below the previous one:


[data-aos="rotate-c"].aos-animate {
  transform: rotate(0deg);

Now add data-aos="rotate-c" to your chosen HTML element and this will rotate clockwise (from -180 degrees to 0 degrees) as users scroll that element into view.


Here’s a live demo showing custom rotation animations both clockwise and anti-clockwise using the method above:


更多功能 (More Features)

The AOS library also provides a lot of other features that make it even more flexible and user friendly. Instead of providing attributes for each element separately, you can pass them as an object to the init() function. Here is an example:

AOS库还提供了许多其他功能,使其更加灵活和用户友好。 您可以将它们作为对象传递给init()函数,而不必为每个元素分别提供属性。 这是一个例子:

  offset: 200,
  duration: 800,
  easing: 'ease-in-quad',
  delay: 100,

You can also disable the animations on certain devices or under certain conditions using the disable key and setting its value to a device type like mobile, phone or tablet. Alternatively, you can also disable the library using a function.

您还可以使用disable键并将其值设置为mobilephonetablet等设备类型,在某些设备上或在某些条件下禁用动画。 另外,您也可以使用函数禁用该库。

Here are two examples to illustrate both features:


  disable: 'mobile'

  disable: function () {
    var maxWidth = 800;
    return window.innerWidth < maxWidth;

In this Pen, when the screen is smaller than 800px, AOS animations are disabled using the function above:


See the Pen Animate on Scroll Examples – Disable Animaions by SitePoint (@SitePoint) on CodePen.

请参见“ 滚动示例上的笔动画” –CodePen禁用 SitePoint( @SitePoint )的动画

Besides init(), AOS also provides two additional functions: refresh() and refreshHard().

除了init() ,AOS还提供了两个附加功能: refresh()refreshHard()

refresh() is used to recalculate all elements’ offsets and positions. It is called automatically on events like window resize.

refresh()用于重新计算所有元素的偏移量和位置。 在诸如窗口调整大小之类的事件上会自动调用它。

refreshHard() is called automatically whenever new elements are programmatically removed from or added to the DOM. This way the library can keep the array of AOS elements updated. Once the array has been updated, refreshHard() also triggers the refresh() function to recalculate all the offsets.

每当以编程方式从DOM删除或将新元素添加到DOM时,都会自动调用refreshHard() 。 这样库就可以保持AOS元素数组的更新。 数组更新后, refreshHard()也会触发refresh()函数以重新计算所有偏移量。

结论 (Conclusion)

This tutorial has introduced you the Animate on Scroll library which you can use to animate elements as you scroll up or down the webpage.


Having no dependencies and letting you create your own custom animations are two features that make AOS a great choice of library for scrolling animations.


If you’re interested in JavaScript animation, you might also like to check out JS with Performance: requestAnimationFrame by Tim Evko.

如果您对JavaScript动画感兴趣,您可能还想看看Tim Performance的JS with Performance:requestAnimationFrame

Have your ever tried AOS in a project? How was your experience? Feel free to share some tips with fellow readers.

您是否曾在项目中尝试过AOS? 您的经历如何? 随时与其他读者分享一些技巧。



插件描述:aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。 简要教程 aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。 安装 可以通过bower来安装aos动画库插件。 bower install aos --save 使用方法 在页面中引入aos.css文件,jquery和aos.js文件 <link rel="stylesheet" href="dist/aos.css" /> [removed][removed] [removed][removed] HTML结构 要使用aos动画库,你需要做的就是在需要动画的元素上添加aos属性,例如: aos脚本将会在页面滚动时,在该元素上触发相应的动画。 在元素上还可以添加以下一些属性: 属性 属性 属性 默认值 aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120 aos-duration 动画持续时间 600 400 aos-easing 动画的easing动画效果 ease-in-sine ease aos-delay 动画的延迟时间 300 0 aos-anchor 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 #selector null aos-anchor-placement 锚位置,触发动画时元素位于屏幕的位置 top-center top-bottom aos-once 动画是否只会触发一次,或者每次上下滚动都会触发 true false 注意,aos-duration的动画持续时间的范围从50-3000毫秒,如果你想设置更大的值,可以在页面中添加下面的CSS代码: body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{ transition-duration: 4000ms; } 上面的代码将动画的持续时间修改为4000毫秒。 示例代码: 如果你担心HTML5校验的问题,可以为上面的属性添加data-前缀。 全局配置 如果你不想单独每个元素做一个动画配置,你可以通过init()方法来统一配置所有元素的动画效果。 AOS.init({ offset: 200, duration: 600, easing: 'ease-in-sine', delay: 100, }); 额外配置 AOS提供了2个额外的配置方法,这些方法只能够在初始化时使用。 配置 描述 示例值 默认值 disable AOS被禁用的条件 mobile false startEvent AOS被初始化的事件名称 exampleEvent DOMContentLoaded 禁用AOS: 如果你项在小屏幕设备中禁用AOS,可以: AOS.init({ disable: 'mobile' }); 你可以传入3种设备的类型:mobile、phone或tablet。 你也可以设置自己的禁用条件,例如在屏幕小于1024像素时禁用AOS: disable: window.innerWidth < 1024 或者传入一个函数,返回true或false。 disable: function () { var maxWidth = 1024; return window.innerWidth < maxWidth; } 开始动画的事件: 如果你不想滚动动画从页面加载(DOMContentLoaded)后就开始执行,可以使用startEvent来设置自己的事件,AOS会在document上监听这个事件: AOS.init({ startEvent: 'someCoolEvent' }); API AOS对象有2个可用的方法: init refresh AOS.refresh(); 上面的代码会重新计算元素的位置和偏移。 动画和锚位置 动画 淡入淡出动画: fade-up fade-down fade-left fade-right fade-up-right fade-up-left fade-down-right fade-down-left 翻转动画: flip-up flip-down flip-left flip-right 滑动动画: slide-up slide-down slide-left slide-right 缩放动画: zoom-in zoom-in-up zoom-in-down zoom-in-left zoom-in-right zoom-out zoom-out-up zoom-out-down zoom-out-left zoom-out-right 锚位置 top-bottom top-center top-top center-bottom center-center center-top bottom-bottom bottom-center bottom-top easing动画 你可以使用以下的一些easing动画效果: linear ease ease-in ease-out ease-in-out ease-in-back ease-out-back ease-in-out-back ease-in-sine ease-out-sine ease-in-out-sine ease-in-quad ease-out-quad ease-in-out-quad ease-in-cubic ease-out-cubic ease-in-out-cubic ease-in-quart ease-out-quart ease-in-out-quart
参与评论 您还未登录,请先 登录 后发表或查看评论


  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
钱包余额 0