WOW.js – 在頁面滾動時展現動感的元素動畫效果(精)
阿新 • • 發佈:2019-02-02
簡介
有的頁面在向下滾動的時候,有些元素會產生細小的動畫效果。雖然動畫比較小,但卻能吸引你的注意。比如剛剛釋出的 iPhone 6 的頁面(檢視)。如果你希望你的頁面也更加有趣,那麼你可以試試 WOW.js。
檢視原文
**WOW
.js** 依賴 animate.css,所以它支援 animate.css 多達 60 多種的動畫效果,能滿足您的各種需求。
瀏覽器相容
使用方法
1、引入檔案
<link rel="stylesheet" href="css/animate.min.css">
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();
配置