AOS库使滚动动画变得很酷
作为前端开发人员，你可能会从你的客户得到了大家的要求，是落实在页面滚动令人惊叹的动画效果。 有许多图书馆，使这项工作更容易为我们。 AOS ，也被称为动画上滚动 ，就是这样的一个库，它不正是它的名字所暗示的：它可以让你运用不同种类的动画元素，以他们滚动到视图。
在这里，您将了解AOS的内部运作，如何安装库，并开始工作。 在本教程结束时，上滚动建立动画为您的客户将是一件轻而易举的事。
如何安装AOS库
鲍尔：
bower install aos --save
故宫：
npm install aos --save
接下来，链接AOS样式和脚本：
<link rel="stylesheet" href="bower_components/aos/dist/aos.css">
<script src="bower_components/aos/dist/aos.js"></script>
如果你愿意，你可以下载AOS样式表和JavaScript文件使用CDN如下：
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
初始化库后，所有你需要做的就是添加一些特定的属性。
要使用你只需要添加基本的动画data-aos="animation_name"到你的HTML元素。
有几种类型的动画，你可以选择。 例如，您可以添加淡入淡出的动画，如“变脸”，“淡入向上”和“淡出左下方”。 同样，你也可以添加翻转和幻灯片动画，如“弹起”，“倒装左”，“滑动下来”和“幻灯片权利”。
下面是我们的第一个例子中的标记：
<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>
除了在上一节起始线，动画元素，不需要你做任何事情。
看看上述操作的代码：
见笔上滚动例子动画由SitePoint（ @SitePoint上） CodePen 。
配置您的动画利用AOS数据属性
让我们深入到数据的属性列表，你可以用它来配置你的动画。
-
data-aos-offset-您可以使用此属性来触发动画比指定时间早晚。 它的默认值是120像素。 -
data-aos-duration-您可以使用该属性指定动画的持续时间。 持续时间值可以在任何地方和3000为具有50ms的步骤之间50。 由于持续时间在CSS处理，使用更小的步骤或更宽范围会不必要地增加CSS代码的大小。 这个范围应该足以满足几乎所有的动画。 此属性的默认值是400。 -
data-aos-easing-可以使用该属性来控制定时功能用于动画不同的元素。 可能的值为：linear，ease-in-out和ease-out-quart。 你可以看到在所有接受的值的列表在GitHub上项目的自述文件 。
下面是使用的示例data-aos-duration和data-aos-easing ：
见笔动画上滚动的例子-属性由SitePoint（ @SitePoint上） CodePen 。
更多的数据属性，你可以使用如下：
-
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图书馆的内部运作
动画的上滚动的目的是分开处理的逻辑和动画。 为此，逻辑编写JavaScript的内部，但在动画写的CSS里面。 这种分离允许我们写我们自己的动画和基于项目的一个非常干净和维护工作流程的需要进行修改。
该库将跟踪所有的元素和它们的位置。 这样，它可以动态地添加或删除aos-animate基于我们所提供的设置类。 例如， aos-animate类除去每当到其所施加移出视口的元件。 然而，如果一个元素的值data-aos-once设置为true时， aos-animate类不会从那个特定元件上取下，从而防止任何动画的发生在随后的滚动事件使元件进入视野。
AOS也适用属性的默认值<body>上的HTML文档元素。 例如， data-aos-easing将被设定为ease和data-aos-duration至400 。
正如我已经提到的，库只在50〜3000为具有50ms的步骤范围内适用的动画时长。 这意味着，在默认情况下，你不能有225ms的动画时间。 但是，您可以添加使用CSS自己进行如下的持续时间：
body[data-aos-duration='225'] [data-aos],
[data-aos][data-aos][data-aos-duration='225']{
transition-duration: 225ms;
}
添加自己的自定义动画AOS也相当简单。
只要创建一个data-aos属性选择器并将其设置为您的自定义动画的名称。
接下来，您要使用它的初始值进行动画处理的财产，还有添加transition属性设置为要进行动画处理的属性的名称。
例如，假设您的动画被称为旋转-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度）作为用户滚动该元素进入视野。
下面是显示自定义动画旋转顺时针和使用上述方法反时针现场演示：
见笔自定义动画-上滚动动画由SitePoint（ @SitePoint上） CodePen 。
更多功能
该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;
}
});
在此笔中，当屏幕比800像素时，AOS动画用上面的功能被禁用：
见笔上滚动例子动画-禁用Animaions由SitePoint（ @SitePoint上） CodePen 。
另外init() ，AOS还提供了两个额外的功能： refresh()和refreshHard()
refresh()被用于重新计算所有元素的偏移量和位置。 它像窗口大小调整事件自动调用。
refreshHard()每当新元素被编程方式从移除或添加到DOM被自动调用。 这样，库可以保持更新AOS元素的数组。 一旦阵列已经更新， refreshHard()也触发refresh()函数来重新计算所有偏移。
结论
本教程介绍你上滚动库中的动画正如你向上或向下滚动网页，你可以使用动画元素。
有没有依赖性，让您创建自己的自定义动画有两个功能，使AOS库的滚动动画的绝佳选择。
如果你有兴趣在JavaScript动画，你可能也想看看requestAnimationFrame：JS性能与蒂姆Evko。
有你有没有试过在AOS的一个项目？ 如何是你的经验？ 随时分享与其他读者一些提示。
From: https://www.sitepoint.com//cool-scroll-animations-made-easy-aos-library/
推荐阅读