提升網頁質感的CSS動畫

原來在在網頁中加入動畫效果並不難

現成的模組可以套

筆記一下：

使用CSS來完成動畫的-Animate.css

使用JS完成動畫的-D3js

相關介紹：

• 微動畫簡單做！使用 animate.css 五秒提升作品質感
• 讓我的視覺化動起來！D3.js 動畫函式入門

但是........凡事都有個But！！


那就是測試的時候發現全畫面的動畫都是同一時間一起秀出來的..............
那畫面外的動畫到底誰看的到？=_="

Google了一下，原來....是我的使用姿勢不對.....Orz
如果希望可以讓畫面所到之處才逐一顯示動畫是需要搭配wow.js外掛的
不囉嗦！馬上前往wow.js的專案頁面下載吧！
注意使用時必須新增一段啟動碼

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

之後使用時只需要在class加上wow即可
ex:

<div class="wow animated bounce">
動態呈現的內容</div>

更多的介紹與說明可參考其他網頁的說明。

• 踢踢五 - wow.js
• 網頁動畫效果WOW.js+animate.css

試試看吧！