網(wǎng)站頁(yè)面滾動(dòng)時(shí)添加動(dòng)畫效果CSS和WOW.JS

通過(guò) WOW.js ，可以在向下滾動(dòng)的過(guò)程中逐漸釋放這些動(dòng)畫效果。

Animate動(dòng)畫效果演示網(wǎng)址：http://m.saojisinei.com/t/animate/

下載WOW.js+Animate.css【本站下載】

默認(rèn)情況下，當(dāng)你向下滾動(dòng)頁(yè)面時(shí)，可以逐漸展示出 CSS 動(dòng)畫。它一般使用 animate.css 的動(dòng)畫效果。但是，您可以輕松設(shè)置成您喜歡的動(dòng)畫庫(kù)。

優(yōu)點(diǎn)：比其他 JavaScript 視覺(jué)插件更輕量級(jí)，像 Scrollorama (這個(gè)太重了，其實(shí)我們的需求都是非常簡(jiǎn)單的)超簡(jiǎn)單的安裝，與animate.css配合，只需幾行代碼即可。

設(shè)置WOW.js

1、鏈接到CSS動(dòng)畫庫(kù)

鏈接到 Animate.css（可以通過(guò)更改WOW.js設(shè)置鏈接到另一個(gè)CSS動(dòng)畫庫(kù)）

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

2、鏈接并激活WOW.js

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

顯示CSS動(dòng)畫

1、使元素易于顯示

將CSS類.wow添加到HTML元素：在用戶滾動(dòng)顯示它之前，它將不可見(jiàn)。
（您可以在WOW設(shè)置中更改此CSS類，以避免名稱沖突。）

<div class="wow">
Content to Reveal Here
</div>

2、選擇動(dòng)畫樣式

在Animate.css中選擇一種動(dòng)畫樣式 ，然后將CSS類添加到HTML元素中

<div class="wow bounceInUp">
Content to Reveal Here
</div>

你完成了！

現(xiàn)在，當(dāng)用戶滾動(dòng)時(shí)，您的動(dòng)畫將顯示出來(lái)。

高級(jí)選項(xiàng)

data-wow-duration：更改動(dòng)畫的持續(xù)時(shí)間
data-wow-delay：動(dòng)畫開(kāi)始之前的延遲
data-wow-offset：?jiǎn)?dòng)動(dòng)畫的距離（與瀏覽器底部有關(guān)）
data-wow-iteration：動(dòng)畫的次數(shù)重復(fù)

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
</section>

自定義設(shè)置

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

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

offset：定義瀏覽器視口底部與隱藏框頂部之間的距離。
當(dāng)用戶滾動(dòng)并到達(dá)此距離時(shí)，隱藏的框會(huì)顯示出來(lái)。

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

live：在頁(yè)面上同時(shí)檢查新的WOW元素。

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