WOW.js插件在H5頁面開發(fā)時很常用
會在頁面剛剛打開時產(chǎn)生動畫特效，很酷炫噢！
官網(wǎng)：http://mynameismatthieu.com/WOW/
下載地址：https://github.com/matthieua/WOW
使用步驟：
1、wow.js依賴于animate.css，首先在頭部引用animate.css或者animate.min.css。在最底部引用wow.js或者wow.min.js。（無需JQ）
2.在所設(shè)置的元素的class中添加一個“wow”和一個wow.js中的類名（在class中是可以設(shè)置多個類的）。
3.所設(shè)置的元素必須是必須設(shè)置為塊狀或者行內(nèi)塊狀。
4.然后在js中加入代碼
wow = new WOW({
boxClass: 'wow', // default 盒子類名
animateClass: 'animated', // default 為animate.css觸發(fā)css動畫的庫
offset: 0, // default 偏移量
mobile: true, // default 是否支持手機
live: true // default 檢查新元素
})
new WOW().init();
即可使用。
還可以在元素中加入如下屬性，產(chǎn)生特別的效果，可選可不選：
<div class="wow bounce "? data-wow-delay="1.5s"? data-wow-iteration："1"></div>
data-wow-duration：更改動畫持續(xù)時間
data-wow-delay：動畫開始前的延遲
data-wow-offset：開始動畫的距離（與瀏覽器底部相關(guān)）
data-wow-iteration：動畫的次數(shù)重復(fù)（無限次：infinite）
wow.js定義的類：
wow rollIn從左到右、順時針滾動、透明度從100%變化至設(shè)定值
wow bounceIn從原位置出現(xiàn)，由小變大超出設(shè)定值，再變小小于設(shè)定值，再回歸設(shè)定值、透明度從100%變化至設(shè)定值
wow bounceInUp從下往上、竄上來以后會向上超出一部分然后彈回去、透明度為設(shè)定值不變
wow bounceInDown從上往下、掉下來以后會向下超出一部分然后彈跳一下、透明度為設(shè)定值不變
wow bounceInLeft從左往右、移過來以后會向右超出一部分然后往左彈一下、透明度為設(shè)定值不變
wow bounceInRight從右往左、移過來以后會向左超出一部分然后往右彈一下、透明度為設(shè)定值不變
wow slideInUp從下往上、上來后固定到設(shè)定位置、透明度為設(shè)定值不變（up是從下往上）（如果元素在最下面，會撐開盒子高度）
wow slideInDown從上往下、上來后固定到設(shè)定位置、透明度為設(shè)定值不變
wow slideInLeft從左往右、上來后固定到設(shè)定位置、透明度為設(shè)定值不變（left卻是從左往右）
wow slideInRight從右往左、上來后固定到設(shè)定位置、透明度為設(shè)定值不變
wow lightSpeedIn從右往左、頭部先向右傾斜，又向左傾斜，最后變?yōu)樵瓉淼男螤睢⑼该鞫葟?00%變化至設(shè)定值
wow pulse原位置放大一點點在縮小至原本大小、透明度為設(shè)定值不變（配合動畫執(zhí)行次數(shù)屬性效果更佳）
wow flipInX原位置后仰前栽、透明度從100%變化至設(shè)定值
wow flipInY原位置左右旋動、透明度從100%變化至設(shè)定值
wow bounce上下抖動、透明度為設(shè)定值不變（配合動畫執(zhí)行次數(shù)和動畫持續(xù)時間屬性可以實現(xiàn)劇烈抖動亦或是慢慢抖）
wow shake左右抖動、透明度為設(shè)定值不變（配合動畫執(zhí)行次數(shù)和動畫持續(xù)時間屬性可以實現(xiàn)劇烈抖動亦或是慢慢抖）
wow swing從右往左、頭部先向右傾斜，又向左傾斜，最后變?yōu)樵瓉淼男螤睢⑼该鞫葹樵O(shè)定值不變
wow bounceInU原位置不變、直接從不顯示到顯示（無過過渡效果）
wow wobble原位置不變、類似于一個人站在那左右晃頭、透明度為設(shè)定值不變
例子：
<!DOCTYPE html>
<html>
<head>
<title>wowTest</title>
<script type="text/javascript" src="wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css"></style>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.warp{
height: 600px;
width: 600px;
background: pink;
}
.box{
height: 200px;
width: 200px;
background: blue;
}
</style>
<body>
<div class="warp">
<div class="box wow slideInUp">uuuuuuuuuu</div>
</div>
<script type="text/javascript">
wow = new WOW({
boxClass: 'wow', // default 盒子類名
animateClass: 'animated', // default 為animate.css觸發(fā)css動畫的庫
offset: 0, // default 偏移量
mobile: true, // default 是否支持手機
live: true // default 檢查新元素
})
new WOW().init();
</script>
</body>
</html>
