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	原位置不變、相似於一我的站在那左右晃頭、透明度爲設定值不變