github 上有趣又實用的前端項目（持續更新，歡迎補充）

github 上有趣又實用的前端項目（持續更新，歡迎補充）

1. reveal.js: 幻燈片展示框架

一個專門用來做 HTML 幻燈片的框架，支持 HTML 和 Markdown 語法。

• github: https://github.com/hakimel/reveal.js
• demo: https://revealjs.com

動圖取自博客 reveal.js - 程序員的PPT製作神器。

2. impress.js: 又一個幻燈片展示框架

一個受 https://prezi.com/ 的啓發，使用了現代瀏覽器裏支持的 CSS3 transforms 和 transitions 的特效幻燈片。

我的個人網站首頁 https://www.senntyou.com/ 也是用 impress.js 開發的。

• github: https://github.com/impress/impress.js
• demo: https://impress.js.org/

3. carbon: 代碼美圖生成器

可以將你的代碼生成美美的圖片，然後你就可以分享到各個社區了。

• github: https://github.com/dawnlabs/carbon
• demo: https://dawnlabs.io/carbon

4. favico.js: 讓你的 favicon 用上膠囊圖標、圖片和視頻

• github: https://github.com/ejci/favico.js
• demo: http://lab.ejci.net/favico.js/

5. typed.js: 打字機效果庫

• github: https://github.com/mattboldt/typed.js
• demo: https://mattboldt.com/demos/typed-js/

6. vConsole: 移動端開發調試利器

vConsole： 一個輕量、可拓展、針對手機網頁的前端開發者調試面板（chrome 開發者工具的便利實現）。

一般在 web 應用開發過程中，可以用 console.log 去輸出一些信息，但是在移動端，console.log 的信息是看不到的。

這種情況下，當然可以選擇使用 alert 彈出一些信息，但是這種方法實在不怎麼方便，也會阻斷 js 事件循環，調試體驗和效率都很差。

好在有 vConsole 可以幫助我們解決這個問題。

• github: https://github.com/Tencent/vConsole
• demo: https://wechatfe.github.io/vconsole/demo.html

7. midnight.js: 固定頭部炫酷效果

• github: https://github.com/Aerolab/midnight.js
• demo: https://aerolab.github.io/midnight.js/

8. multiscroll.js: 多邊滑動效果

• github: https://github.com/alvarotrigo/multiscroll.js
• demo: https://alvarotrigo.com/multiScroll/

9. diaporama: Kenburns 效果 與 glsl 轉換動畫庫

• github: https://github.com/gre/diaporama
• demo: http://greweb.me/diaporama/

10. RainEffect: 雨滴效果

• github: https://github.com/codrops/RainEffect
• demo: https://tympanus.net/Development/RainEffect/

11. 後續

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）