WOW.js 依賴 animate.css，所以它支持 animate.css 多達(dá) 60 多種的動(dòng)畫效果，能滿足您的各種需求。

但是大家都直接wow.js不能像RevealScroll一樣，當(dāng)網(wǎng)頁(yè)上下滾動(dòng)頁(yè)面的時(shí)候都有效果，wow.js只能實(shí)現(xiàn)一次，怎么樣讓wow.js也能上下滾動(dòng)的時(shí)候有效果呢，經(jīng)青島網(wǎng)絡(luò)公司修改了核心代碼后已經(jīng)實(shí)現(xiàn)效果。下面給出下載地址，提供給大家直接使用！

下載地址：/static/upload/js/wow.min2.js

【用法】

在做項(xiàng)目中，有時(shí)需要做到滾動(dòng)條滑到某個(gè)位置時(shí)，才能顯示動(dòng)畫，wow.js插件可以很好的解決問(wèn)題

下面說(shuō)明一下怎么使用這個(gè)插件：

1、wow.js依賴于animate.css，首先在頭部引用animate.css或者animate.min.css

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">  

2.在最底部引用wow.js或者wow.min.js，然后再下面再寫一行javascript代碼（無(wú)需引用jQuery）

<script type="text/javascript" src="/static/upload/js/wow.min2.js"></script>   實(shí)現(xiàn)上下滾動(dòng)頁(yè)面都有效果

<script type="text/javascript" src="https://cdn.dowebok.com/131/js/wow.min.js"></script> 實(shí)現(xiàn)向下滾動(dòng)頁(yè)面都有效果

<script type="text/javascript">  
    new WOW().init();
</script>  


如果需要自定義配置，可如下使用：

類名前面的wow是每一個(gè)帶動(dòng)畫的元素都要加的，slideInLeft就是說(shuō)明動(dòng)畫樣式。

后面的data-wow-duration（動(dòng)畫持續(xù)時(shí)間）、data-wow-delay（動(dòng)畫延遲時(shí)間）、data-wow-offset（元素的位置露出后距離底部多少像素執(zhí)行）和data-wow-iteration（動(dòng)畫執(zhí)行次數(shù)）這四個(gè)屬性可選可不選

注意：其中data-wow-offset="數(shù)值"中的數(shù)值是動(dòng)畫完成后元素距離顯示器底部的位置，而不是距離瀏覽器窗口底部的位置。

掃描二維碼手機(jī)查看該文章