aos.js动画
作为前端开发人员,您可能会从客户那里得到一个普遍的要求,那就是在页面滚动上实现惊人的动画效果。 有许多库可以使我们轻松完成此任务。 AOS ,也称为Scroll上的Animate ,就是一个这样的库,它的名称恰如其名:它使您可以在元素滚动到视图时将不同种类的动画应用于元素。
在这里,您将了解AOS的内部工作原理,如何安装该库并使它正常工作。 在本教程结束时,为您的客户构建滚动动画将变得轻而易举。
如何安装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 usingfade-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 )上的“ 滚动示例上的笔动画” 。
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
使用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
的示例:
您可以使用更多数据属性:
-
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度)。
这是一个实时演示,使用上述方法显示了顺时针和逆时针的自定义旋转动画:
更多功能
AOS库还提供了许多其他功能,使其更加灵活和用户友好。 您可以将它们作为对象传递给init()
函数,而不必分别为每个元素提供属性。 这是一个例子:
AOS.init({
offset: 200,
duration: 800,
easing: 'ease-in-quad',
delay: 100,
});
您还可以使用disable
键并将其值设置为mobile
, phone
或tablet
等设备类型,在某些设备上或在某些条件下禁用动画。 或者,您也可以使用函数禁用该库。
下面是两个示例,以说明这两个功能:
AOS.init({
disable: 'mobile'
});
AOS.init({
disable: function () {
var maxWidth = 800;
return window.innerWidth < maxWidth;
}
});
在此笔中,当屏幕小于800px时,将使用上述功能禁用AOS动画:
除了init()
,AOS还提供了两个附加功能: refresh()
和refreshHard()
。
refresh()
用于重新计算所有元素的偏移量和位置。 在诸如窗口调整大小之类的事件上会自动调用它。
每当以编程方式从DOM中删除新元素或将新元素添加到DOM时,都会自动调用refreshHard()
。 这样库可以保持AOS元素数组的更新。 数组更新后, refreshHard()
还会触发refresh()
函数以重新计算所有偏移量。
结论
本教程为您介绍了“滚动上的动画”库,您可以在向上或向下滚动网页时为元素添加动画。
没有依赖关系,并允许您创建自己的自定义动画,这是两个功能,这些特性使AOS成为滚动动画的库的绝佳选择。
如果您对JavaScript动画感兴趣,您可能还想看看Tim Evko的Performance with JS:requestAnimationFrame 。
您是否曾在项目中尝试过AOS? 您的经历如何? 随时与其他读者分享一些技巧。
翻译自: https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library/
aos.js动画