[TOC] # scrollReveal.js  ## 1.調用 可以給**所有**的對象設置效果，即配置scrollReveal對象， ``` <script> var config ={ reset: true, //是否重新執行動畫 ，默認不重復（一次性動畫） enter: "left" , //動畫開始的方向 move: '200px', //移動多少像素 over: "0.5s", //動畫持續時間 after: "0s", //延遲 opacity: 0, //初始透明度 }; var sr = new scrollReveal(config); </script ``` 也可以單獨給**某個**對象設置效果 ``` <li class="right" data-scroll-reveal="enter right move 100px over .5s after 1s">添加</li> ``` ### 1.1代碼按鈕 ``` <style> ul{ padding: 0; list-style: none; } .box{ width: 500px; /*background: pink;*/ margin: 0 auto; /*overflow: hidden;*/ } li{ width: 200px; height: 200px; background-color: #ccc; margin-bottom: 30px; } .left{ float: left; } .right{ float: right; } </style> <script src="js/sr/scrollReveal.js"></script> /*要引入包*/ <ul class="box"> <li data-scroll-reveal class="left"></li> <li data-scroll-reveal class="right"></li> <li data-scroll-reveal class="left"></li> <li data-scroll-reveal class="right"></li> <li data-scroll-reveal class="left"></li> <li class="right" data-scroll-reveal="enter right move 100px over .5s after 1s">添加</li> <li data-scroll-reveal class="left"></li> <li data-scroll-reveal class="right"></li> <li data-scroll-reveal class="left"></li> <li data-scroll-reveal class="right"></li> </ul> <script> var config ={ reset: true, //是否重新執行動畫 enter: "left" , //動畫開始的方向 move: '200px', //移動多少像素 over: "0.5s", //動畫持續時間 after: "0s", //延遲 opacity: 0, //初始透明度 }; var sr = new scrollReveal(config); </script> </body> ``` ## 2.跟wow.js的區別 **wow.js和scrollreveal.js對比** 1 都不依賴jquery； 2 WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以**播放一次或無限次**； 3 WOW.js 依賴 animate.css，而 scrollReveal.js 不依賴其他任何文件; 4 WOW.js 依賴 animate.css使用，動畫效果更多