[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屬性詳解案例
設置調用參數案例
