Yo! 我是Rachel。今年成功從行銷轉職成前端工程師，
在前輩的鼓勵下參加了鐵人賽！這次選擇了前端的動態當主題。
為什麼呢？請聽我娓娓道來...
以前第一次當網站PM時，第一版做出來的成品，一點動畫都沒有。
主管問：這樣的網站誰想要滑？那時候一心只想把網站做好，卻沒有多想。
一個好的動態可以讓使用者一進入網頁，就被吸引住。
（人本來就會被動的東西給吸引，是我們古老狩獵/逃難的本能）動態可以更好地傳遞一個訊息加深產品的特色和印象度增強網站的互動率、減少跳出率、提高轉換率等等。
(把行銷的話術都翻出來了...)
但動態也不是無限上綱地加，好的動態，不一定是要展現最強的技術，
而是要呈現品牌/網站的風格/特色，或是達到某個網站體驗的目的。
當時是PM菜鳥的我知道了動態的重要性之後，蹦蹦跳跳跑去找工程師。
「那你想要什麼效果？」被反問後，我卻腦袋空白不知道該加什麼。
這當然是我在當工程師之前的小插曲，但最近在幫非科技背景的朋友做網站時，
發現他們跟當初的我一樣，被問到想要什麼效果的時候，他們都回答不出來。
所以這次想爬梳一下網路上必要的或是很不錯的動態，
做成一個動態菜單，拿給對方當小小提案！
（不是等著對方要什麼，而是把手頭上現有的東西拿出來給對方選！展現專業！）
這次30天的挑戰，因為篇幅的關係，不會太多著墨在原理，
而直接做出30個動態提案給自己(哈哈哈)
並在做中重新爬梳程式語言原理和邏輯。
從最基本的CSS/SVG 動畫到使用JS、 canvas 、D3.js 以及Three.js。
(比較是自我實現文而不是教學文啦XD)
給訂閱此系列文的大家
所以對訂閱鐵人賽系列文的人先說聲抱歉(mm)，這裡你不會看到詳細的教學文章，
而都是我做中學的紀錄，多是從網路上蒐集下來的影片教學、codepen的案例...。
也算是自己的動態速成班。（我比較喜歡直接寫出一個成品出來，再慢慢探究原理）
或是你苦無動態展現網站，可以繼續看看我的文章搜集靈感！
為求快速，這次的CSS會以SCSS為主撰寫。請參考我的#0-不負責任快速入門
這次也找了一起轉職成工程師的老戰友 蓉蓉 & Sally 一起挑戰鐵人賽！
之前 Sally也推薦使用Notion筆記，
我很喜歡 Notion階層概念/
區塊有各種選擇和排版/
以及最愛有隨機的小icon可以隔開文章。
這次就用Notion整理自己的筆記！（而且複製貼上就是markdown 耶 YA!）
鐵人賽開始囉！¡Vamos!
待補...Day 1~ 7 CSS Only
Day 8 ~ 14 CSS + JS
Day 15 ~ 20 SVG
Day 21 ~ 24 Canvas
Day 25 ~ 28 D3.js
Day 29 ~ 30 Three.js
過去鐵人賽也有很多不錯的動態的解說資料，歡迎在留言補充，我再補上來！
Web Animation In The Post-Flash Era
iThome鐵人賽
看影片追技術