scrollReveal.js页面滚动动画插件的使用

scrollReveal.js简介：

scrollReveal.js是一款js的页面滚动动画插件，兼容PC端和移动端。主要功能是当页面滚动到浏览器可视窗口内时为元素添加相应的进入动画。

scrollReveal.js不依赖animate.css以及Jquery。但它的动画也是用css3创建的，因此不支持ie10以下的浏览器。

scrollRever.js官方网址：https://scrollrevealjs.org/

浏览器兼容：

ie10+，chrome，Firefox，Opera，Safari

基本使用方法：

1：引入js文件：

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

2：为需要动画的元素添加data-scroll-reveal属性

<div data-scroll-reveal>hello,world!</div>

 3：初始化scrollReveal并配置

<script>
    window.scrollReveal = new scrollreveal({
        //配置选项
    });
</script>

完成以上步骤后便成功为元素添加了滚动动画。

data-scroll-reveal配置项：

data-scroll-reveal拥有一些可选的配置属性：

enter：

    说明：设置动画的起始方向

扫描二维码关注公众号，回复： 6757518 查看本文章

    可选值：top | right | bottom | left

move：

    说明：设置动画的执行距离（也可以在初始化时统一设置）

    value：number，以px为单位

over：

    说明：动画的持续时间

    value：number，以s为单位

after：

    说明：动画延迟时间

    value：number，以s为单位

<div data-scroll-reveal="enter left move 50px over 1s after .5s">hello,world！</div>

自定义默认值：

在初始化scrollReveal时我们可以传入默认配置，页面上所有设置data-scroll-reveal属性的元素若没有特别配置，都将使用默认值。

<script>
    window.scrollReveal = new scrollReveal({
        move:'50px',
        enter:'left',
        ...
    })
</script>

原理：

以往自己也写过很多类似的效果，通过监听页面滚动判断要设置动画的元素是否进入了浏览器可视窗口，若进入则为该元素添加相应的css3动画css。scrollReveal.js也是如此，但scrollReveal.js对这一过程进行了更好的封装，使得完成该效果更加简单方便。