https://github.com/matthieua/WOW 下載地址
當網頁的向下滾動的時候,有些元素會產生細小的動畫效果。然而直接用animate.css是不行的如果自己寫判斷位置和動畫結合的話也是可以但是動畫效果不是特理想需要多次調試,其次也是很麻煩的所以該插件幫我們 寫好了,我們只需要在瀏覽器滾動到該盒子位置爲他加上在animate.css我們需要的效果類名既可。
WOW.js 依賴 animate.css,所以它支持 animate.css 多達 60 多種的動畫效果,能滿足您的各種需求。
兼容性能:;wow.js 使用了 querySelectorAll 方法,IE 低版本會報錯。iE10+
缺點 動畫效果執行一次 滑到頂部再往下滑動就無效了 需要頁面刷新了
使用方法:
1.引入animate.css
2.在最底部引用wow.js 並且初始化
<script type="text/javascript">
new WOW().init();
</script>
3.html中使用在類中加 wow 和 animate.css動畫效果的類名即可
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"
data-wow-iteration="10">
</div>
data-wow-duration:更改動畫持續時間
data-wow-delay:動畫開始前的延遲
data-wow-offset:開始動畫的距離(與瀏覽器底部相關)
data-wow-iteration:動畫的次數重複(無限次:infinite)
配置
屬性/方法 | 類型 | 默認值 | 說明 |
---|---|---|---|
boxClass | 字符串 | ‘wow’ | ‘wow’需要執行動畫的元素的 class |
animateClass | 字符串 | ‘animated’ | ‘animated’animation.css 動畫的 class |
offset | 整數 | 0 | 距離可視區域多少開始執行動畫 |
mobile | 布爾值 | true | 是否在移動設備上執行動畫 |
live | 布爾值 | true | 異步加載的內容是否有效 |
自定義配置,可如下使用:
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();