jQuery页面滚动动画展示特效



82 327 110



特效描述: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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 加载动画 自动滚动图片轮播 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 全屏滚动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到