scrollReveal.js – 页面滚动显示动画JS

简介

和wow.js一样的是：scrollReveal.js也是一款页面滚动显示动画jsc插件，能让页面更有趣，吸引眼球。

和wow.js不一样的是：wow.js动画只能播放一次及依赖animate.css，而scrollReveal.js的动画可以播放一次或无限次及不依赖其他任何文件；

注：scrollReveal.js的动画使用css3创建的，所以它不支持ie10以下的浏览器

 

基本方法

  1.引入文件

  <script src=“js/scrollReveal.js”/></script>

2.html

  <div data-scroll-reveal>我叫刘美丽</div>

  必须给元素加上 data-scroll-reveal属性，之后会执行默认动画效果，也可以自定义改属性显示不同的动画效果

  eg:

<div data-scroll-reveal="enter left and move 50px over 1.33s">dowebok.com</div>
<div data-scroll-reveal="enter from the bottom after 1s">Hello world!</div>
<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6</div>

3.javascript

window.scrollReveal=new scrollReveal();
//或者，elem为动画元素的任何级别的父元素
window.scrollReveal2=nre scrollReveal({elem:document.getElementById('content')})

data-scroll-reveal属性

enter
说明：动画起始方向
值：top | right | bottom | left
move
说明：动画执行距离
值：数字，以px为单位
over
说明：动画持续时间
值：数字，以秒为单位
after/wait
说明：动画延迟时间
值：数字，以秒为单位

填充（可选）
可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：
form
the
and
then
but
with
,

也就是可以像这样写 HTML：

<div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">dowebok.com</div>
<div data-scroll-reveal="enter from the left after 0.3s, move 40px, over 2s">Hello world!</div>
<div data-scroll-reveal="enter left move 40px over 2s after 0.3s">iPhone 6</div>
<div data-scroll-reveal="enter left, move 40px, over 2s, wait 0.3s">I love you</div>

高级用法
自定义默认值
可以更改scrollReveal.js的默认配置，eg:
var mycont={
     after:'0s',
     enter:'bottom',
     move:'24px',
     over:'0.66s',
     easing:'ease-in-out',
     viewportFactor:0.33,
     reset:false,
     init:true
};
window.scrollReveal=new scrollReveal(mycont);

动态HTML
scrollReveal.init()方法可以检测所有含有data-scroll-reveal属性的元素，
并进行初始化，所以对于动态加载的元素，可以这样操作：
var mycont={
  enter='bottom',
  move='40px',
  over:'0.16s',
  reset:true,
  init:false
}
window.scrollReveal=new scrollReveal(mycont);
var data   = {newElementHtml:'<div data-scroll-reveal>dowebok.com</div>'};
var content= document.getElementById("#content");
content.innerHtml(data.newElementHtml);
scrollReveal.init();



注：本内容为复制整理其他人的内容弄得