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. particles.js: 超棒的粒子效果

• github: https://github.com/VincentGarreau/particles.js
• demo: https://vincentgarreau.com/particles.js/

4. carbon: 代碼美圖生成器

能夠將你的代碼生成美美的圖片，而後你就能夠分享到各個社區了。

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

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

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

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

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

7. 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

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

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

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

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

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

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

11. RainEffect: 雨滴效果

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

後續

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

做者：深予之 (@senntyou)

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