JS 流行库（八）：ScrollReveal

WOW.js + Animate.css 虽然可以实现有趣的网页滚动动画效果，唯一的缺陷是效果只能执行一次，而 ScrollReveal.js 可以弥补此缺陷，特点如下：

• 兼容 PC 和移动端
• 不依赖于 jQuery，也不依赖于 Animate.css
• 不支持低版本浏览器（Animate 和 WOW 同样也不支持）

基本使用

1. 导入 ScrollReveal 库

示例如下：

<script src="./scrollreveal.js"></script>

2. HTML 代码

示例如下：

<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 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div>Div 7</div>
<div>Div 8</div>
<div>Div 9</div>

3. JavaScript 代码

示例如下：

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");