網(wǎng)站頁面滾動時添加動畫效果CSS和WOW.JS

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

Animate動畫效果演示網(wǎng)址：http://www.t20worldcuplivestreaming.com/t/animate/

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

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

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

設(shè)置WOW.js

1、鏈接到CSS動畫庫

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

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

2、鏈接并激活WOW.js

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

顯示CSS動畫

1、使元素易于顯示

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

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

2、選擇動畫樣式

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

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

你完成了！

現(xiàn)在，當用戶滾動時，您的動畫將顯示出來。

高級選項

data-wow-duration：更改動畫的持續(xù)時間
data-wow-delay：動畫開始之前的延遲
data-wow-offset：啟動動畫的距離（與瀏覽器底部有關(guān)）
data-wow-iteration：動畫的次數(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：類名，在用戶滾動時顯示隱藏的框。

animateClass：觸發(fā)CSS動畫的類名稱（animate.css庫默認為“ animated”）

offset：定義瀏覽器視口底部與隱藏框頂部之間的距離。
當用戶滾動并到達此距離時，隱藏的框會顯示出來。

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

live：在頁面上同時檢查新的WOW元素。

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