前端特效

-

不私藏!10 個前端特效教學的 YT 頻道分享

this.web

做前端動畫特效是我踏入這個領域最主要原因,也是我覺得網頁設計中最吸引人的一環

我整理了我認為 10 個超讚的 YouTube 頻道,適合各個階段的學習者,從 CSS 動畫、GSAP,到 P5.js、Three.js 3D 特效都有!👇

網頁基礎練習&排版

一、Online Tutorials

頻道連結:Online Tutorials

這個頻道蠻適合初學者學習 CSS,內容非常廣,從簡單的 CSS 組件動畫到 Landing Page 排版以及更進階的 CSS、JS、Canvas 特效都有。

影片沒有任何對話,只有一行一行帶著你打出程式碼,所以英文不好也沒問題!當初覺得這個頻道真的是寶藏一直不想分享出來 😂

online tutorials

二、Bedimcode

頻道連結:Bedimcode

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

bedimcode

三、Optimistic Web - YouTube

頻道連結:Optimistic Web

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

optimistic web

學習前端一直卡關很焦慮嗎?

免費領取
前端學習管理模板

這個模板能幫助你:​

1. 規劃明確轉職目標與學習地圖
2. 一鍵生成學習路徑
3. 按主題建立學習筆記
4. 視覺化追蹤學習進度

image

網頁進階特效

四、Codegrid

頻道連結:Codegrid

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

Codegrid

五、Hyperplexed - YouTube

頻道連結:Hyperplexed

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

Hyperplexed

六、Lun Dev - YouTube

頻道連結:lundevelop

這是我近期發現的頻道,品質也很不錯,會針對一個 CSS 屬性或網頁特效來講解~

Lun Dev

Creative Coding

七、Patt Vira

頻道連結:Patt Vira

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

Patt Vira

八、Franks Laboratory

頻道連結:Franks laboratory

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

Franks Laboratory

九、The Coding Train

頻道連結:The Coding Train

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

the coding train

網頁 3D 動畫

十、Wawa Sensei

頻道連結:Wawa Sensei - YouTube

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

wawa sensai

結尾

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

你可能會感興趣的文章 👇