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>