css3特效插件wow.js


在使用css3寫特效的時候,會遇到比較麻煩的就是css3代碼需要大量的調試,但是現在有了wow.js,讓寫特效變得簡單了很多。

wow.js官網

https://www.delac.io/wow/index.html

使用教程:

第一步:wow.js依賴於animate.css,首先需要在  head內引入animate.css或者animate.min.css。

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

第二步:引入wow.js或wow.min.js,然后js文件里面寫一行代碼。

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

第三步:然后在對應的塊狀元素,添加相應的class類名,就可以實現動畫。

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>
wow:是必須要添加的;
slideInLeft:說明了動畫的樣式,是從左邊滑動出來的;
data-wow-duration:動畫持續時間;
data-wow-delay:動畫延遲時間;
data-wow-offset:元素的位置露出后距離底部多少像素執行;
data-wow-iteration:動畫執行次數;
===這四個屬性可選可不選。

 

wow rollIn 從左到右、順時針滾動、透明度從100%變化至設定值
   
wow bounceIn 從原位置出現,由小變大超出設定值,再變小小於設定值,再回歸設定值、透明度從100%變化至設定值
wow bounceInUp 從下往上、竄上來以后會向上超出一部分然后彈回去、透明度為設定值不變
wow bounceInDown 從上往下、掉下來以后會向下超出一部分然后彈跳一下、透明度為設定值不變
wow bounceInLeft 從左往右、移過來以后會向右超出一部分然后往左彈一下、透明度為設定值不變
wow bounceInRight 從右往左、移過來以后會向左超出一部分然后往右彈一下、透明度為設定值不變
   
wow slideInUp 從下往上、上來后固定到設定位置、透明度為設定值不變(up是從下往上)(如果元素在最下面,會撐開盒子高度)
wow slideInDown 從上往下、上來后固定到設定位置、透明度為設定值不變
wow slideInLeft 從左往右、上來后固定到設定位置、透明度為設定值不變(left卻是從左往右)
wow slideInRight 從右往左、上來后固定到設定位置、透明度為設定值不變
   
wow lightSpeedIn 從右往左、頭部先向右傾斜,又向左傾斜,最后變為原來的形狀、透明度從100%變化至設定值
wow pulse 原位置放大一點點在縮小至原本大小、透明度為設定值不變(配合動畫執行次數屬性效果更佳)
wow flipInX 原位置后仰前栽、透明度從100%變化至設定值
wow flipInY 原位置左右旋動、透明度從100%變化至設定值
wow bounce 上下抖動、透明度為設定值不變(配合動畫執行次數和動畫持續時間屬性可以實現劇烈抖動亦或是慢慢抖)
wow shake 左右抖動、透明度為設定值不變(配合動畫執行次數和動畫持續時間屬性可以實現劇烈抖動亦或是慢慢抖)
wow swing 從右往左、頭部先向右傾斜,又向左傾斜,最后變為原來的形狀、透明度為設定值不變
wow bounceInU 原位置不變、直接從不顯示到顯示(無過過渡效果)
wow wobble 原位置不變、類似於一個人站在那左右晃頭、透明度為設定值不變


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM