版塊設計都去哪裡找網站動態特效設計資源？
網站趨勢社團為什麼都知道這麼多網站？

經過了數十場演說與活動後，發現幾乎每場的 Q&A 都會被問到的一題「請問你們是從哪裡看到這麼多的網站與參考資料的？」由於實在太常被問到，所以我們乾脆統整一篇文章是關於版塊設計日常都在看的「網站動態特效設計資源」，無私的跟大家公開分享！

本文內容分成 網站設計資源、動態特效資源 兩種面向，讓設計師、前端工程師們再提案、發想、製作的過程中有其他多元的參考來源。

---

【動態特效資源】

內容介紹許多業界知名的「動態特效收集平台」。適合大家從特效面向切入，包含「創新、動態、速度、體驗、程式碼」等層面學習觀摩，都是很有幫助的哦～

---

❶ Codepen

https://codepen.io/

這裡集結全世界大大小小前端特效，強的、弱的、趨勢的、流行的 Demo 都在這裡，是全球首屈一指的動態特效收集平台。
它可以直接在上觀看 Demo 以外，還可以直接開啟 Code editor 即時編輯並觀看成果，非常的方便！且官方定期也會有「Challenges 挑戰」的題目讓你發揮，我個人很常看的是「Trending 趨勢」類別。
建議註冊帳號後觀看，不然會一直跳出要你註冊的訊息。

 

❷ Codrops

Codrops 也算是經營蠻久了，至少也有五年以上。
從最開始他們自己推出動態特效 Demo ，到近年讓大家投稿 Demo ，是個非常用心經營的網站。
且每個 Demo 作者都會用心撰寫文章介紹、使用技術、瀏覽支援度、可能會有的問題等，非常的受用！

重點是這個網站的 Demo 完整度極高、設計品味極好！

網站內容會分為兩種大類別 Tutorials / Playground：

Tutorials
這裡的 Demo 比較會是利用已成熟的技術加入創意後所發展的動態特效，也是上述提到有詳細說明作法的。
https://tympanus.net/codrops/category/tutorials/

Playground
這裡的 Demo 比較會是以創新為主，可能較不去考慮支援度與效能的動態特效，所以也都相對較誇張一點。https://tympanus.net/codrops/category/playground/

 

❸ NavNav+

https://navnav.co/

大約 4,5 年前創立，一開始專門以 Nav 的形式的 Demo 為主，來這邊可以找到許多 Nav 不同做法。
近年開始放入許多不同類型的動態特效，讓整個網站資料更為豐富。

 

❹ Code My UI

https://codemyui.com/

這裡的資源算是蠻豐富！
閱讀方式可分成「Page Elements、DesignElements、HTMLElements…」幾種分類方式去找尋你要的 Dmeo 。

 

❺ CodyHouse

https://codyhouse.co/library/

這個網站與前一個 Code My UI 差不多，只不過他分享的 Demo 類型都算是「基本款」，相較於前面介紹的平台網站這個網站是 非常適合新手 的哦！
而且它把全部動態特效都完整重新撰寫過一遍，設計視覺元素也非常一致，是個設計品味很好的分享平台呢！但改版前的版面比較好看（誤）

---

總結

上述介紹5個網站都是我們經常會去閱讀的網站也是很棒的參考資訊！
以下統整我們的閱讀順序：

1. Codepen：最新、最多、最雜，當作資料庫，需要什麼就在這邊找。
2. Codrops：可以每天必看！
3. NavNav+：當作資料庫，需要什麼就在這邊找。
4. Code My UI：當作資料庫，需要什麼就在這邊找。
5. CodyHouse：新手教學區，設計、程式在這邊都可以參考。

抄抄寫寫改改很容易，
能夠內化成你自己的東西並且信手捻來，那才叫厲害！

---

相關文章 → 你都去哪裡找網站動態特效設計靈感？(網站設計篇)

---

延伸閱讀

在做動態特效網站時，最常遇到的問題就是「瀏覽器不支援」！
這時候第一個動作絕對是去查查看你所使用的 CSS 屬性目前支援到哪裡了、是不適合這網站 TA 、有什麼方法可以解決。這裡推薦兩個目前業界使用度最高的瀏覽器檢測 CSS 屬性網站。

∎ Can I use

https://caniuse.com/
介面非常清晰易懂，好用！

∎ Mozilla | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS
與 Can I use 差不多資源，但是由 Mozilla 出品。