滾動頁面産生動畫WOW.js的用法

簡介

在一些網頁上，當你滾動頁面的時候會看到各式各樣的元素動畫效果，非常動感。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	整數	距離可視區域多少開始執行動畫
mobile	布爾值	true	是否在移動裝置上執行動畫
live			異步加載的内容是否有效