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…
