Animate.css和wow.js的搭配使用

常常見到某個網站的動畫是在屏幕顯示到This元素的時候，會有個過渡動畫。

主要區別於在普通頁面是在頁面加載完成後全部動畫一塊兒動，或者設置延遲時間。

而這兩個插件混搭使用能夠是頁面如今到該元素時才加載動畫。擁有很是不錯的效果。

 

算個比較常見的交互效果，研究了一下午，主要使用如下兩個插件完成。

1.wow.js

實現了在網頁滾動時的動畫效果，有漂亮的動畫效果，依賴於Animate.css。

2.Animate.css

很是優秀的CSS3動畫庫，不依賴於jQuery，純CSS動畫

 

用法：

<link href="animate.css" rel="stylesheet"><script src="wow.min.js"></script> 

　　分別引入wow.js與Animate.css

<div class="wow animatecss"></div>

在想添加動畫的元素中添加'wow'     (必須)

在想添加動畫的元素中添加'animatecss'     (爲動畫的Class，能夠在該網站找到合適的動畫http://daneden.github.io/animate.css/   本身寫也能夠)

<script>new WOW().init();</script>

能夠不依賴JQuery，而且在移動端也有不錯的效果

下邊附上下載連接地址，方便大家去下載使用！

http://dl42.yunpan.360.cn/intf.php?method=Download.downloadFile&qid=574751937&fname=%2F%E6%96%87%E6%A1%A3%2Fwow_js.rar&fhash=62916758ed57d181f6593594774b0afc9387162d&dt=42_42.44bedc46bb210a0d4a89a4dbf43d0ce0&v=1.0.1&rtick=14557003627324&open_app_id=0&devtype=web&sign=26fc68affc29085a4523f8f9d529d2dd&