WOW.js + Animate.css 虽然可以实现有趣的网页滚动动画效果，唯一的缺陷是效果只能执行一次，而 ScrollReveal.js 可以弥补此缺陷，特点如下：
示例如下：
<script src="./scrollreveal.js">script>
示例如下：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 80px;
border: 1px solid black;
color: orangered;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 80px;
border-radius: 5px;
box-shadow: 0 0 10px black;
margin: 50px auto;
}
div:nth-of-type(odd) {
background-color: black;
color: white;
}
style>
<div>Div 1div>
<div>Div 2div>
<div>Div 3div>
<div>Div 4div>
<div>Div 5div>
<div>Div 6div>
<div>Div 7div>
<div>Div 8div>
<div>Div 9div>
示例如下：
ScrollReveal().reveal('div');
ScrollReveal 库默认的动画为淡入效果
ScrollReveal 库可以在初始化 ScrollReveal 实例时配置选项，以实现某种特定的动画效果
| 选项 | 类型 | 描述 |
|---|---|---|
| reset | boolean | 元素是否在容器来回滚动时都释放动画效果 |
| duration | number | 动画的持续事件、单位毫秒 |
| delay | number | 动画的延迟时间、单位毫秒 |
| rotate | object/number | 动画开始时的角度、单位 degree |
| opacity | number | 动画开始时的透明度 |
| scale | number | 动画开始时的缩放值 |
| distance | string | 动画的距离，示例：20px、10vw 等 |
| origin | string | 动画的方向，示例：left、top、bottom 等 |
| easing | string | 动画的效果，示例：ease、ease-out 等 |
示例如下：
let sr = new ScrollReveal({
reset: true,
duration: 1000,
delay: 500,
rotate: {x: 0, y: 0, z: 45},
opacity: 0.5,
scale: 1.5,
distance: "200px",
origin: "left",
easing: "ease"
});
sr.reveal("div");
在 ScrollReveal 中有 4 种自定义事件，如下所示：
| 事件 | 描述 |
|---|---|
| beforeReveal | 在动画效果开始之前调用此回调函数 |
| afterReveal | 在动画效果结束之后调用此回调函数 |
| beforeReset | 在动画效果恢复初始状态之前调用此回调函数 |
| afterReset | 在动画效果恢复初始状态之后调用此回调函数 |
之所以恢复动画初始状态是由于，当元素移出容器时，为了准备下一次动画效果，所以必须恢复至执行动画时的初始状态，此外，每一次回调将执行动画的元素传入此回调函数
示例如下：
let sr = new ScrollReveal({
reset: true,
duration: 1000,
delay: 500,
rotate: { x: 0, y: 0, z: 45 },
opacity: 0.5,
scale: 1.5,
distance: "200px",
origin: "left",
easing: "ease",
beforeReveal: function (ele) {
console.log("Before Reveal");
},
afterReveal: function (ele) {
console.log("After Reveal");
},
beforeReset: function (ele) {
console.log("Before Reset");
},
afterReset: function (ele) {
console.log("After Reset");
}
});
sr.reveal("div");