wow.js使用步驟:
1.wow.js插件可以使頁面形成各種各樣的動畫效果。
2.使用步驟:
?wow.js依賴于animate.css,首先需要在head內(nèi)引入animate.css
?再引入wow.js,然后js文件里再寫一行代碼如下:
<script src="js/wow.js"></script>
<script>
? ? ? ? ?wow = new WOW({
? ? ? ? ? ? ? ? ? ? ? ? ? ? animateClass: 'animated',
? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ?wow.init();
</script>
再在元素中添加相應(yīng)的類名 如:
<h1 class="wow animated slidelenLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"?data-wow-iteration="2">我愛前端</h1>
wow是必須要添加的
slideInLeft說明了動畫的樣式,是從左邊滑動出來的
后面的data-wow-duration(動畫持續(xù)時間)、data-wow-delay(動畫延遲時間)、data-wow-offset(元素的位置露出后距離底部多少像素執(zhí)行)和data-wow-iteration(動畫執(zhí)行次數(shù))這四個屬性可選可不選。