JS 流行框架（八）：ScrollReveal

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 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>

3. JavaScript 代码

示例如下：

ScrollReveal().reveal('div');

ScrollReveal 库默认的动画为淡入效果

高级使用

ScrollReveal 库可以在初始化 ScrollReveal 实例时配置选项，以实现某种特定的动画效果

示例如下：

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 种自定义事件，如下所示：

之所以恢复动画初始状态是由于，当元素移出容器时，为了准备下一次动画效果，所以必须恢复至执行动画时的初始状态，此外，每一次回调将执行动画的元素传入此回调函数

示例如下：

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