自1996年创建以来，CSS就是我们在网络上用来样式化网站的所有语言。如今，我们可以使用CSS来创建出色的效果，并且由于引入了形状，伸缩框和动画，它每天变得越来越强大。 除了可以创建动画的众所周知的笑话外，这当然是正确的，但是直到几年前，我们还不能轻易地垂直居中放置元素（在某些版本的Internet Explorer中仍然如此）。
尽管CSS是完成某些任务的语言，但很长一段时间以来，JavaScript一直被用于创建漂亮的动画。 甚至还有专门用于创建动画的整个JavaScript库。 在本文中，我将介绍一个名为scrollReveal.js的库。
什么是scrollReveal.js？
scrollReveal.js是一个库，用于在元素进入视口时轻松显示它们。 它的尺寸非常小，如果缩小并压缩后其重量约为3Kb。 它没有依赖关系，因此不需要像jQuery一样添加其他库来使用它。 除了它支持的漂亮效果外，我对该库的真正喜欢是，您可以使用自然语言来定义要运行的动画。 稍后，我们将再次介绍该功能，但首先，我想向您展示一个简单的示例，说明该库可以为您做什么：
很好，不是吗？ 这个演示是用很少的代码行创建的。 此演示的代码可作为JSFiddle获得 。
现在，我希望您感兴趣，让我们以有序的方式进行。
scrollReveal.js入门
为了在我们的网页中使用scrollReveal.js，我们必须获得该库的副本。 与往常一样，可以通过从其GitHub存储库下载它，或通过Bower使用以下命令来完成此操作：
bower install scrollReveal.js
下载后，必须通过添加
script
元素将库包含在页面中，如以下代码所示：
<script src="path/to/scrollReveal.min.js"></script>
如果您是使用Bower下载的，则路径应类似于以下内容：
<script src="bower_components/scrollReveal.js/dist/scrollReveal.min.js"></script>
使用该库后，我们需要添加或修改该库将设置动画的某些元素。 具体来说，scrollReveal.js在页面上使用名为
data-sr
的属性搜索元素。 正如我们将在下一节中看到的那样，您可以通过为此属性设置一个值来更改应用的动画，但是简单地使用该属性就足够了。
因此，假设您的页面中包含以下HTML代码：
<body>
<div data-sr>This is the first div</div>
<div data-sr>This is the second div</div>
<div data-sr>This is yet another div</div>
</body>
使用此简单代码，您只需添加以下JavaScript代码即可：
new scrollReveal();
完成最后一步后，我们就可以打开页面了。 该库将在所有
div
上执行简单的淡入。 下面显示了此代码的结果，带有一些更令人愉悦的样式，并且可以作为JSFiddle使用 ：
现在，让我们看一下一些可用的效果。
配置和效果
默认情况下， scrollReveal.js允许您的元素从页面底部进入视口，但是您可以通过使用
enter
关键字和方向来逐元素更改此效果。 因此，您可以
enter left
。 您还可以使用
move
关键字指定给定元素必须移动多少像素，后跟像素数，例如
move 15px
。 在这些指令之间，您可以放置任何您喜欢的文本。 例如，您可以如下定义一个元素：
<div data-sr="please, can you enter left and then move 15px ?">This is the first div</div>
请不要对这件事太着迷，因为您可能最终会在关键字之间写单词，从而获得意想不到的结果。 例如，此定义不正确 ：
<div data-sr="please, can you enter left and then move of 15px ?">This is the first div</div>
您可以在“ move”和“ 15px”之间看到“ of”一词吗？ 好！ 让我们继续讨论。
使用scrollReveal.js，您还可以让您的元素按给定比例放大或缩小。 您可以通过使用
scale
关键字来创建此效果，如果要增大元素，请使用
up
如果要
down
元素，请使用
down
，然后是百分比本身。
如果希望效果在给定的秒数后发生，则可以使用
wait
关键字，后跟
wait
的秒数。 以下是这两个指令的使用示例：
<div data-sr="hey bro! wait 2s and then scale up 20% this element">This is another div</div>
如我所说，您也可以执行基本动画，而无需为
data-sr
属性指定值。 发生这种情况是因为库为我们在本节及更多内容中讨论过的关键字提供了一组默认值。 我们还可以通过在调用
scrollReveal()
方法时传递一个配置对象来更改这些默认值。 这是与它们的属性关联的默认值的完整列表：
defaults: {
enter: 'bottom',
move: '8px',
over: '0.6s',
wait: '0s',
easing: 'ease',
scale: { direction: 'up', power: '5%' },
opacity: 0,
mobile: false,
reset: false,
viewport: window.document.documentElement,
delay: 'once',
vFactor: 0.60,
complete: function( el ) {}
}
在下一个示例中，我们将使配置对象的某些属性以及本节中介绍的关键字生效。 首先，我们将编写HTML代码。 我们将定义三个
div
：一个将执行默认动画，并更改一些默认值，而另外两个将具有自己的特定属性：
<div data-sr id="d1">
<h1>I run the default animation</h1>
</div>
<div data-sr="wait 1s and enter bottom" id="d2">
<h1>I have specific values</h1>
</div>
<div data-sr="scale down 10% and then ease-in-out 100px" id="d3">
<h1>I have specific values too</h1>
</div>
要更改默认值，我们将设置一个配置对象，并将其传递给
scrollReveal()
方法，如下所示：
var config = {
enter: 'right',
wait: '0.5s',
move: '20px'
}
new scrollReveal(config);
该代码的最终结果如下所示， 可以作为JSFiddle使用 ：
结论
在本文中，我们讨论了scrollReveal.js，这是一个很小的漂亮的库，用于在网站上创建动画。 如您所见，使用该库非常容易。 一如既往，切记不要滥用动画，因为它们会很快变得烦人和分散注意力。 让您的用户专注于您的内容，然后在可能的情况下通过一些不错的效果改善他们的体验。
From: https://www.sitepoint.com/revealing-elements-scrollreveal-js/
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)