AOS库使滚动动画变得很酷

最新推荐文章于 2025-06-06 13:17:36 发布

dingshi7798

最新推荐文章于 2025-06-06 13:17:36 发布

阅读量1.3k

点赞数 2

文章标签： javascript 前端 ViewUI

本文介绍了前端库AOS，用于实现滚动时的动画效果。AOS可通过Bower或npm安装，添加特定数据属性即可配置动画。文章详细阐述了AOS的安装、基本用法、数据属性配置，包括动画延迟、持续时间、定时功能等，并展示了如何创建自定义动画，同时提及AOS在不同设备和条件下的禁用策略，是实现滚动动画的实用工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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入门

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

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

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

这是我们第一个示例的标记：

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

除了上一节中的初始化行之外，对元素进行动画处理不需要您执行任何其他操作。

看一下上面的代码：

请参阅CodePen上的SitePoint （ @SitePoint ）上的“ 滚动示例上的笔动画” 。

使用AOS数据属性配置动画

让我们深入了解可用于配置动画的数据属性列表。

data-aos-offset您可以使用此属性早于指定时间触发动画。其默认值为120px。
data-aos-duration您可以使用此属性指定动画的持续时间。持续时间值可以在50到3000之间，步长为50ms。由于持续时间是在CSS中处理的，因此使用较小的步长或更大的范围将不必要地增加CSS代码的大小。对于几乎所有动画，此范围都应该足够。此属性的默认值为400。
data-aos-easing —您可以使用此属性来控制对不同元素进行动画处理的定时功能。可能的值为： linear ， ease-in-out ease-out-quart 。您可以在GitHub上的项目自述文件中看到所有接受的值的列表。

这是使用data-aos-duration和data-aos-easing的示例：

请参见“ 滚动示例上的笔动画” – CodePen上SitePoint （ @SitePoint ）的属性。

您可以使用的更多数据属性是：

data-aos-anchor当您要基于其他元素的位置触发动画时，此属性很有用。它接受任何选择器作为其值。默认值为null 。这意味着将根据元素自身的位置触发所有动画。
data-aos-anchor-placement —默认情况下，一旦元素的顶部到达窗口的底部，就会应用该元素上的动画。可以使用data-aos-anchor-placement属性更改此行为。作为其值，此属性接受两个连字符分隔的单词。例如，您可以将其设置为top-bottom ， top-center或top-top 。 center值和bottom值的三种这样的组合也是可能的。
data-aos-once —您也可以控制是否只在第一次访问特定元素时或每次向上或向下滚动时才播放动画。默认情况下，每当元素滚动到视图中时，动画都会重播。您可以将此属性的值设置为false ，以便仅对元素进行一次动画处理。

以下是使用data-aos-anchor-placement的示例：

见笔动画上滚动的例子-属性II由SitePoint（ @SitePoint ）上CodePen 。

探索AOS图书馆的内部运作方式

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

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

AOS还将属性的默认值应用于HTML文档上的<body>元素。例如，将data-aos-easing设置设置为ease并将data-aos-duration为400 。

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

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

将自己的自定义动画添加到AOS也是非常简单的。

只需创建一个data-aos属性选择器并将其设置为自定义动画的名称即可。

接下来，添加要为其设置动画的属性的初始值，以及将transition属性设置为要设置动画的属性的名称。

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

这是CSS的外观：

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

要设置动画的最后阶段（在我们的示例中，这是将元素从-180度旋转到0度），请在前一个规则的下方添加以下CSS规则：

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

现在将data-aos="rotate-c"到您选择的HTML元素中，当用户将该元素滚动到视图中时，它将顺时针旋转（从-180度到0度）。

这是一个实时演示，使用上述方法显示了顺时针和逆时针的自定义旋转动画：

请参见滚动上的笔动画 -CodePen上的SitePoint （ @SitePoint ）自定义动画。

结论

本教程为您介绍了“滚动上的动画”库，当您向上或向下滚动网页时，可使用该动画为元素设置动画。

没有依赖关系，并允许您创建自己的自定义动画，这是两个功能，这些特性使AOS成为滚动动画库的理想选择。

如果您对JavaScript动画感兴趣，您可能还想看看Tim Evko撰写的JS with Performance：requestAnimationFrame 。

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

From: https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library/