特效描述:jQuery 页面滚动动画。jQuery页面滚动动画展示特效
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/animate.css">
2. 引入JS
<script src="js/wow.min.js"></script>
3. HTML代码
<h1>WOW.js - 页面滚动动画展示</h1> <p class="txt">WOW.js 能让页面滚动时显示动画,使页面更有趣。</p> <div class="dowebok"> <div class="row"> <div class="wow rollIn bg-blue"></div> <div class="wow bounceInDown bg-green">WOW.js</div> <div class="wow lightSpeedIn bg-purple"></div> </div> <div class="row"> <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用</div> <div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow bounceInRight bg-blue">轻量级</div> </div> <div class="row"> <div class="wow bounceInLeft bg-green"></div> <div class="wow flipInX bg-purple">WOW.js</div> <div class="wow bounceInRight bg-yellow"></div> </div> <div class="row"> <div class="wow rollIn bg-blue">无需 jQuery</div> <div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow swing bg-purple" data-wow-iteration="2">纯 JS</div> </div> <div class="row"> <div class="wow rollIn bg-red"></div> <div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div> <div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div> </div> <div class="row"> <div class="wow bounceInLeft bg-purple">依赖 animate.css</div> <div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div> <div class="wow lightSpeedIn bg-yellow">多种动画</div> </div> <div class="row"> <div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow bounceInUp bg-red">WOW.js</div> <div class="wow bounceInRight bg-purple"></div> </div> <div class="row"> <div class="wow rollIn bg-red" data-wow-delay="0.5s">无需 jQuery!?</div> <div class="wow bounceInDown bg-green" data-wow-delay="1s"></div> <div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">谢谢</div> </div> </div> <script> if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script>