scrollReveal(页面缓入效果插件)

Posted chenghuayike

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scrollReveal(页面缓入效果插件)相关的知识,希望对你有一定的参考价值。

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 插件的一些基本使用方法,相互学习,望大佬带带本萌新。

以上是关于scrollReveal(页面缓入效果插件)的主要内容,如果未能解决你的问题,请参考以下文章

scrollreveal(页面滚动显示动画插件支持手机)

scrollReveal.js网页动效插件

scrollReveal.js页面滚动动态效果

ScrollReveal-元素随页面滚动产生动画的js插件

scrollReveal.js使用

CSS3悬停不透明度缓入效果?