使用Animate.css和wow.js，實現各大網站常用的頁面加載動畫

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

 

2015-6-24添加測試地址，可自行審查元素

http://2.lanjianwc.sinaapp.com/

 

主要區別於在普通頁面是在頁面加載完成后所有動畫一起動，或者設置延遲時間。

而這兩個插件混搭使用可以是頁面現在到該元素時才加載動畫。擁有非常不錯的效果。

 

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

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，並且在移動端也有不錯的效果