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