[TOC]
# 【wow.js框架】
## 《教学目标》
这个主题是介绍wow.js框架可以配合animate.css制作页面滚动动画，让学生了解具体的使用方法。
## 《涉及知识点》
### wow.js简介
wow.js是做网页滚动动画的js框架，配合animate.css使用，可以在网页滚动的过程中释放animate.css动画效果。
### 浏览器兼容
同animate.css
### github网址
[http://mynameismatthieu.com/WOW/index.html](http://mynameismatthieu.com/WOW/index.html)
源码下载地址：[https://github.com/matthieua/WOW](https://github.com/matthieua/WOW)
### 使用方法
1 引入animate.css文件和wow.js文件
2 html结构
在要做滚动动画的元素身上添加类名
wow(声明元素使用混动动画)
动画名称（滚动释放的动画名称）
举例：
~~~
<div class="left wow slideInLeft"></div>
~~~
3 js调用（调用前注意要先代码分离）
~~~
new WOW().init();
~~~
### 属性设置
data-wow-duration 动画持续时间，以秒/s为单位
data-wow-delay动画延时时间，以秒/s为单位
data-wow-iteration动画播放次数，值是纯数字，infinite表示循环播放
data-wow-offset 元素顶部偏离可视区（容器）底部动画出现的距离（用于设置动画在页面的出场位置）
### 带参数调用方法
~~~
var wow = new WOW({
boxClass: 'wow', //动画元素的CSS类 (默认类名 wow)
animateClass: 'animated', //动画CSS类 (默认类名 animated)
offset: 0, //距离可视区域多少开始执行动画(默认值 0)
mobile: true, //是否在移动设备上执行动画(默认值 true)
});
wow.init();
~~~
## 《讲师注意事项》
这里主要注意可以设置动画整体出现位置参数offset
## 《相关案例》
体验wow案例
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-wow初体验</title>
<link rel="stylesheet" href="css/animate.min.css">
<style>
.main{
width: 1100px;
margin: 50px auto;
overflow: hidden;
}
.main div{
width: 500px;
height: 100px;
background: pink;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<div class="main">
<div class="left wow bounceInLeft"></div>
<div class="right wow bounceInRight"></div>
</div>
<script src="js/wow.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
```
wow动画属性设置案例
data-wow-offset属性详解案例
设置调用参数案例
