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

摘要： github 上有趣又實用的前端專案（持續更新，歡迎補充） 1. reveal.js : 幻燈片展示框架 一個專門用來做 HTML 幻燈片的框架，支援 HTML 和 Markdown 語法。 github : https://github.com/hakimel/re...

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

1. ofollow,noindex" target="_blank">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許可證 ）