ScrollReveal-元素随页面滚动产生动画的js插件
简介
和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件。
虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器。
IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果,并且因为不支持一些属性或方法会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。
安装
可以通过npm或bower来安装scrollreveal.js插件。
npm install scrollreveal bower install scrollreveal
也可以直接引入文件
使用方法
HTML结构:
Foo
JavaScript:
window.sr = ScrollReveal(); sr.reveal('.foo'); sr.reveal('.bar');
链式编程方法
ScrollReveal的构造函数和它主要的方法都支持链式编程。
window.sr = ScrollReveal(); sr.reveal('.foo'); sr.reveal('.bar'); // 上面的代码和下面的代码效果相同 window.sr = ScrollReveal().reveal('.foo, .bar');
配置参数
可以通过传入一个配置参数对象到ScrollReveal()中来修改默认的参数设置。也可以通过向reveal()中插入配置参数对象来自定义动画集合。
// 修改默认配置 window.sr = ScrollReveal({ reset: true }); // 自定义一个动画集合 sr.reveal( '.foo', { wait: 200 } );
默认参数
// Animation origin : 'bottom', distance : '20px', duration : 500, delay : 0, rotate : { x: 0, y: 0, z: 0 }, opacity : 0, scale : 0.9, easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', // Options container : null, mobile : true, reset : false, useDelay : 'always', viewFactor : 0.20, viewOffset : { top: 0, right: 0, bottom: 0, left: 0 }, afterReveal : function( domEl ) {}, afterReset : function( domEl ) {}
参数描述
参数 | 类型 | 可用值 | 描述 |
origin | string | ‘top’,’right’,’bottom’,’left’ | 动画的方向 |
distance | string | 可用任何CSS单位值,如:’20px’,’10vw’,’5%’ | 动画的距离 |
duration | number | 500 | 动画持续时间,单位毫秒 |
delay | number | 0 | 动画的延迟时间,单位毫秒 |
rotate | object/number | { x: 0, y: 0, z: 0 } | 开始的角度,单位degrees |
opacity | number | 0 | 开始的透明度 |
scale | number | 0.9 | 开始的缩放值 |
easing | string | ‘ease’ ‘ease’ ‘ease-out’ ‘ease-in-out’ ‘ease-in-out’ |
动画的easing效果,可以是任何有效的CSS easing值 |
container | node | document.getElementById(‘foo’) | 容器 |
mobile | boolean | true / false | 是否在移动手机上显示动画效果 |
reset | boolean | true / false | 元素是否在容器边界内来回滚动时都产生动画效果 |
useDelay | string | ‘always’,’once’,’onload’ | 控制元素什么时候使用动画延迟 |
viewFactor | number | 0.20 | 0.20表示元素在产生动画之前,它的20%在viewport或容器的边界之内 |
viewOffset | object/number | { top: 48, bottom: 24 } | 增加viewport或容器边界,单位像素 |
afterReveal | function | function( domEl ) {} | reveal动画之后触发的回调函数 |
afterReset | function | function( domEl ) {} | reset动画之后触发的回调函数 |
高级应用
覆盖配置
reveal()方法中的调用元素可以随时进行修改。例如:
FooChip
var fooReveal = { delay : 200, distance : '90px', easing : 'ease-in-out', rotate : { z: 10 }, scale : 1.1 }; window.sr = ScrollReveal() .reveal( '.foo', fooReveal ) .reveal( '#chocolate', { delay: 500, scale: 0.9 } );
配置多个容器
默认的容器是viewport,你可以对它进行修改。
Foo 1Foo 2Foo 3
var fooContainer = document.getElementById('fooContainer'); var barContainer = document.getElementById('barContainer'); window.sr = ScrollReveal() .reveal( '.foo', { container: fooContainer } ); .reveal( '.bar', { container: barContainer } );
异步调用内容
可以通过sync()方法来异步加载已经存在的reveal sets中的内容。
!-- index.html -->foofoofoofoo asyncfoo asyncfoo async
var fooContainer, content, sr, xmlhttp; fooContainer = document.getElementById('fooContainer'); sr = ScrollReveal(); sr.reveal( '.foo', { container: fooContainer } ); // Setup a new asynchronous request... xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( xmlhttp.readyState == XMLHttpRequest.DONE ) { if ( xmlhttp.status == 200 ) { // Turn our response into HTML... var content = document.createElement('div'); content.innerHTML = xmlhttp.responseText; content = content.childNodes; // Add each element to the DOM... for ( var i = 0; i < content.length; i++ ) { fooContainer.appendChild( content[ i ]); }; // Finally! sr.sync(); } } } xmlhttp.open('GET', 'ajax.html', true); xmlhttp.send();
小技巧
加载次序
你需要注意的重要的一点是尽可能在页面的最后再调用ScrollReveal,也就是说:
- 页面中的DOM元素已经被加载完成。
- 任何第三方的js库已经被加载。
- 页面中的元素样式已经被加载不会在被覆盖。
示例代码如下:
提升用户体验
在大多数情况下,你的元素都是从opacity: 0开始,以使它们可以制作淡入的效果。但是由于JavaScript在页面开始渲染时才被加载,用户可能会看到元素闪烁的情况发生。
解决这个问题的方法是在
添加3D透视效果
ScrollReveal支持3D旋转效果,你需要做的是为你的容器指定一个perspective属性。
FooFooFoo
演示及下载
演示地址1
演示地址2
本地下载
ScrollReveal插件的github地址为:https://github.com/jlmakes/scrollreveal.js