2021/06/09
7,185
版塊設計口袋清單推薦：網站動態特效五大參考資源
多觀賞他人的作品，往往也能夠刺激自己的靈感。製作網站動態特效，有哪些優質的特效收集平台可供參考呢？獲獎無數的版塊設計團隊不藏私推薦。本文內容為你整理五大優質動態特效參考資源。
內容介紹許多業界知名的「動態特效收集平台」。適合大家從特效面向切入，包含「創新、動態、速度、體驗、程式碼」等層面學習觀摩，都是很有幫助的哦！
1、Codepen
這裡集結全世界大大小小前端特效，強的、弱的、趨勢的、流行的 Demo 都在這裡，是全球首屈一指的動態特效收集平台。
它可以直接在上觀看 Demo 以外，還可以直接開啟 Code Editor 即時編輯並觀看成果，非常的方便！且官方定期也會有「 Challenges 挑戰」的題目讓你發揮，版塊設計很常看的是「 Trending 趨勢」類別。建議註冊帳號後觀看，否則會一直跳出要推廣註冊的訊息。
2、Codrops
Codrops 經營較久，至少也有五年以上。
最開始 Codrops 自己會推出動態特效 Demo，到近幾年開始開放讓大家投稿，是個非常用心經營的網站。且每個 Demo 作者都會用心撰寫文章介紹、使用技術、瀏覽支援度、可能會有的問題等，非常的受用！
重點是這個網站的 Demo 完整度極高、設計品味極好！
網站內容會分為兩種大類別 Tutorials / Playground：
Tutorials
這個區塊的 Demo 比較會是利用已成熟的技術加入創意後所發展的動態特效，也是上述提到有詳細說明作法的。
Playground
這個區塊的 Demo比較會是以創新為主，或許是因為較不需考慮支援度與效能的動態特效，所以也都相對較誇張一點。
3、NavNav+
大約 4、5 年前創立，一開始專門以 Nav 形式的 Demo 為主，來這邊可以找到許多 Nav 的不同做法。
近年開始放入許多不同類型的動態特效，讓整個網站資料更為豐富。
4、Code My UI
這裡的資源算是蠻豐富！閱讀方式可分成「Page Elements、DesignElements、HTMLElements...」幾種分類方式去找尋你要的 Dmeo。
5、CodyHouse
▶ https://codyhouse.co/library/
這個網站與前一個 Code My UI 差不多，只不過他分享的 Demo 類型都算是「基本款」，相較於前面介紹的平台網站這個網站是 非常適合新手 的哦！
而且它把全部動態特效都完整重新撰寫過一遍，設計視覺元素也非常一致，是個設計品味很好的分享平台呢！但改版前的版面比較好看（誤）
（本文原載於版塊設計網站，原標題：《你都去哪裡找網站動態特效設計靈感？(動態特效資源篇)》）
看完文章要用時卻忘光光？點選下方按鈕
收藏此文章，我隨時都在這等你回來！
🎉 太棒了！你又學會了新知識！
▶ 用 5 分鐘再多學一點
▶ 推薦線上課程
1098