前端特效
-不私藏!10 個前端特效教學的 YT 頻道分享
做前端動畫特效是我踏入這個領域最主要原因,也是我覺得網頁設計中最吸引人的一環
我整理了我認為 10 個超讚的 YouTube 頻道,適合各個階段的學習者,從 CSS 動畫、GSAP,到 P5.js、Three.js 3D 特效都有!👇
網頁基礎練習&排版
一、Online Tutorials
頻道連結:Online Tutorials
這個頻道蠻適合初學者學習 CSS,內容非常廣,從簡單的 CSS 組件動畫到 Landing Page 排版以及更進階的 CSS、JS、Canvas 特效都有。
影片沒有任何對話,只有一行一行帶著你打出程式碼,所以英文不好也沒問題!當初覺得這個頻道真的是寶藏一直不想分享出來 😂

二、Bedimcode
頻道連結:Bedimcode
Bedimcode 更專注於網頁 UI 和 RWD 設計,有各式各樣的 Landing Page 可以觀摩練習,有些教學也有包含 GSAP 的應用,適合有點 CSS 底子想大量練習排版的人!

三、Optimistic Web - YouTube
頻道連結:Optimistic Web
這個頻道更多在講解 CSS 各種屬性的應用,也會有實際的例子,和前面兩個頻道不同,作者會講解和示範這些屬性,想要更深入了解 CSS 或練英聽的話,這個頻道就很適合你~

學習前端一直卡關很焦慮嗎?
免費領取
前端學習管理模板
這個模板能幫助你:
1. 規劃明確轉職目標與學習地圖
2. 一鍵生成學習路徑
3. 按主題建立學習筆記
4. 視覺化追蹤學習進度
🎉 領取成功!模板已經送出,記得檢查你的「促銷郵件」、「垃圾郵件」和「所有郵件」哦!

網頁進階特效
四、Codegrid
頻道連結:Codegrid
這個頻道有更多更進階的網頁動畫,大多數都會用 GSAP 來製作,如果你對網頁動畫有興趣,我也非常推薦這個頻道,裡面有很多不容易想到的 GSAP 應用,也是我當初學習 GSAP 時最愛的 YT!

五、Hyperplexed - YouTube
頻道連結:Hyperplexed
我也非常喜歡這個頻道,雖然他影片數比較少,但每一個品質都很好,除了節奏很順以外,最厲害的是他會講解做這些特效的思路,而不是單純寫程式碼給你看~一直都很期待他的更新!

六、Lun Dev - YouTube
頻道連結:lundevelop
這是我近期發現的頻道,品質也很不錯,會針對一個 CSS 屬性或網頁特效來講解~

Creative Coding
七、Patt Vira
頻道連結:Patt Vira
這是專門介紹 p5.js 的頻道,前陣子我對 p5 很有興趣時,找教學就看到了他的頻道,讓我大開眼界,很多特效應用是我想都沒想過的,如果你對這個領域很有興趣,相信從這裡入手會對你有幫助~!

八、Franks Laboratory
頻道連結:Franks laboratory
Franks Laboratory 主要分享基於 Canvas API 和 JvaScript 的特效,常常很多誇張的 canvas 特效他都有教,像以下這個影片的範例。

九、The Coding Train
頻道連結:The Coding Train
非常有名的頻道,我覺得他最有趣是有一個系列是,先帶你瞭解物理原理後,用程式碼寫出物理效果~

網頁 3D 動畫
十、Wawa Sensei
最後,想學習 3D 網頁動畫的話就一定要看這個頻道!這個頻道專注於 Three.js 和各種 3D 視覺效果,不用擔心沒有練習的素材~

結尾
以上就是我精選的 10 個 YouTube 頻道,不管你是初學者還是進階開發者,都能在這些頻道找到適合自己的學習資源。