wow.js+animate.css制作CSS3動畫
2022-11-25 加入收藏
wow.js演示地址
wow.js的github地址
使用方法真是超簡單~~
1、需要配合Animated.css使用，首先要引入animate.css動畫庫
1 | <link rel="stylesheet" href="css/animate.css" /> |
2、加載jquery和wow.js
1 | <script TYPE="text/javascript" src="js/wow.min.js"></script> |
3、啟動new WOW().init();
1 2 3 | <script type="text/javascript"> new WOW（）.init（）;</script> |
4、在html標(biāo)簽組合動畫，在需要用到這個效果的元素上面添加class="wow fadeInUp" 和 data-wow-delay=".1s"，下面的data-wow-duration是指動畫執(zhí)行時間。注意：wow必須加在動畫類名前面。
1 2 3 4 | <div class="wow bounce"> <p>完全契合0基礎(chǔ)的學(xué)員</p> <p>完全契合0基礎(chǔ)的學(xué)員</p> </div> |
動畫效果展示網(wǎng)站：https://daneden.github.io/animate.css/
5.高級選項(xiàng) 注：為了更好的控制動畫效果（屬性）
<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：更改動畫持續(xù)時間
data-wow-delay：動畫開始前的延遲
data-wow-offset：開始動畫的距離（與瀏覽器底部相關(guān)）
data-wow-iteration：動畫的次數(shù)重復(fù)（無限次：infinite）
上面的已經(jīng)可以實(shí)現(xiàn)動畫效果了，但是還有個問題，這些動畫會在加載頁面時一股腦觸發(fā)，我們往往想要的是滾動到這里才開始觸發(fā)。我們可以使用自定義配置。
boxClass：用戶滾動時顯示隱藏框的類名。
animateClass：觸發(fā)CSS動畫的類名（animate.css庫默認(rèn)為“animated”）
偏移量：定義瀏覽器視口底部和隱藏框頂部之間的距離。
當(dāng)用戶滾動并到達(dá)這個距離時，隱藏的框被顯示出來。
手機(jī)：在移動設(shè)備上打開/關(guān)閉WOW.js。
live：自動檢查頁面上的新WOW元素。
6、這時的JS代碼：
1 2 3 4 5 6 7 8 | var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }); wow.init(); |