WOW.js 是一個基於 animate.css 的動畫效果庫多達 60 多種的動畫效果，使用簡單。有的頁面在向下滾動的時候，有些元素會產生細小的動畫效果。
使用方法
引入文件
1 2 3 4 | <link rel="stylesheet" href="css/animate.min.css"> <script src="js/wow.min.js"></script> <div class="wow slideInLeft"></div> <div class="wow slideInRight"></div> |
可以加入 data-wow-duration（動畫持續時間）和 data-wow-delay（動畫延遲時間）屬性，如：
- <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
- <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
- <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
JavaScript設定
1 2 3 4 5 6 7 8 9 10 | wow = new WOW( { boxClass: 'wow', // default animateClass: 'animated', // default offset: 0, // default mobile: true, // default live: true // default } ) wow.init(); |
屬性說明
data-wow-duration：動畫的持續時間
data-wow-delay：動畫出現的延遲
data-wow-offset：動畫的偏移距離（相對於瀏覽器底部）
data-wow-iteration：動畫出現的重復次數，而值和 css 的部份一樣 animation-iteration-count: 值;， infinite 的值是無限重複
1 2 | <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"</section> <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section> |
配置屬性與方法
| 屬性/方法 | 類型 | 默認值 | 說明 |
| boxClass | 字符串 | ‘wow’ | 需要執行動畫的元素的 class |
| animateClass | 字符串 | ‘animated’ | animation.css 動畫的 class |
| offset | 整数 | 0 | 距離可視區域多少開始執行動畫 (定義的瀏覽器視窗的底部，並隱藏框的頂部之間的距離。當用戶滾動而達到這個距離，隱框顯露。) |
| mobile | 布爾值 | true | 是否在移動設備上執行動畫 |
| live | 布爾值 | true | 異步加載的內容是否有效 |