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>

?

1	3.javascript

?

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

?

1	data-scroll-reveal属性

?

1	enter说明：动画起始方向值：top | right | bottom | leftmove说明：动画执行距离值：数字，以px为单位over说明：动画持续时间值：数字，以秒为单位after/wait说明：动画延迟时间值：数字，以秒为单位填充（可选）可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：formtheandthenbutwith,

?

1	也就是可以像这样写 HTML：

?

1 2 3 4

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

?

1

高级用法自定义默认值可以更改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);动态HTMLscrollReveal.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();注：本内容为复制整理其他人的内容弄得