鐵人檔案
一個好的動態會讓好的網頁設計，瞬間成為網站界愛馬仕 / 特斯拉！動態網頁比起靜態的網頁，更能完整傳遞網站的故事和訊息，減少網站跳出率、提高點擊率、甚至轉換率。
那客戶想要什麼動態？他們卻是一臉黑人問號。
所以這次鐵人賽，想要搜集網路的案例、教學，(希望可以) 做出 30 個可用的/常見的/很炫的動態提案，並在做中重新爬梳背後的原理和程式邏輯：從最基本的CSS、SVG 動畫到 利用JS、 Canvas 、D3.js 以及 Three.js。
菜鳥工程師也可以很罩地跟客戶說：別擔心，這是我的網頁動態提案！
第3天寫了打字特效炫起來！今天來個姊妹篇，手寫字特效炫起來!已經默默進入SVG幾天了... 老樣子先來看成果！ 底線是我用Adobe XD拉的～按下右鍵複製S...
有一陣子滑網頁案例時，超常看到用SVG配上滾動視差（Parallax）今天終於要來試試看了！ 滾動視差就是讓元素動的幅度和滾動的幅度有落差，主要是偵測scrol...
偶爾會看到，往下滾，球就會跟著滾動的幅度以拋物線移動。 今天就來使用SVG的Path做做看！其實是我做好的第二個版本，第一個是使用GSAP & Scro...
今天正式進入Canvas的世界了！老樣子先看成品：今天來做點科技感的畫面，橘色是滑鼠的游標，這個是滿常看到的： 但在這之前，想先談一下到底是什麼時候該用SVG...
有時候會碰到網站要放GIF動畫，但GIF大小動輒幾M起跳，造成網頁Loading慢、圖片邊緣鋸齒，支援顏色也不多，不太完美。 這時候 sprite 雪碧圖就登場...
大家都知道Google斷線時會有小恐龍的離線遊戲，以前第一次看到的時候超驚喜！（我到現在斷線的時候還是會玩一下XD）品牌如果發揮一點創意，將品牌元素加進小遊戲裡...
今天來試試看利用Canvas來做聲音的視覺表現！搭配Javascript web audio API(其實是因為找不到好玩的點子)主要是根據這個影片實作。 老樣...
自己做行銷的時候，很喜歡玩數據，數據可以打破一些先入為主的想法、也可以給我們更全面的視角、或是新的發現。也因此產生了學習D3的念頭。 近幾年來流行大數據、 In...
昨天用了D3的transition，今天來試試看attrTween來讓圓餅圖長出來! 老樣子先來看成果： 今天會先來看一下D3的Interpolate想看cod...
前兩天都是展現Data而已，今天來試做看看互動＆換資料的動態！折線圖也是滿常見的樣式，這次以非洲的通膨為主題，主要功能為 1.可以有三個國家資料做比較2.點擊...
