平常我們?cè)诰W(wǎng)站開發(fā)過程中，可能會(huì)需要做一些頁(yè)面滾動(dòng)到指定位置再執(zhí)行某些動(dòng)畫的頁(yè)面。所以特地收集了一個(gè)比較好用的輪子擒悬。
wow.js
image
一、引入
引入animate.css,因?yàn)閣ow依賴animate動(dòng)畫庫(kù)稻艰，所以需要的動(dòng)畫都可以從里面獲取懂牧。
引入wow.js
-
初始化
new WOW().init();
二、使用方法
在需要添加動(dòng)畫的塊元素上面（塊元素或者行內(nèi)塊元素连锯，行內(nèi)元素會(huì)有問題）添加類名归苍。
<div class="wow slideInLeft"
data-wow-duration="2s" （動(dòng)畫持續(xù)時(shí)間）
data-wow-delay="5s" （動(dòng)畫延遲時(shí)間）
data-wow-offset="10" （元素的位置露出后距離底部多少像素執(zhí)行）
data-wow-iteration="10"> （動(dòng)畫執(zhí)行次數(shù)，infinite為無限循環(huán)）
</div>
其中類名wow是每一個(gè)帶動(dòng)畫的元素都要加的运怖，slideInLeft就是說明動(dòng)畫樣式拼弃。
具體動(dòng)畫類名可訪問animate.css獲取或者wow官網(wǎng)獲取，這里不多做解釋摇展。
三吻氧、注
-
wow兼容ie10及以上，所以使用時(shí)需要加判斷咏连，ie10以下不初始化插件盯孙，即默認(rèn)展示
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) { new WOW().init(); }; 默認(rèn)wow只加載一次動(dòng)畫，即滾動(dòng)條再次往回滾動(dòng)時(shí)候祟滴，不會(huì)有動(dòng)畫振惰。但有時(shí)會(huì)有特定需求，是需要重復(fù)動(dòng)畫的垄懂。網(wǎng)上已有基于wow.js修改過的插件骑晶。
最后附上該插件下載地址：點(diǎn)我
