wow.js搭配 animate.css实现网页动画效果，网页高效开发提高档次

1.简介

在pc端尤其是官网开发中，为了提高网页美观性，一般会让页面在滚动过程中实现内容动态展示的效果；比如需要做到滚动条滑到某个位置时，显示渐入的动画。 wow.js 依赖 animate.css即可高效实现这样的效果，它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

2.使用方法

1、首先在头部引用animate.css或者animate.min.css。

<link rel="stylesheet" type="text/css" href="css/animate.min.css">

2、在最底部或引入的css下面引用wow.js或者wow.min.js，然后在下面再写一行javascript代码来注册WOW。

<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
    new WOW().init();//WOW要大写
</script>

如果需要自定义配置，可如下使用：

<script>
var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();
</script>

参数说明

3、写html代码（必须设置为块状或者行内块状），并添加class类名。

<div class="wow slideInLeft"></div>

另外可以加入 data-wow-duration（动画持续时间）、 data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）、data-wow-iteration（动画执行次数）属性 （可选可不选） ，如：

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

下表为部分对应类名及其效果：

测试–示例：

<!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: 1000px;background-color: #ccc;position: absolute;left: 50%;margin-top: 0px;margin-left: -250px;margin-bottom: 50px">
		wow 动画演示
	</div>	

</body>
</html>

3.备注

3.1 下载地址：animate.css：github.com/matthieua/W… 或者打开链接: pan.baidu.com/s/1JPXqAYLj… 提取码: qxtx 获取Wow的css和js包。 3.2 动画效果展示网站：daneden.github.io/animate.css… 3.3 参考演示地址 www.dowebok.com/131.html 原文链接：blog.csdn.net/rensheng202…