wow.js中對應各種特效的類別名稱詳解

wow.js中各種特效對應的類別名稱

一、（頁面在向下滾動的時候，有些元素會產生細小的動畫效果。雖然動畫比較小，但卻能吸引你的注意。

　　雖然效果出來了，但是網路上並沒有整理好的各種特效對應的類名，所以寫一篇通俗易懂（最起碼自己能看懂）的文章供大家參考學習。 （^_^）

二、先說明一下怎麼使用這個外掛：

　　1、wow.js依賴animate.css，首先在頭部引用animate.css或animate.min .css。

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

　　2、在最底部引用wow.js或wow.min.js，然後再寫一行javascript程式碼。 （無需引用jQuery）

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

　　

注意new WOW().init();中的WOW要大寫，否則就沒效果了。

2、在最底部引用wow.js或wow.min.js，然後再下面再寫一行javascript程式碼。 （無需引用jQuery）
　　3、在css下方js上方寫需要動畫的元素（必須設定為塊狀或行內塊狀！必須設定為塊狀或行內塊狀！必須設定為塊狀或行內塊狀！

<p></p>

類別名稱前面的wow是每個帶有動畫的元素都要加的，slideInLeft就是說明動畫樣式。後面的

data-wow-duration（動畫持續時間）、

data-wow-delay（動畫延遲時間）、

data-wow-offset（元素的位置露出後距離底部多少像素執行）

data-wow-iteration（動畫執行次數）

這四個屬性可選可不選。

　　4、為了寫文章專門測試了一下data-wow-offset和data-wow-iteration這兩個屬性，其中data-wow-offset="數值"中的數值是動畫完成後元素距離顯示器底部的位置，而不是瀏覽器視窗底部的位置。

三、步入正題，以下依序測試各種class類別名稱的動畫效果。 （力求簡單易懂）

##從右往左、上來後固定到設定位置、透明度為設定值不變

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	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

　　　测试了这么多终于摸到窍门了，打开引用的animate.css或者animate.min.css，里面@keyframes定义了各种动画，将wow后面的类名替换一下测试效果就可以了。

****************************************************************
            https://daneden.github.io/animate.css/          也可以在这个地方看各种演示
****************************************************************

四、配合data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可以完成很多效果，主要还是多实践。

五、IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

以上是wow.js中對應各種特效的類別名稱詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！