滾動頁面產生動畫WOW.js的用法
阿新 • • 發佈：2018-11-17
簡介
在一些網頁上，當你滾動頁面的時候會看到各式各樣的元素動畫效果，非常動感。WOW.js 就是一款幫助你實現這種 CSS 動畫效果的外掛。WOW.js 依賴 animate.css，所以它支援 animate.css 多達 60 多種的動畫效果，基本上能應用於各種網頁的動畫效果。演示及下載
本地下載： 點選下載CDN加速地址：https://cdn.bootcss.com/wow/1.1.2/wow.js，如果加速地址失效，也可下載下面的演示示例
演示示例：WOW.js-元素在頁面滾動時展示CSS3動畫JS外掛
使用方法
1、引入檔案<link rel="stylesheet" href="css/animate.min.css"> <script type="text/javascript" src="wow.js"></script>
2、HTML
<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>
3、JavaScript
new WOW().init();
如果需要自定義配置，可如下使用：
var wow = new WOW({
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 | 非同步載入的內容是否有效 |