鐵人檔案
一個好的動態會讓好的網頁設計，瞬間成為網站界愛馬仕 / 特斯拉！動態網頁比起靜態的網頁，更能完整傳遞網站的故事和訊息，減少網站跳出率、提高點擊率、甚至轉換率。
那客戶想要什麼動態？他們卻是一臉黑人問號。
所以這次鐵人賽，想要搜集網路的案例、教學，(希望可以) 做出 30 個可用的/常見的/很炫的動態提案，並在做中重新爬梳背後的原理和程式邏輯：從最基本的CSS、SVG 動畫到 利用JS、 Canvas 、D3.js 以及 Three.js。
菜鳥工程師也可以很罩地跟客戶說：別擔心，這是我的網頁動態提案！
在鐵人賽正式開始之前，想先寫一下SCSS。因為我的CSS全部都是SCSS寫的...怕大家看不懂馬上棄看 QQ這一篇是簡易的SCSS小抄說明，主要針對文章中出現S...
Yo! 我是Rachel。今年成功從行銷轉職成前端工程師，在前輩的鼓勵下參加了鐵人賽！這次選擇了前端的動態當主題。 為什麼呢？請聽我娓娓道來... 以前第一次當...
網站必備！連結動態 連結的Hover動態算是網頁動態最基本款，一個好的動態絕對可以幫網頁 點擊率（CTR） 加分。 (話說當時菜鳥的我根本不知道什麼是hover...
Day 1 介紹了用CSS 偽元素的方式放大縮小變寬去做連結特效。傳送門今天也選了幾個button的特效，使用位移的方式，簡單使用CSS特性就可以。 先來看看成...
昨天的第三個按鈕動態提案：文章傳送門 使用了CSS動態的動態的主菜——Animation。其實有很多特效，只要能夠拆解他的原理，就可以使用Animation達成...
前幾天都比較專注在文字上的CSS動態，今天就來看看圖片的吧！比起一堆文字，放圖片絕對能夠說個好故事！可是一張圖片不夠說明怎麼辦？那就在使用者Hover的時候才把...
這一兩年很常在網頁設計中看到這種不規則的小東西出現，甚至還會像波浪一樣動。之前傻傻地用Svg做，然後一直換path，結果效能不太好。上網一查發現其實只要用bor...
文字跑馬燈偶爾會在一些運動品牌或是潮牌看到，裝飾效果很棒又很炫，以前也是傻傻以為要用JS寫，偵測跑完了再放下一段......但在Youtube看到這個教學影片）...
常常看到有些網站的漢堡選單用換圖的方式從 三 --> X會覺得有點可惜，其實漢堡選單的動態一樣CSS 就可以搞定！說不定會因為動得太可愛，讓大家一直點 (...
昨天做完了會動的漢堡動畫傳送門今天來開關側邊欄吧！當然只要控制 width0 —> 100% 就可以讓側邊欄從左邊推進來，但今天來多一點點特效，先來看成果...
