#0-好的动态让你成为网站界爱马仕、特斯拉！（前言）

Yo! 我是Rachel。今年成功从行销转职成前端工程师，
在前辈的鼓励下参加了铁人赛！这次选择了前端的动态当主题。

为什麽呢？请听我娓娓道来...

以前第一次当网站PM时，第一版做出来的成品，一点动画都没有。
主管问：这样的网站谁想要滑？那时候一心只想把网站做好，却没有多想。

动态让你一跃成为网站界爱马仕、特斯拉

一个好的动态可以让使用者一进入网页，就被吸引住。
（人本来就会被动的东西给吸引，是我们古老狩猎/逃难的本能）动态可以
更好地传递一个讯息
加深产品的特色和印象度
增强网站的互动率、减少跳出率、提高转换率等等。
(把行销的话术都翻出来了...)

但动态也不是无限上纲地加，好的动态，不一定是要展现最强的技术，
而是要呈现品牌/网站的风格/特色，或是达到某个网站体验的目的。

当时是PM菜鸟的我知道了动态的重要性之後，蹦蹦跳跳跑去找工程师。
「那你想要什麽效果？」被反问後，我却脑袋空白不知道该加什麽。

这当然是我在当工程师之前的小插曲，但最近在帮非科技背景的朋友做网站时，
发现他们跟当初的我一样，被问到想要什麽效果的时候，他们都回答不出来。

您好，这是您的动态菜单！

所以这次想爬梳一下网路上必要的或是很不错的动态，
做成一个动态菜单，拿给对方当小小提案！
（不是等着对方要什麽，而是把手头上现有的东西拿出来给对方选！展现专业！）

这次30天的挑战，因为篇幅的关系，不会太多着墨在原理，
而直接做出30个动态提案给自己(哈哈哈)
并在做中重新爬梳程序语言原理和逻辑。
从最基本的CSS/SVG 动画到使用JS、 canvas 、D3.js 以及Three.js。
(比较是自我实现文而不是教学文啦XD)

给订阅此系列文的大家

所以对订阅铁人赛系列文的人先说声抱歉(mm)，这里你不会看到详细的教学文章，
而都是我做中学的纪录，多是从网路上蒐集下来的影片教学、codepen的案例...。
也算是自己的动态速成班。（我比较喜欢直接写出一个成品出来，再慢慢探究原理）
或是你苦无动态展现网站，可以继续看看我的文章搜集灵感！

以SCSS和Notion参战！

为求快速，这次的CSS会以SCSS为主撰写。请参考我的#0-不负责任快速入门

这次也找了一起转职成工程师的老战友 蓉蓉 & Sally 一起挑战铁人赛！
之前 Sally也推荐使用Notion笔记，
我很喜欢 Notion阶层概念/
区块有各种选择和排版/
以及最爱有随机的小icon可以隔开文章。
这次就用Notion整理自己的笔记！（而且复制贴上就是markdown 耶 YA!）

铁人赛开始罗！¡Vamos!

这30天的大纲

待补...
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

相关动态铁人系列文章

过去铁人赛也有很多不错的动态的解说资料，欢迎在留言补充，我再补上来！

2019 - 用 Three.js 来当个创世神

2019- 30天让设计师搞定CSS/SVG动画

2017 - WebGL 与 Three.js 初探

参考资料

Web Animation In The Post-Flash Era