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