詳解wow.js中各種特效對(duì)應(yīng)的類(lèi)名

更新時(shí)間：2017年09月13日 16:59:38 作者：楊俊飛

本篇文章主要介紹了wow.js中各種特效對(duì)應(yīng)的類(lèi)名，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、（頁(yè)面在向下滾動(dòng)的時(shí)候，有些元素會(huì)產(chǎn)生細(xì)小的動(dòng)畫(huà)效果。雖然動(dòng)畫(huà)比較小，但卻能吸引你的注意。）

剛知道wow.js這個(gè)插件，之前訪問(wèn)別的網(wǎng)站下拉滾動(dòng)條會(huì)出現(xiàn)各種效果感覺(jué)特別神奇，現(xiàn)在自己依葫蘆畫(huà)瓢也能弄出來(lái)這種效果了。

雖然效果出來(lái)了，但是網(wǎng)上并沒(méi)有整理好的各種特效對(duì)應(yīng)的類(lèi)名，所以寫(xiě)一篇通俗易懂（最起碼自己能看懂）的文章供大家參考學(xué)習(xí)。（^_^）

二、首先說(shuō)明一下怎么使用這個(gè)插件：

1、wow.js依賴(lài)于animate.css，首先在頭部引用animate.css或者animate.min.css。

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

2、在最底部引用wow.js或者wow.min.js，然后再下面再寫(xiě)一行javascript代碼。（無(wú)需引用jQuery）

<script type="text/javascript" src="js/wow.min.js"></script>

<script type="text/javascript">

 new WOW().init();

</script>

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

3、在css下方j(luò)s上方寫(xiě)需要?jiǎng)赢?huà)的元素（必須設(shè)置為塊狀或者行內(nèi)塊狀！必須設(shè)置為塊狀或者行內(nèi)塊狀！必須設(shè)置為塊狀或者行內(nèi)塊狀！），并添加class類(lèi)名。

復(fù)制代碼代碼如下:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

類(lèi)名前面的wow是每一個(gè)帶動(dòng)畫(huà)的元素都要加的，slideInLeft就是說(shuō)明動(dòng)畫(huà)樣式。后面的data-wow-duration（動(dòng)畫(huà)持續(xù)時(shí)間）、data-wow-delay（動(dòng)畫(huà)延遲時(shí)間）、data-wow-offset（元素的位置露出后距離底部多少像素執(zhí)行）和data-wow-iteration（動(dòng)畫(huà)執(zhí)行次數(shù)）這四個(gè)屬性可選可不選。

4、為了寫(xiě)文章專(zhuān)門(mén)測(cè)試了一下data-wow-offset和data-wow-iteration這兩個(gè)屬性，其中data-wow-offset="數(shù)值"中的數(shù)值是動(dòng)畫(huà)完成后元素距離顯示器底部的位置，而不是距離瀏覽器窗口底部的位置。

三、步入正題，下面依次測(cè)試各種class類(lèi)名的動(dòng)畫(huà)效果。（力求通俗易懂）

wow rollIn	從左到右、順時(shí)針滾動(dòng)、透明度從100%變化至設(shè)定值

wow bounceIn	從原位置出現(xiàn)，由小變大超出設(shè)定值，再變小小于設(shè)定值，再回歸設(shè)定值、透明度從100%變化至設(shè)定值
wow bounceInUp	從下往上、竄上來(lái)以后會(huì)向上超出一部分然后彈回去、透明度為設(shè)定值不變
wow bounceInDown	從上往下、掉下來(lái)以后會(huì)向下超出一部分然后彈跳一下、透明度為設(shè)定值不變
wow bounceInLeft	從左往右、移過(guò)來(lái)以后會(huì)向右超出一部分然后往左彈一下、透明度為設(shè)定值不變
wow bounceInRight	從右往左、移過(guò)來(lái)以后會(huì)向左超出一部分然后往右彈一下、透明度為設(shè)定值不變

wow slideInUp	從下往上、上來(lái)后固定到設(shè)定位置、透明度為設(shè)定值不變（up是從下往上）（如果元素在最下面，會(huì)撐開(kāi)盒子高度）
wow slideInDown	從上往下、上來(lái)后固定到設(shè)定位置、透明度為設(shè)定值不變
wow slideInLeft	從左往右、上來(lái)后固定到設(shè)定位置、透明度為設(shè)定值不變（left卻是從左往右）
wow slideInRight	從右往左、上來(lái)后固定到設(shè)定位置、透明度為設(shè)定值不變

wow lightSpeedIn	從右往左、頭部先向右傾斜，又向左傾斜，最后變?yōu)樵瓉?lái)的形狀、透明度從100%變化至設(shè)定值
wow pulse	原位置放大一點(diǎn)點(diǎn)在縮小至原本大小、透明度為設(shè)定值不變（配合動(dòng)畫(huà)執(zhí)行次數(shù)屬性效果更佳）
wow flipInX	原位置后仰前栽、透明度從100%變化至設(shè)定值
wow flipInY	原位置左右旋動(dòng)、透明度從100%變化至設(shè)定值
wow bounce	上下抖動(dòng)、透明度為設(shè)定值不變（配合動(dòng)畫(huà)執(zhí)行次數(shù)和動(dòng)畫(huà)持續(xù)時(shí)間屬性可以實(shí)現(xiàn)劇烈抖動(dòng)亦或是慢慢抖）
wow shake	左右抖動(dòng)、透明度為設(shè)定值不變（配合動(dòng)畫(huà)執(zhí)行次數(shù)和動(dòng)畫(huà)持續(xù)時(shí)間屬性可以實(shí)現(xiàn)劇烈抖動(dòng)亦或是慢慢抖）
wow swing	從右往左、頭部先向右傾斜，又向左傾斜，最后變?yōu)樵瓉?lái)的形狀、透明度為設(shè)定值不變
wow bounceInU	原位置不變、直接從不顯示到顯示（無(wú)過(guò)過(guò)渡效果）
wow wobble	原位置不變、類(lèi)似于一個(gè)人站在那左右晃頭、透明度為設(shè)定值不變

測(cè)試了這么多終于摸到竅門(mén)了，打開(kāi)引用的animate.css或者animate.min.css，里面@keyframes定義了各種動(dòng)畫(huà)，將wow后面的類(lèi)名替換一下測(cè)試效果就可以了。

****************************************************************

https://daneden.github.io/animate.css/ 也可以在這個(gè)地方看各種演示

****************************************************************

四、配合data-wow-duration（動(dòng)畫(huà)持續(xù)時(shí)間）、data-wow-delay（動(dòng)畫(huà)延遲時(shí)間）、data-wow-offset（元素的位置露出后距離底部多少像素執(zhí)行）和data-wow-iteration（動(dòng)畫(huà)執(zhí)行次數(shù)）這四個(gè)屬性可以完成很多效果，主要還是多實(shí)踐。

五、IE6、IE7 等老舊瀏覽器不支持 CSS3 動(dòng)畫(huà)，所以沒(méi)有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本會(huì)報(bào)錯(cuò)。為了達(dá)到更好的兼容，最好加一個(gè)瀏覽器及版本判斷。

六、本文主要描述各種類(lèi)名對(duì)應(yīng)的動(dòng)畫(huà)效果，其他關(guān)于wow.js不作過(guò)多描述（想描述我也不懂啊 = =）。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: