有時(shí)候項(xiàng)目需要一些動(dòng)畫(huà)來(lái)提升用戶體驗(yàn)，吸引用戶注意力。這時(shí)wow是個(gè)不錯(cuò)的選擇

wow.js依賴animate.css，不需要jquery；animate.css是純css動(dòng)畫(huà)

官網(wǎng)：http://mynameismatthieu.com/WOW/

建議去官網(wǎng)一看

bootstrap CDN服務(wù)：http://www.bootcdn.cn/wow/

當(dāng)您滾動(dòng)時(shí)顯示動(dòng)畫(huà)。非常Animate.css朋友:-)

輕松自定義動(dòng)畫(huà)設(shè)置：樣式，延遲，長(zhǎng)度，偏移量，迭代...

下載地址：https://github.com/matthieua/WOW

使用步驟：

1、引入animate.css

<link rel="stylesheet" href="css/animate.css" />

2、引入wow.js

<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>

3、啟動(dòng)new WOW().init();

<script type="text/javascript">
  new WOW（）.init（）;
</script>

4、在需要?jiǎng)赢?huà)的標(biāo)簽上面添加class      注：wow必須加在動(dòng)畫(huà)類名前面

<div class="wow bounce">
  <p>完全契合0基礎(chǔ)的學(xué)員</p>
  <p>完全契合0基礎(chǔ)的學(xué)員</p>
</div>

*動(dòng)畫(huà)效果展示網(wǎng)站：https://daneden.github.io/animate.css/

5.高級(jí)選項(xiàng)   注：為了更好的控制動(dòng)畫(huà)效果（屬性）

<div class="wow bounce "  data-wow-delay="1.5s"  data-wow-iteration："1">
  <p>完全契合0基礎(chǔ)的學(xué)員</p>
  <p>完全契合0基礎(chǔ)的學(xué)員</p>
</div>

data-wow-duration：更改動(dòng)畫(huà)持續(xù)時(shí)間

data-wow-delay：動(dòng)畫(huà)開(kāi)始前的延遲

data-wow-offset：開(kāi)始動(dòng)畫(huà)的距離（與瀏覽器底部相關(guān)）

data-wow-iteration：動(dòng)畫(huà)的次數(shù)重復(fù)（無(wú)限次：infinite）

上面的已經(jīng)可以實(shí)現(xiàn)動(dòng)畫(huà)效果了，但是還有個(gè)問(wèn)題，這些動(dòng)畫(huà)會(huì)在加載頁(yè)面時(shí)一股腦觸發(fā)，我們往往想要的是滾動(dòng)到這里才開(kāi)始觸發(fā)。

我們可以使用自定義配置。

boxClass：用戶滾動(dòng)時(shí)顯示隱藏框的類名。

aninateClass：觸發(fā)CSS動(dòng)畫(huà)的類名（animate.css庫(kù)默認(rèn)為“animated”）

偏移量：定義瀏覽器視口底部和隱藏框頂部之間的距離。

當(dāng)用戶滾動(dòng)并到達(dá)這個(gè)距離時(shí)，隱藏的框被顯示出來(lái)。

手機(jī)：在移動(dòng)設(shè)備上打開(kāi)/關(guān)閉WOW.js。

live：自動(dòng)檢查頁(yè)面上的新WOW元素。

這時(shí)的JS代碼：

var wow = new WOW({
 boxClass: 'wow',
 animateClass: 'animated',
 offset: 0,
 mobile: true,
 live: true
});
wow.init();

配置如圖：

有的網(wǎng)站采用全屏滾動(dòng)的fullpage插件與wow相結(jié)合的方法，實(shí)現(xiàn)的效果比較酷炫。我們完全可以仿寫(xiě)。

但是使用fullpage.js下wow.js無(wú)效失效沒(méi)動(dòng)作

問(wèn)題出在fullpage隱藏了滾動(dòng)條,將滾動(dòng)條開(kāi)啟即可,把scrollBar設(shè)置為true,代碼如下

$('#fullpage').fullpage({
  scrollBar:true；
});

最后利用css將滾動(dòng)條隱藏,將html添加overflowhidden，代碼如下

html{overflow:hidden;}