北京web工程师技术培训

响应式滚（滑）屏时，如何让元素躁动起来？

谈到“响应式滚（滑）屏“效果，你会想起什么呢？动画？加载方式？懒加载？.....

这些都是我们常用的响应式滚（滑）屏的交互方式，那么如果你想实现这些效果，你会怎么选择插件和还是自主去开发；其实这个问题没有绝对性，对于项目周期长or人员配置够diao的情况下，可以考虑自主开发插件，不过大部分情况，会选择对已有插件二次开发。当然了，本人也会采用第二种，今天只谈插件，不谈自主开发，如果想了解自主开发插件，可以查看先前的系列篇文章：“开发jQuery插件需要掌握什么基本知识点”，“分享“分页”插件的前端开发过程”。

回到主题，如果让你实现“响应式滚（滑）屏“的动画效果，你会选择什么插件，可能很多都会想到fullpage等一些插件，但是今天我并不想跟你们讲fullpage，而是我最近在国外网站发现的一款不错的轻量级插件：ScrollReveal。

ScrollReveal介绍

可能有些童鞋有了解过ScrollReveal，它是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件；该插件通过配置可以在页面滚动，元素进入视口时产生炫酷的动画效果，同时还支持元素的3D效果，非常的实用。

安装

可以通过npm或bower来安装scrollreveal.js插件。

npm install scrollreveal bower install scrollreveal基本使用方法HTML结构：

JS部分：

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()方法中的调用元素可以随时进行修改。例如：

//js 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，你可以对它进行修改。来看下代码：

//js var fooContainer = document.getElementById('fooContainer'); var barContainer = document.getElementById('barContainer'); window.sr = ScrollReveal()   .reveal( '.foo', { container: fooContainer } );   .reveal( '.bar', { container: barContainer } );异步调用内容

可以通过sync()方法来异步加载已经存在的reveal sets中的内容。

//js 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在页面开始渲染时才被加载，用户可能会看到元素闪烁的情况发生。

解决这个问题的方法是在中设置reveal元素的可见性为隐藏状态。例如下面的代码：

添加3D透视效果

ScrollReveal支持3D旋转效果，你需要做的是为你的容器指定一个perspective属性。

这里我提供了一个简单的案例：DEMO，如果要下载案例，请猛戳这里：下载DEMO

兼容性

大家最关注的是兼容性，它支持HTML5+CSS3主流浏览器预览效果；在IE8+上能正常显示，但是没动画效果，这个问题大家可以根据项目需求，酌情处理，^_^。

总结

每天一小步，成功一大步；闲余之时应多看、多学，多实践。

温馨提示：本文作者系admin ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：https://www.jiangweishan.com/article/jQueryScrollRevealJs.html