scrollReveal（页面缓入效果插件）

Posted 2020-11-26 chenghuayike

scrollReveal（页面缓入效果插件）实现页面滚动时动画加载元素效果

　　前面我去了解了元素距页面视图距离，想实现页面滚动是动画加载元素（https://www.cnblogs.com/chenghuayike/p/11970731.html）到处撞墙，心肥意冷啊┭┮﹏┭┮，猛然间发现了scrollReveal 插件，查看了官档后明白过来，这不就是我想实现的效果嘛，还是太过于萌新了。。。

　　好了，接下来我总结了一下 scrollReveal 插件的基本使用方法，加强记忆！！

　　scrollReveal 插件使用起来非常的简单，三部曲：

　　1.引入 scrollReveal ：

　　<script src="https://unpkg.com/scrollreveal" type="text/javascript" charset="utf-8"></script>
　　// 或者下载到本地使用

　　2.js代码：

window.sr = ScrollReveal();
sr.reveal(‘.foo‘); // 这里的 .foo 为元素类名 引用与jquery语法相同

　　3.html代码：

    <div id="containers">
   　　 <div class="foo"> Foo ??</div>
    　　<div class="foo"> Foo1 </div>
    　　<div class="foo"> Foo2 </div>
    　　<div class="foo"> Foo3 </div>
    </div>
　　　　 <div class="foo"> Foo4 </div>

　　运行项目即可（是不是非常的简单？）

 

　　当然，这只是 scrollReveal 插件的最基本的用法，是固定的一种淡入效果，（却不是我想要的动画效果）接下来我们来看一看 scrollReveal 的属性：

　　以下是scrollReveal插件 官方文档 给出的属性（自己整理了一下）：

　　

　　　　　　　//     属性：（默认）
            delay: 0,                                // 延时时间
            distance: ‘0px‘,                            // 执行距离
            duration: 600,                            // 执行时长
            easing: ‘cubic-bezier(0.5, 0, 0, 1)‘,     // 执行速度
            interval: 0,                                // 执行间隔（时间）
            opacity: 0,                                // 执行方式（透明度）
            origin: ‘bottom‘,                        // 执行方式（偏移 top:自上而下,bottom:自下而上,left:自左往右,right:自右往左.）
            rotate: {                                // 执行方式（旋转）
                x: 0,                                // x
                y: 0,                                // y
                z: 0,                                // z
            },
            scale: 1,                                // 执行方式（缩放）
            cleanup: false,                            // 暂时不知道是什么东西
            container: document.documentElement,        // 执行容器（后跟元素，填写后只有容器内的元素执行动画）
            desktop: true,                            // 是否在电脑上面执行
            mobile: true,                            // 是否在手机上面执行
            reset: false,                            // 是否重复执行（）
            useDelay: ‘always‘,                        // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
            viewFactor: 0.0,                            // 视图显示元素百分之多少的时候执行动画（单位：小数，例：0.50 在元素展示超过百分之五十的时候，执行动画）
            viewOffset: {                            // 视图偏移（把视图抽象成元素移动）
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
            },
            afterReset: function (el) {},            // 重置之后（视图内看不到元素之后，退场动画执行结束之后）
            afterReveal: function (el) {},            // 执行之后（动画已经执行完毕（已完成））
            beforeReset: function (el) {},            // 重置之前（视图内看不到元素之后，退场动画执行结束之前）
            beforeReveal: function (el) {},            // 执行之前（动画开始执行（未完成时））

　　这次是不是一目了然（肯定会了解的深入一点了吧），接下来根据官方文档给出的使用方式，我们来试一试：

　　1.引入js  2.html代码 （这两步同上）

　　3.js代码：（除了使用原生动画属性外，还有两种使用方式）

　　第一种：

　　直接在 reveal 的时候，在后面参数内直接添加自己想要的某一些属性：

　　　　var containers = document.getElementById("containers")
     　window.sr = ScrollReveal();
　　　　sr.reveal(‘.foo‘,{container:containers});

　　以上代码中  {container:containers}  表示只有在 containers 中的类名为“foo”的元素执行 scrollReveal 插件的动画效果，相当于确定某个盒子（containers）里面的元素执行scrollReveal

　　第二种：

　　我们可以先 var 一个 option 来写入要替换默认属性

　　　　var option = {
            delay: 0,
            distance: ‘140px‘,
            easing: ‘ease-in-out‘,
            origin: "bottom",
            interval: 300,
            afterReset: function(el) {
                console.log("重置之后")
            },
            afterReveal: function(el) {
                console.log("执行之后")
            },
            beforeReset: function(el) {
                console.log("重置之前")
            },
            beforeReveal: function(el) {
                console.log("执行之前")
            },
            reset: true,
        }

　　接下来：

sr.reveal(‘.foo‘,option);

　　相当于用以上option中的属性覆盖掉scrollReveal插件的默认属性，用来替换自己想要的效果，或者使用其中的回调函数等等

以上为我总结的 scrollReveal 插件的一些基本使用方法，相互学习，望大佬带带本萌新。