wow+animate

wow+animate相关网址: http://www.tz0632.net/ketrang/s730.html

简要说明：

animate官网：http://www.animate.net.cn/

wow+animate wow.js 使用方法


1、wow.js依赖于animate.css，首先需要在 head内引入animate.css或者animate.min.css。

2、引入wow.js或者wow.min.js，然后js文件里再写一行代码。

new WOW().init();

3.然后在块状元素内添加相应的class类名就能实现相应的动画啦。

data-wow-duration="2s" //动画持续时间

data-wow-offset="10" //动画延迟时间

data-wow-iteration="10">//动画执行次数

<!DOCTYPE html>
<html>
<head>
	<title>wow演示</title>
	<meta charset="utf-8">

	<!-- 1.引入wow依赖的animate.css -->
	<link href="css/animate.css" rel="stylesheet" type="text/css">
	<!-- 2.引入wow.js 文件 -->
	<script type="text/javascript" src="js/wow.js"></script>
	<!-- 3.now 对象 -->
	<script type="text/javascript">
		new WOW().init();
		// 可选的参数
		// wow = new WOW({
		//     boxClass:     'wow', 		//WOW.js需要执行动画的元素的class    
		//     animateClass: 'animated',   //animation.css 动画的 class
		//     offset:       0,            //距离可视区域多少开始执行动画    
		//     mobile:       true,  		//是否在移动设备上执行动画     
		//     live:         true        	//异步加载的内容是否有效
		// })
		// wow.init();
	</script>
</head>
<body>
	<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s" data-wow-offset="1000"  data-wow-iteration="1" style="width: 500px;height: 2000px;
background-color: #ccc;position: absolute;left: 50%;margin-top: 0px;margin-left: -250px;margin-bottom: 50px">
		wow 动画演示
	</div>	
	<!-- slideInLeft         动画样式 -->
	<!-- data-wow-duration   动画持续时间 -->
	<!-- data-wow-delay      动画延迟时间 -->
	<!-- data-wow-offset	 元素的位置（左上角的位置）露出后距离底部多少像素时执行 -->
	<!-- data-wow-iteration  动画执行次数 -->
</body>
</html>