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

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

ScrollReveal插件的github地址为：https://github.com/jlmakes/scrollreveal.js

安装

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

1 2	npm install scrollreveal bower install scrollreveal

基本使用方法

HTML结构：

1 2 3

<!-- HTML --> < div  class = "foo" > Foo </ div > < div  class = "bar" > Bar </ div >

JavaScript：

1 2 3

window.sr = ScrollReveal(); sr.reveal( '.foo' ); sr.reveal( '.bar' );

链式编程方法

ScrollReveal的构造函数和它主要的方法都支持链式编程。

1 2 3 4 5 6

window.sr = ScrollReveal(); sr.reveal( '.foo' ); sr.reveal( '.bar' );   // 上面的代码和下面的代码效果相同 window.sr = ScrollReveal().reveal( '.foo, .bar' );

配置参数

可以通过传入一个配置参数对象到ScrollReveal()中来修改默认的参数设置。也可以通过向reveal()中插入配置参数对象来自定义动画集合。

1 2 3 4 5

// 修改默认配置 window.sr = ScrollReveal({ reset:  true  });   // 自定义一个动画集合 sr.reveal(  '.foo' , { wait: 200 } );

默认参数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

1 2	< div  class = "foo" > Foo </ div > < div  class = "foo"  id = "chocolate" > Chip </ div >

1 2 3 4 5 6 7 8 9 10 11

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，你可以对它进行修改。

1 2 3 4 5 6 7 8 9 10 11

< div  id = "fooContainer" >    < div  class = "foo" > Foo 1 </ div >    < div  class = "foo" > Foo 2 </ div >    < div  class = "foo" > Foo 3 </ div > </ div >   < div  id = "barContainer" >    < div  class = "bar" > Bar 1 </ div >    < div  class = "bar" > Bar 2 </ div >    < div  class = "bar" > Bar 3 </ div > </ div >

1 2 3 4 5 6

var  fooContainer = document.getElementById( 'fooContainer' ); var  barContainer = document.getElementById( 'barContainer' );   window.sr = ScrollReveal()    .reveal(  '.foo' , { container: fooContainer } );    .reveal(  '.bar' , { container: barContainer } );

异步调用内容

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

1 2 3 4 5 6 7 8 9 10 11

<!-- index.html --> < div  id = "container" >    < div  class = "foo" >foo</ div >    < div  class = "foo" >foo</ div >    < div  class = "foo" >foo</ div > </ div >   <!-- ajax.html --> < div  class = "foo" >foo async</ div > < div  class = "foo" >foo async</ div > < div  class = "foo" >foo async</ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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库已经被加载。
• 页面中的元素样式已经被加载不会在被覆盖。

示例代码如下：

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> < html >    < body >        <!-- All the things... -->        < script  src = "js/scrollreveal.min.js" ></ script >      < script >        window.sr = ScrollReveal();      </ script >    </ body > </ html >

提升用户体验

在大多数情况下，你的元素都是从opacity: 0开始，以使它们可以制作淡入的效果。但是由于JavaScript在页面开始渲染时才被加载，用户可能会看到元素闪烁的情况发生。

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!DOCTYPE html> < html >    < head >      < script >        // If JavaScript is enabled, add '.js-enabled' to < html > element        document.documentElement.classList.add('js-enabled');      </ script >      < style >        /* Ensure elements load hidden before ScrollReveal runs */        .js-enabled .fooReveal { visibility: hidden; }      </ style >    </ head >    < body >          <!-- All the things... -->        < script  src = "js/scrollreveal.min.js" ></ script >      < script >        window.sr = ScrollReveal();        sr.reveal('.fooReveal');      </ script >    </ body > </ html >

添加3D透视效果

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<!DOCTYPE html> < html >    < head >      < script >        document.documentElement.classList.add('js-enabled');      </ script >      < style >        .js-enabled .fooReveal { visibility: hidden; }        .fooContainer { perspective: 800px; }      </ style >    </ head >    < body >        < div  class = "fooContainer" >        < div  class = "fooReveal" > Foo </ div >        < div  class = "fooReveal" > Foo </ div >        < div  class = "fooReveal" > Foo </ div >      </ div >        < script  src = "js/scrollreveal.min.js" ></ script >      < script >        window.sr = ScrollReveal();      sr.reveal( '.fooReveal', { rotate: {x: 65} } );    </ script >    </ body > </ html >

ScrollReveal插件的github地址为：https://github.com/jlmakes/scrollreveal.js

转载于:https://www.cnblogs.com/well-nice/p/6074084.html