[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使用，动画效果更多