使用 AOS（滚动动画）创造终极用户体验

什么是AOS？

演示

安装AOS

使用AOS

配置动画

添加自定义动画

参考

感谢阅读

你好世界

你好，世界 1

什么是AOS？

作为前端开发人员，客户经常会要求你实现令人惊叹的页面滚动动画效果。AOS （Animate on Scroll）是最流行的库，它可以帮助我们更轻松地完成这项任务。

AOS是由Michał Sajnóg开发的一个库，它的功能正如其名称所示：它允许您在元素滚动到视图中时对其应用不同类型的动画。

要查看使用AOS的项目示例，请单击此处。

演示

默认可用的动画效果如下所示。
注意：可以使用各种属性（例如）进一步自定义动画data-aos-duration。

安装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.3.4/dist/aos.css" rel="stylesheet">

JavaScript：

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

要初始化AOS ，只需使用JavaScript文件中的以下行。

AOS.init();

使用AOS

设置完成后，只需添加data-aos="<animation-name>"到 HTML 元素即可使用基本动画。例如

<div data-aos="fade-up">
    ...
</div>

<div data-aos="flip-down">
    ...
</div>

<div data-aos="zoom-in">
    ...
</div>

配置动画

可以使用附加属性来配置动画：

• data-aos-delay：您可以使用此属性指定动画播放时间的延迟。持续时间值可以是 和 之间的任意值0，3000步长为50ms。由于持续时间由 CSS 处理，因此使用较小的步长或较大的范围会不必要地增加 CSS 代码的大小。此属性的默认值为0。
• data-aos-offset：您可以使用此属性来设置动画在指定时间之前或之后触发。其默认值为120px。
• data-aos-duration：您可以使用此属性指定动画的持续时间。持续时间值可以是 和 之间的任意值50，3000步长为50ms。由于持续时间由 CSS 处理，因此使用较小的步长或更大的范围会不必要地增加 CSS 代码的大小。此范围对于几乎所有动画来说都足够了。此属性的默认值为400。
• data-aos-easing：您可以使用此属性来控制不同元素的动画时序函数。可能的值（并非详尽无遗）包括：linear、ease-in-out和ease-out-quart
• data-aos-anchor：当你想根据其他元素的位置触发动画时，此属性非常有用。它接受任何选择器作为其值。默认值为null。这意味着所有动画都将根据元素自身的位置触发。
• data-aos-anchor-placement：默认情况下，元素的动画会在其顶部到达窗口底部时立即应用。您可以使用data-aos-anchor-placement属性更改此行为。此属性的值接受两个用连字符分隔的单词。例如，您可以将其设置为top-bottom,top-center或。和值top-top也可以有三种这样的组合。centerbottom
• data-aos-once：您还可以控制动画是仅在首次到达特定元素时播放，还是每次上下滚动时播放。默认情况下，每次元素滚动到视图中时都会重播动画。您可以将此属性的值设置为，true以便仅对元素进行一次动画处理。

添加自定义动画

有时内置动画不够用。让我们创建一个根据屏幕分辨率调整的动画。以下是其中一种方法：

样式.css

[data-aos="new-animation"] {
    opacity: 0;
    transition-property: transform, opacity;
}
[data-aos="new-animation"].aos-animate {
    opacity: 1;
}

@media screen and (min-width: 768px) {
    [data-aos="new-animation"] {
        transform: translateX(100px);
    }
    [data-aos="new-animation"].aos-animate {
        transform: translateX(0);
    }
}

然后在 HTML 中使用它：

<div data-aos="new-animation"></div>

该元素只会在移动设备上产生不透明度动画，但从 768px 宽度开始它也会从右向左滑动。

参考

1. AOS 存储库
2. Sitepoint 博客

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。