scrollReveal学习记录

scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；
官网：https://scrollrevealjs.org/
下载地址：https://github.com/scrollreveal/scrollreveal
特点：1，scrollReveal同时兼容PC端和移动端。2，0依赖（不依赖于jQuery，也不依赖于animate.css）。3，定制性高，使用简单方便快捷。同样兼容也是支持ie10+的浏览器
使用方式依旧很简单

// 引入文件
<script src="js/scrollReveal.js"></script>

// html
<div class="sr"></div>

// JavaScript
window.onload = function () {
    window.sr = ScrollReveal(); //初始化
    sr.reveal('.sr'); //添加类
}

然后我们常用的配置如下

 var config = {
     reset: false, // 滚动鼠标时，动画开关
     origin: 'bottom', // 动画开始的方向
     duration: 500, // 动画持续时间
     delay: 0, // 延迟
     rotate: {x:0, y:0, z:0}, // 过度到0的初始角度，关键点想要酷炫的样式主要修改此参数
     opacity: 0, // 初始透明度
     scale: 0.9, //初始缩放大小，可以大于1,变为逐渐缩小
     easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)', // 缓动'ease', 'ease-in-out'，'linear'...

     // 回调函数
     beforeReveal: function(domEl){},
     beforeReset: function(domEl){},
     afterReveal: function(domEl){},
     afterReset: function(domEl){}
};

window.sr = ScrollReveal();
sr.reveal('.sr', config);

然后就可以使用啦没有尝试过的小伙伴尽快尝试吧~
用此插件能快速写出一个简单带有动画的瀑布流，记得当初用原生撸出一套标准的瀑布流足足用了我8个小时的时间。。。。。。酷炫程度还为0 …心累

scrollReveal学习记录

scrollReveal学习记录

猜你喜欢