简介

插件名字叫scrollReveal.js。不同于WOW.js，scrollReveal.js是独立的，无需依赖animate.css。并且插件非常小，压缩后的版本只有5.6kb。使用方法也非常简单。

引入：用script像通常一样引入即可。需要注意的是，如果你使用的jquery，记得卸载jquery之后。

使用：在div上，或者你想要有动画效果的标签上加上data-scroll-reveal。

示范：<div data-scroll-reveal="enter left and move 50px over 1.33s">dowebok.com</div>

data-scroll-reveal属性

enter

说明: 动画起始方向

值: top | right | bottom | left

move

说明: 动画执行距离

值: 数字，以 px 为单位

over

说明: 动画持续时间

值: 数字，以秒为单位

after/wait

说明: 动画延迟时间

值: 数字，以秒为单位

填充（可选）

可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：

from

the

and

then

but

with