鐵人檔案
一個好的動態會讓好的網頁設計，瞬間成為網站界愛馬仕 / 特斯拉！動態網頁比起靜態的網頁，更能完整傳遞網站的故事和訊息，減少網站跳出率、提高點擊率、甚至轉換率。
那客戶想要什麼動態？他們卻是一臉黑人問號。
所以這次鐵人賽，想要搜集網路的案例、教學，(希望可以) 做出 30 個可用的/常見的/很炫的動態提案，並在做中重新爬梳背後的原理和程式邏輯：從最基本的CSS、SVG 動畫到 利用JS、 Canvas 、D3.js 以及 Three.js。
菜鳥工程師也可以很罩地跟客戶說：別擔心，這是我的網頁動態提案！
你有以下困擾嗎？ 常常不知道要怎麼命名Class嗎？（還一直去 Google 英文字的是你ㄇ ？）還是常常寫了一個Class樣式後就被另一個Class樣式給覆...
品牌常常會有一些數字想要呈現去說服消費者，當然只放靜態的數字就太無聊了，最直覺的動態就是讓數字跑起來！ 先來看成果： 今天終於來到了JS動態篇章，比賽也進行1/...
這幾年手機、電腦有黑暗模式，很多網頁也加上像電燈一樣的開關啦！黑暗模式可以降低亮度，減少對眼睛的壓力。弱光環境下比較有可讀性。我自己是喜歡去網頁一直玩開關（哈哈...
今天來介紹一下往下滑和往上滑的指引動畫和搭配Web API。現在都很流行第一屏設計做好做滿，有時候太美了會讓使用者忘記（/根本不想）往下滑， 適當地指引下滑，就...
進場特效也是基本再基本的網頁動態！尤其是當網頁內容塞太多時，適當地加上進場特效可以幫助使用者閱讀重點。 以前常用的套件如Scroll Magic，或計算網頁滑動...
好的Nav bar的動態可以讓網站不那麼呆板，其實實作的技術也不難，就是偵測頁面的滾動向下滑的時候再出現 今天實作兩個： 提案 Nav bar的消失 Na...
敝人很常踩到詐騙網站，第一屏就是一個慶祝的小動畫，恭喜我中獎（好想中威力彩啊） 網頁也很常有這種獎勵使用者的小動畫，譬如說送出一個訂單、或是幫忙寫了一個評價，我...
進度條一般都是搭配文章使用，主要是告訴使用者目前閱讀到哪裡～這是我自己非常喜歡的網頁設計，讓你可以預設自己閱讀的進度，安排自己時間～（太長就快逃啊！） 看到了這...
Loading動畫不難，但這次也藉著 Loading 動畫來練習＆認識一下SVG的 filter ~ 先來看看成果： 下面先複習一下JS的網頁載入，再看code...
要讓SVG 動起來，可以使用SMIL：SVG的原生動畫規範，雖然前幾年Chrome放話不再支援，但這幾年好像暫緩了。 當然不用SMIL就可以用最近超常看到的GS...
