通過(guò) WOW.js ,可以在向下滾動(dòng)的過(guò)程中逐漸釋放這些動(dòng)畫(huà)效果。
Animate動(dòng)畫(huà)效果演示網(wǎng)址:http://m.yjj17.com/t/animate/
下載WOW.js+Animate.css【本站下載】
默認(rèn)情況下,當(dāng)你向下滾動(dòng)頁(yè)面時(shí),可以逐漸展示出 CSS 動(dòng)畫(huà)。它一般使用 animate.css 的動(dòng)畫(huà)效果。但是,您可以輕松設(shè)置成您喜歡的動(dòng)畫(huà)庫(kù)。
優(yōu)點(diǎn):比其他 JavaScript 視覺(jué)插件更輕量級(jí),像 Scrollorama (這個(gè)太重了,其實(shí)我們的需求都是非常簡(jiǎn)單的)超簡(jiǎn)單的安裝,與animate.css配合,只需幾行代碼即可。
1、鏈接到CSS動(dòng)畫(huà)庫(kù)
鏈接到 Animate.css(可以通過(guò)更改WOW.js設(shè)置鏈接到另一個(gè)CSS動(dòng)畫(huà)庫(kù))
<link rel="stylesheet" href="css/animate.css">
2、鏈接并激活WOW.js
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
1、使元素易于顯示
將CSS類(lèi).wow添加到HTML元素:在用戶(hù)滾動(dòng)顯示它之前,它將不可見(jiàn)。
(您可以在WOW設(shè)置中更改此CSS類(lèi),以避免名稱(chēng)沖突。)
<div class="wow"> Content to Reveal Here </div>
2、選擇動(dòng)畫(huà)樣式
在Animate.css中選擇一種動(dòng)畫(huà)樣式 ,然后將CSS類(lèi)添加到HTML元素中
<div class="wow bounceInUp"> Content to Reveal Here </div>
現(xiàn)在,當(dāng)用戶(hù)滾動(dòng)時(shí),您的動(dòng)畫(huà)將顯示出來(lái)。
data-wow-duration:更改動(dòng)畫(huà)的持續(xù)時(shí)間
data-wow-delay:動(dòng)畫(huà)開(kāi)始之前的延遲
data-wow-offset:?jiǎn)?dòng)動(dòng)畫(huà)的距離(與瀏覽器底部有關(guān))
data-wow-iteration:動(dòng)畫(huà)的次數(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>
boxClass:類(lèi)名,在用戶(hù)滾動(dòng)時(shí)顯示隱藏的框。
animateClass:觸發(fā)CSS動(dòng)畫(huà)的類(lèi)名稱(chēng)(animate.css庫(kù)默認(rèn)為“ animated”)
offset:定義瀏覽器視口底部與隱藏框頂部之間的距離。
當(dāng)用戶(hù)滾動(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();