一、WOW.js介绍

WOW.js 实现了在网页滚动时的动画效果，可以让你的页面更有趣，比如页面在向下滚动的时候，让一些元素产生动画效果，吸引用户的注意。
注意点：WOW.js 实现需要 Animate.css 项目的支持。
点击前往WOW.js官网

二、使用步骤

1.打开git链接下载WOW.js
2.解压文件，找到dist下的wow.min.js文件用于链接到页面中使用WOW.js
3.首先要在页面中链入Animate.css

<!-- 引入animate文件 -->
<link rel="stylesheet" href="css/animate.min.css">

4.在页面底部引入wow.min.js文件并进行初始化

<script src="../js/wow.min.js"></script>
<script>new WOW().init();
</script>

也可以进行自定义配置，如下所示：

var wow = new WOW({boxClass: ‘wow‘,animateClass: ‘animated‘,offset: 0,mobile: true,live: true
});
wow.init();

配置的含义：

属性	类型	默认值	说明
boxClass	字符串	‘wow’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

5.为想要添加动画效果的元素（必须是块级元素或者是行内块级元素）先添加一个名为’wow’的类名，再为其添加相应动画的动画名即可（这个可以到官网中查看自己想要的动画效果类名））。

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

也可以为其添加以下四个属性：

属性	说明
data-wow-duration	更改动画持续时间
data-wow-delay	动画开始前的延迟
data-wow-offset	开始动画的距离（与浏览器底部相关）
data-wow-iteration	动画的次数重复（无限次：infinite）

例如：

<div class="wow lightSpeedIn" data-wow-delay="1.5s"  data-wow-iteration："1"></div>

三、案例制作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.引入animate文件 --><link rel="stylesheet" href="css/animate.min.css"><style>* {padding: 0;margin: 0;}.con {background: #f5f3f4;display: flex;justify-content: center;flex-wrap: wrap;width: 800px;margin:auto;}.box {width: 150px;height: 150px;margin: 50px;box-shadow: 0 0 5px #ccc;border-radius: 50%;background: #457388;opacity: 0.8;}</style>
</head><body><div class="con"><div class="box wow fadeInUp" data-wow-duration='1s'></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div><div class="box wow fadeInUp" data-wow-duration='1s'></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div><div class="box wow fadeInUp" data-wow-duration='1s'></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div><div class="box wow fadeInUp" data-wow-duration='1s'></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div><div class="box wow fadeInUp" data-wow-duration='1s'></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div><div class="box wow fadeInUp" data-wow-duration='1s'></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div><div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div></div><script src="js/wow.min.js"></script><script>// 2.初始化// 如果不为ie6-9的浏览器，则进行一个初始化if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {new WOW().init();};</script>
</body></html>