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

也可以直接引入文件


<script src="js/scrollReveal.js"></script>

使用方法

HTML结构：


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

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


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


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


<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>


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 -->
<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>


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

示例代码如下：


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

提升用户体验

在大多数情况下，你的元素都是从opacity: 0开始，以使它们可以制作淡入的效果。但是由于JavaScript在页面开始渲染时才被加载，用户可能会看到元素闪烁的情况发生。
解决这个问题的方法是在中设置reveal元素的可见性为隐藏状态。例如下面的代码：


<!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属性。


<!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>