ScrollReveal.js网页滚动动态加载插件

scrollreveal.js是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；

特点：

1、scrollReveal同时兼容PC端和移动端。

2、0依赖（不依赖于jQuery，也不依赖于animate.css）。

3、定制性高，使用简单方便快捷。同样兼容也是支持ie10+的浏览器使用方式依旧很简单。

1、下载官网：https://scrollrevealjs.org/

2、引入动画库javascript文件

<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

3、html中为需要动画效果的标签绑定一个类 .box

<div class="box"></div>

4、设置动画配置信息（更多详细可以查看 https://scrollrevealjs.org/api/reveal.html）

ScrollReveal().reveal('.box', {
        reset: true,   // 滚动鼠标时，动画开关(默认是false没有打开鼠标滚动的动画开关)
        origin: 'right', // 动画开始的方向
        duration: 500,   // 动画持续时间
        delay: 0, // 延迟
        rotate: {x:0, y:0, z:0},  // 过度到0的初始角度
        opacity: 0.2, // 初始透明度  (0.2到1的效果)
        scale:2,       //缩放
        easing: 'ease-in-out', //动画效果// 缓动'ease', 'ease-in-out'，'linear'...
        // 回调函数
        //当动画开始之前会被触发
        beforeReveal: function(domEl){
            console.log('动画执行了');
        },
        //鼠标滚轮滚动之前会被触发
        beforeReset: function(domEl){
            console.log('滚轮开始---');
        },
        //动画开始之后会被触发
        afterReveal: function(domEl){
            console.log('动画结束了');
        },
        //滚轮滚动之后会被触发
        afterReset: function(domEl){
            console.log('滚轮结束了');
        }
    });