网页上下拉动多次触发动画载入插件scrollR eveal.js
在之前的建站教程中，我们讲了如何制作网页滚动显示效果，方法见：网站animite动画载入效果制作步骤，通过 WOW.js 制作滚动动画。
但这种动画载入只会载入一次，今天给大家介绍另一种滚动动画效果，通过scrollR eveal.js来实现高品质网页特效，随鼠标滚轮监听位置不断加载动画效果炫酷网页制作特效插件JS代码。
另外scrollReveal.js 的动画可以播放一次或无限次，结合BOOTSTRAP框架，可以完美制作出自适应网站。请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器）
安装方法
1、上传JS文件
将下载下来的动画插件上传到自己模板文件的JS文件里；
2、引入文件
将以下的代码放到自己底部模板的</body>标签上面；
<script src="js/scrollReveal.js"></script>
<script type="text/javascript">
(function($) {
'use strict';
window.scrollReveal = new scrollReveal({ reset: true, move: '50px' });//控制动画距离
})();
</script>
3、引入清缓存文件
将以下代码放在</head>标签上面
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
4、HTML写法
如果想让哪个元素添加动画，必须给该元素加上 data-scroll-reveal 属性，加上之后会执行默认的动画效果，你也可以自定义改属性以显示不同的动画效果，如：
<div data-scroll-reveal="enter left and move 50px over 1.33s">dowebok.com</div>
<div data-scroll-reveal="enter from the bottom after 1s">Hello world!</div>
<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6</div>
相关参数介绍
enter
- 说明: 动画起始方向
- 值: top | right | bottom | left
move
- 说明: 动画执行距离
- 值: 数字，以 px 为单位
over
- 说明: 动画持续时间
- 值: 数字，以秒为单位
after/wait
- 说明: 动画延迟时间
- 值: 数字，以秒为单位
填充（可选）
可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：
- from
- the
- and
- then
- but
- with
也就是可以像这样写 HTML：
<div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">dowebok.com</div>
<div data-scroll-reveal="enter from the left after 0.3s, move 40px, over 2s">Hello world!</div>
<div data-scroll-reveal="enter left move 40px over 2s after 0.3s">iPhone 6</div>
<div data-scroll-reveal="enter left, move 40px, over 2s, wait 0.3s">I love you</div>
