WOW動畫 - 簡書

WOW.js插件在H5頁面開發(fā)時很常用

會在頁面剛剛打開時產(chǎn)生動畫特效鸟赫，很酷炫噢乒融！

官網(wǎng)：http://mynameismatthieu.com/WOW/

下載地址：https://github.com/matthieua/WOW

使用步驟：

1、wow.js依賴于animate.css烤宙，首先在頭部引用animate.css或者animate.min.css箭昵。在最底部引用wow.js或者wow.min.js愈污。（無需JQ）

2.在所設(shè)置的元素的class中添加一個“wow”和一個wow.js中的類名（在class中是可以設(shè)置多個類的）怠惶。

3.所設(shè)置的元素必須是必須設(shè)置為塊狀或者行內(nèi)塊狀涨缚。

4.然后在js中加入代碼

wow = new WOW({

boxClass: 'wow', // default 盒子類名

animateClass: 'animated', // default 為animate.css觸發(fā)css動畫的庫

offset: 0, // default 偏移量

mobile: true, // default 是否支持手機(jī)

live: true // default 檢查新元素

})

new WOW().init();

即可使用。

還可以在元素中加入如下屬性甚疟，產(chǎn)生特別的效果仗岖，可選可不選：

data-wow-duration：更改動畫持續(xù)時間

data-wow-delay：動畫開始前的延遲

data-wow-offset：開始動畫的距離（與瀏覽器底部相關(guān)）

data-wow-iteration：動畫的次數(shù)重復(fù)（無限次：infinite）

wow.js定義的類：

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

wow bounceIn從原位置出現(xiàn)，由小變大超出設(shè)定值揽祥，再變小小于設(shè)定值讽膏，再回歸設(shè)定值、透明度從100%變化至設(shè)定值

wow bounceInUp從下往上拄丰、竄上來以后會向上超出一部分然后彈回去府树、透明度為設(shè)定值不變

wow bounceInDown從上往下、掉下來以后會向下超出一部分然后彈跳一下料按、透明度為設(shè)定值不變

wow bounceInLeft從左往右奄侠、移過來以后會向右超出一部分然后往左彈一下、透明度為設(shè)定值不變

wow bounceInRight從右往左载矿、移過來以后會向左超出一部分然后往右彈一下垄潮、透明度為設(shè)定值不變

wow slideInUp從下往上、上來后固定到設(shè)定位置闷盔、透明度為設(shè)定值不變（up是從下往上）（如果元素在最下面弯洗，會撐開盒子高度）

wow slideInDown從上往下、上來后固定到設(shè)定位置逢勾、透明度為設(shè)定值不變

wow slideInLeft從左往右牡整、上來后固定到設(shè)定位置、透明度為設(shè)定值不變（left卻是從左往右）

wow slideInRight從右往左溺拱、上來后固定到設(shè)定位置逃贝、透明度為設(shè)定值不變

wow lightSpeedIn從右往左谣辞、頭部先向右傾斜，又向左傾斜沐扳，最后變?yōu)樵瓉淼男螤钅啻印⑼该鞫葟?00%變化至設(shè)定值

wow pulse原位置放大一點(diǎn)點(diǎn)在縮小至原本大小、透明度為設(shè)定值不變（配合動畫執(zhí)行次數(shù)屬性效果更佳）

wow flipInX原位置后仰前栽迫皱、透明度從100%變化至設(shè)定值

wow flipInY原位置左右旋動歉闰、透明度從100%變化至設(shè)定值

wow bounce上下抖動、透明度為設(shè)定值不變（配合動畫執(zhí)行次數(shù)和動畫持續(xù)時間屬性可以實(shí)現(xiàn)劇烈抖動亦或是慢慢抖）

wow shake左右抖動卓起、透明度為設(shè)定值不變（配合動畫執(zhí)行次數(shù)和動畫持續(xù)時間屬性可以實(shí)現(xiàn)劇烈抖動亦或是慢慢抖）

wow swing從右往左和敬、頭部先向右傾斜，又向左傾斜戏阅，最后變?yōu)樵瓉淼男螤钪绲堋⑼该鞫葹樵O(shè)定值不變

wow bounceInU原位置不變、直接從不顯示到顯示（無過過渡效果）

wow wobble原位置不變奕筐、類似于一個人站在那左右晃頭舱痘、透明度為設(shè)定值不變

例子：

<!DOCTYPE html>

<html>

<head>

<title>wowTest</title>

</head>

margin: 0;

padding: 0;

}

.warp{

height: 600px;

width: 600px;

background: pink;

}

.box{

height: 200px;

width: 200px;

background: blue;

}

</style>

<body>

<div class="box wow slideInUp">uuuuuuuuuu</div>

</div>

wow = new WOW({

boxClass: 'wow', // default 盒子類名

animateClass: 'animated', // default 為animate.css觸發(fā)css動畫的庫

offset: 0, // default 偏移量

mobile: true, // default 是否支持手機(jī)

live: true // default 檢查新元素

})

new WOW().init();

</script>

</body>

</html>

作者：Wanlly
鏈接：http://www.reibang.com/p/23907d478daf
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)离赫，非商業(yè)轉(zhuǎn)載請注明出處芭逝。