一个简单的元素随页面滚动产生动画的js插件

最近在做官网，想要一些动态效果，结果找了很多资料都不太如意，就找到了ScrollReveal，结果官网上全是英文资料，估计初学会很难使用，我这里写了一些简单的用法。

插件地址：https://scrollrevealjs.org 这个是免费的在官网上。 

首先引入js文件

然后添加HTML元素

<div class="moveTop">....</div>

<div class="moveLeft">....</div>

<div class="moveRight">....</div>

我这里写了三种样式，可以简单用一下，如果需要更多，可以联系我，免费帮助。

try {
    window.sr = ScrollReveal();

    var configLeft = {
        reset: true,
        origin: 'left',
        duration: 500,
        delay: 0,
        move: "2000",
        rotate: {x:0, y:0, z:0},
        opacity: 0,
        scale:1,
        easing: 'linear',
    };

    var configRgiht = {
        reset: true,
        origin: 'right',
        duration: 500,
        delay: 0,
        move: "2000",
        rotate: {x:0, y:0, z:0},
        opacity: 0,
        scale:1,
        easing: 'linear',
    };

    var configTop = {
        reset: true,
        origin: 'top',
        duration: 500,
        delay: 0,
        rotate: {x:0, y:0, z:0},
        opacity: 0,
        scale:2,
        easing: 'ease-in-out',
    };
    sr.reveal('.moveTop',configTop);
    sr.reveal('.moveLeft',configLeft);
    sr.reveal('.moveRight',configRgiht);
}catch (e) {

}

这些只是把一些简单的用法组合起来，初学者可以借鉴一下。