本節(jié)目錄
- WOW.js簡(jiǎn)介
- WOW.js基礎(chǔ)用法
【簡(jiǎn)介】
WOW.js的出現(xiàn)，讓Animate.css有更多可玩性。
Animate.css的用法可以看：【Animate.css】CSS動(dòng)畫庫(kù)
WOW.js 是輕量級(jí)類庫(kù)，只依賴Animate.css出爹。不依賴其他js庫(kù)祷膳。
WOW.js的主要功能是實(shí)現(xiàn)頁(yè)面向下滾動(dòng)的過(guò)程中，逐漸釋放CSS動(dòng)畫效果诵竭。
也就是說(shuō)，當(dāng)我們向下滾動(dòng)頁(yè)面時(shí)兼搏，可以省去很多判斷條件卵慰，讓CSS動(dòng)畫逐漸展示出來(lái)。
只需短短幾行代碼佛呻，就能實(shí)現(xiàn)很多特效裳朋。
當(dāng)然，也可以個(gè)性化定制喜歡的風(fēng)格件相，比如延遲再扭、動(dòng)畫執(zhí)行時(shí)長(zhǎng)、偏移夜矗、重復(fù)執(zhí)行次數(shù)等泛范。
下面就是WOW.js的官網(wǎng)
WOW.js
官網(wǎng)很逗比，可以進(jìn)入官網(wǎng)看看動(dòng)畫效果紊撕。
兼容性方面罢荡，和Animate.css是一樣的。兼容IE10+和各大新版瀏覽器。
【用法】
1区赵、首先要引入 Animate.css 和 WOW.js
<link rel="stylesheet" href="../animate.css">
<script src="wow.js"></script>
Animate.css在官網(wǎng)有惭缰，可以看【Animate.css】CSS動(dòng)畫庫(kù)
WOW.js下載地址：https://github.com/matthieua/WOW
當(dāng)然也支持 Bower 和 npm 這兩種方式 下載。
2笼才、實(shí)例化構(gòu)造函數(shù)漱受，調(diào)用基礎(chǔ)方法。
<script>
new WOW().init();
</script>
說(shuō)法是很牛的骡送，但其實(shí)就是在js里面寫上一句話 new WOW().init();
3昂羡、寫html結(jié)構(gòu)
<div class="box">
<div class="wow slideInLeft"></div>
<div class="wow bounceIn"></div>
<div class="wow slideInRight"></div>
</div>
可以看到有一個(gè)大的 box 盒子，里面放著3個(gè)子div摔踱。
每個(gè)子div都有一個(gè)wow類虐先，wow類就相當(dāng)于Animate.css里的animated這個(gè)基礎(chǔ)類。
wow類是一定要的派敷，因?yàn)樗且粋€(gè)基礎(chǔ)類蛹批，如果不寫上，后面一切都是徒勞篮愉。
wow類后面跟著的是動(dòng)作類名腐芍，可以在Animate.css里面找。
4试躏、最后我給這些div寫一點(diǎn)樣式甸赃，讓它們能在頁(yè)面中展示出來(lái)。
.box {
width: 900px;
margin: 100px auto;
display: flex;
}
.box div {
width: 300px;
height: 300px;
border-radius: 50%;
}
.box div:nth-child(1) {
background-color: #9C89B8;
}
.box div:nth-child(2) {
background-color: #F0A6CA;
}
.box div:nth-child(3) {
background: #B8BEDD;
}
就是這個(gè)效果
- sildeInLeft：從左邊劃入
- sildeInRight：從右邊劃入
- bounceIn：彈跳進(jìn)入
以上就是基本用法冗酿。
上面的基礎(chǔ)用法，看上去好像和Animate.css沒(méi)什么區(qū)別络断。但如果我的頁(yè)面是比較長(zhǎng)的裁替，而每個(gè)部分都有相應(yīng)的動(dòng)畫，這時(shí)區(qū)別就出來(lái)了貌笨。
比如我的結(jié)構(gòu)是這樣的弱判，下面還有很多個(gè)這種結(jié)構(gòu)，只要頁(yè)面向下滾動(dòng)锥惋，對(duì)應(yīng)元素在瀏覽器窗口中顯示出來(lái)昌腰，就立即執(zhí)行動(dòng)畫。
來(lái)點(diǎn)高級(jí)點(diǎn)的玩法膀跌。
在html元素上遭商，還可以加上以下4個(gè)屬性
- data-wow-delay：動(dòng)畫延遲執(zhí)行
- data-wow-duration：動(dòng)畫執(zhí)行時(shí)長(zhǎng)
- data-wow-iteration：動(dòng)畫重復(fù)執(zhí)行次數(shù)
- data-wow-offset：元素的位置露出后距離瀏覽器底部多少像素執(zhí)行（偏移量）
data-wow-delay 動(dòng)畫延遲執(zhí)行
<div class="box">
<div class="wow slideInLeft" data-wow-delay="500ms"></div>
<div class="wow bounceIn"></div>
<div class="wow slideInRight"></div>
</div>
data-wow-delay 可以傳毫毛（ms），也可以傳秒（s）捅伤。
data-wow-duration 動(dòng)畫執(zhí)行時(shí)長(zhǎng)
<div class="box">
<div class="wow slideInLeft" data-wow-duration="300ms"></div>
<div class="wow bounceIn"></div>
<div class="wow slideInRight"></div>
</div>
data-wow-duration 也是可以傳毫秒（ms）劫流，也可以傳秒（s）。
data-wow-iteration 動(dòng)畫重復(fù)執(zhí)行次數(shù)
<div class="box">
<div class="wow slideInLeft" data-wow-iteration="2"></div>
<div class="wow bounceIn"></div>
<div class="wow slideInRight"></div>
</div>
因?yàn)樽筮叺膁iv設(shè)置了data-wow-iteration=“2”，所以它的動(dòng)畫執(zhí)行了2次祠汇。
data-wow-offset
元素的位置露出后距離瀏覽器底部多少像素執(zhí)行（偏移量）
這個(gè)參數(shù)主要是滾動(dòng)的時(shí)候用來(lái)控制動(dòng)畫時(shí)機(jī)仍秤。
比如
<div class="box">
<div class="wow slideInLeft"></div>
<div class="wow bounceIn" data-wow-offset="800"></div>
<div class="wow slideInRight"></div>
</div>
效果我就不展示了，可以在自己的編輯器上面寫寫看可很。
