iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

這個網站也太嗨!30 個網頁動態提案系列 第 2

#0-好的動態讓你成為網站界愛馬仕、特斯拉!(前言)

Yo! 我是Rachel。今年成功從行銷轉職成前端工程師,
在前輩的鼓勵下參加了鐵人賽!這次選擇了前端的動態當主題。

為什麼呢?請聽我娓娓道來...

以前第一次當網站PM時,第一版做出來的成品,一點動畫都沒有。
主管問:這樣的網站誰想要滑?那時候一心只想把網站做好,卻沒有多想。


動態讓你一躍成為網站界愛馬仕、特斯拉

一個好的動態可以讓使用者一進入網頁,就被吸引住。
(人本來就會被動的東西給吸引,是我們古老狩獵/逃難的本能)動態可以
更好地傳遞一個訊息
加深產品的特色和印象度
增強網站的互動率、減少跳出率、提高轉換率等等。
(把行銷的話術都翻出來了...)

但動態也不是無限上綱地加,好的動態,不一定是要展現最強的技術,
而是要呈現品牌/網站的風格/特色,或是達到某個網站體驗的目的。

當時是PM菜鳥的我知道了動態的重要性之後,蹦蹦跳跳跑去找工程師。
「那你想要什麼效果?」被反問後,我卻腦袋空白不知道該加什麼。

/images/emoticon/emoticon04.gif

這當然是我在當工程師之前的小插曲,但最近在幫非科技背景的朋友做網站時,
發現他們跟當初的我一樣,被問到想要什麼效果的時候,他們都回答不出來。


您好,這是您的動態菜單!

所以這次想爬梳一下網路上必要的或是很不錯的動態,
做成一個動態菜單,拿給對方當小小提案!
(不是等著對方要什麼,而是把手頭上現有的東西拿出來給對方選!展現專業!)

這次30天的挑戰,因為篇幅的關係,不會太多著墨在原理,
而直接做出30個動態提案給自己(哈哈哈)
並在做中重新爬梳程式語言原理和邏輯。
從最基本的CSS/SVG 動畫到使用JScanvasD3.js 以及Three.js
(比較是自我實現文而不是教學文啦XD)

給訂閱此系列文的大家

所以對訂閱鐵人賽系列文的人先說聲抱歉(mm),這裡你不會看到詳細的教學文章,
而都是我做中學的紀錄,多是從網路上蒐集下來的影片教學、codepen的案例...。
也算是自己的動態速成班。(我比較喜歡直接寫出一個成品出來,再慢慢探究原理)
或是你苦無動態展現網站,可以繼續看看我的文章搜集靈感!

/images/emoticon/emoticon37.gif


以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


上一篇
#0 - SCSS 不負責任快速入門
下一篇
#1-連結Hover動起來!(CSS 偽元素)
系列文
這個網站也太嗨!30 個網頁動態提案33

尚未有邦友留言

立即登入留言