wow.min.js
下載地址：http://www.bootcdn.cn/wow/
今天發現一個非常有趣的js，wow.min.js，Wow.js 允許使用者滾動頁面的時候展示 CSS 動畫。預設的，使用者可以使用它來出發 animate.css 動畫。但是使用者也可以非常容易修改設定喜歡的動畫庫。Wow.js 比其他 JavaScript 視差外掛小，類似 Scrollorama（這個非常華麗，但是也更繁雜）。wow.min.js 非常容易安裝和使用。如果你使用 Wow.js，你可以非常快的啟動，執行程式碼。
WOW.js 需要 animate.css 配合，所以它支援 animate.css 多達 60 多種的動畫效果，能滿足您的各種需求。wow.min.js可以實現在滾動下的動畫狀態。
例項如下點選檢視>>
使用方法：
1、加入animate.css
<linkhref="http://www.bbsxiaomi.com/case/css/animate.min.css"rel="stylesheet">
2、加入wow.js。（無需引用jQuery）
<scriptsrc="http://www.bbsxiaomi.com/js/wow.min.js"></script>
注意new WOW().init();中的WOW要大寫，否則就沒效果了。
3、元素中加入class
<divclass="wowanimatedtada">tada</
div>
66種CSS3animation動畫效果，← 點選檢視選擇想要的效果，並加入animate.css的class，如：tada，animate效果在下面連結檢視
4、可以加入 data-wow-duration（動畫持續時間）和 data-wow-delay（動畫延遲時間）屬性，如.（在css下方js上方寫需要動畫的元素（必須設定為塊狀或者行內塊狀！必須設定為塊狀或者行內塊狀！必須設定為塊狀或者行內塊狀！），並新增class類名。)
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
類名前面的wow是每一個帶動畫的元素都要加的，slideInLeft就是說明動畫樣式。後面的data-wow-duration（動畫持續時間）、data-wow-delay（動畫延遲時間）、data-wow-offset（元素的位置露出後距離底部多少畫素執行）和data-wow-iteration（動畫執行次數）這四個屬性可選可不選。
4、為了寫文章專門測試了一下data-wow-offset和data-wow-iteration這兩個屬性，其中data-wow-offset="數值"中的數值是動畫完成後元素距離顯示器底部的位置，而不是距離瀏覽器視窗底部的位置。
5、wow.js 使用了 querySelectorAll 方法，IE 低版本會報錯。為了達到更好的相容，最好加一個瀏覽器及版本判斷。
<scriptsrc="http://www.bbsxiaomi.com/js/wow.min.js"></script>
<script>
if(!(/msie[6|7|8|9]/i.test(navigator.userAgent))){
newWOW().init();
};
</script>
6、也可以自定義wow.js
<scriptsrc="http://www.bbsxiaomi.com/js/wow.min.js"></script>
varwow=newWOW({
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 | 非同步載入的內容是否有效 |
增加順序動畫
在標籤上增加
data-wow-delay="0.3s"
如：
| wow rollIn | 從左到右、順時針滾動、透明度從100%變化至設定值 |
| wow bounceIn | 從原位置出現，由小變大超出設定值，再變小小於設定值，再回歸設定值、透明度從100%變化至設定值 |
| wow bounceInUp | 從下往上、竄上來以後會向上超出一部分然後彈回去、透明度為設定值不變 |
| wow bounceInDown | 從上往下、掉下來以後會向下超出一部分然後彈跳一下、透明度為設定值不變 |
| wow bounceInLeft | 從左往右、移過來以後會向右超出一部分然後往左彈一下、透明度為設定值不變 |
| wow bounceInRight | 從右往左、移過來以後會向左超出一部分然後往右彈一下、透明度為設定值不變 |
| wow slideInUp | 從下往上、上來後固定到設定位置、透明度為設定值不變（up是從下往上）（如果元素在最下面，會撐開盒子高度） |
| wow slideInDown | 從上往下、上來後固定到設定位置、透明度為設定值不變 |
| wow slideInLeft | 從左往右、上來後固定到設定位置、透明度為設定值不變（left卻是從左往右） |
| wow slideInRight | 從右往左、上來後固定到設定位置、透明度為設定值不變 |
| wow lightSpeedIn | 從右往左、頭部先向右傾斜，又向左傾斜，最後變為原來的形狀、透明度從100%變化至設定值 |
| wow pulse | 原位置放大一點點在縮小至原本大小、透明度為設定值不變（配合動畫執行次數屬性效果更佳） |
| wow flipInX | 原位置後仰前栽、透明度從100%變化至設定值 |
| wow flipInY | 原位置左右旋動、透明度從100%變化至設定值 |
| wow bounce | 上下抖動、透明度為設定值不變（配合動畫執行次數和動畫持續時間屬性可以實現劇烈抖動亦或是慢慢抖） |
| wow shake | 左右抖動、透明度為設定值不變（配合動畫執行次數和動畫持續時間屬性可以實現劇烈抖動亦或是慢慢抖） |
| wow swing | 從右往左、頭部先向右傾斜，又向左傾斜，最後變為原來的形狀、透明度為設定值不變 |
| wow bounceInU | 原位置不變、直接從不顯示到顯示（無過過渡效果） |
| wow wobble | 原位置不變、類似於一個人站在那左右晃頭、透明度為設定值不變 |
開啟引用的animate.css或者animate.min.css，裡面@keyframes定義了各種動畫，將wow後面的類名替換一下測試效果就可以了。
配合data-wow-duration（動畫持續時間）、data-wow-delay（動畫延遲時間）、data-wow-offset（元素的位置露出後距離底部多少畫素執行）和data-wow-iteration（動畫執行次數）這四個屬性可以完成很多效果，主要還是多實踐。
IE6、IE7 等老舊瀏覽器不支援 CSS3 動畫，所以沒有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本會報錯。為了達到更好的相容，最好加一個瀏覽器及版本判斷。
<scriptsrc="http://www.bbsxiaomi.com/js/wow.min.js"></script>