简介
和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。
虽然 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。
IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果，并且因为不支持一些属性或方法会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。
演示及下载
演示地址1
演示地址2
原文地址
本地下载
安装
可以通过npm或bower来安装scrollreveal.js插件。
npm install scrollrevealbower 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 } ); ??默认参数
// Animationorigin ?????: '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 )', // Optionscontainer ??: 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在页面开始渲染时才被加载，用户可能会看到元素闪烁的情况发生。
解决这个问题的方法是在
<!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> ??ScrollReveal-元素随页面滚动产生动画的js插件
原文地址：https://www.cnblogs.com/lalalagq/p/9973564.html