[TOC] ### 1. 引入cdn ~~~ <script src="http://cdn.dowebok.com/134/js/scrollReveal.js"></script> ~~~ ### 2. 编写代码 （从哪开始（enter）， 用时多少（over）， 延时多少（after），and 移动多少（move）） ~~~ <ul> <li data-scroll-reveal="enter top"><img src="http://cdn.dowebok.com/134/images/i2/1.jpg" alt=""></li> <li data-scroll-reveal="enter right after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/2.jpg" alt=""></li> <li data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"><img src="http://cdn.dowebok.com/134/images/i2/3.jpg" alt=""></li> <li data-scroll-reveal="enter top over 0.5s and move 200px"><img src="http://cdn.dowebok.com/134/images/i2/4.jpg" alt=""></li> <li data-scroll-reveal="enter bottom over 1s and move 100px"><img src="http://cdn.dowebok.com/134/images/i2/5.jpg" alt=""></li> <li data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"><img src="http://cdn.dowebok.com/134/images/i2/6.jpg" alt=""></li> <li data-scroll-reveal="enter top over 3s after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/7.jpg" alt=""></li> <li data-scroll-reveal="enter left"><img src="http://cdn.dowebok.com/134/images/i2/8.jpg" alt=""></li> </ul> ~~~ ### 3. 编写js ~~~ script> //判断浏览器版本因为ie10以下不支持 if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ (function(){ window.scrollReveal = new scrollReveal({reset: true}); })(); }; </script> ~~~ ### 4. data-scroll-reveal中的属性 ~~~ enter 说明: 动画起始方向 值: top | right | bottom | left move 说明: 动画执行距离 值: 数字，以 px 为单位 over 说明: 动画持续时间 值: 数字，以秒为单位 after/wait 说明: 动画延迟时间 值: 数字，以秒为单位 填充（可选） 可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”： from the and then but with ~~~ ### 演示 [演示](http://www.dowebok.com/demo/134/index2.html) [参考教程](http://www.dowebok.com/134.html)