實用資源庫和工具，極大縮減開發時間

在這篇文章中，我不會與你們談論大型的前端框架，如 React、Angular、Vue 等，也沒有涉及那些流行的代碼編輯器，如 Atom、VS Code、Sublime，我只想與你們分享一個有助於提高開發人員效率的工具列表合集。

或許，一些朋友已經對文中的一些工具備所瞭解，但若是你發現了一些對你有幫助的新工具，那麼，我將倍感欣慰。

因爲這個列表中包含了不一樣類別的資源，爲了便於你們查看，我已將其進行了從新的分類，來 Enjoy 吧！

---

JavaScript 庫

• Particles.js  - 一個用於在網頁上建立漂亮的浮動粒子的 JS 庫；

地址：

http://vincentgarreau.com/particles.js/

• Three.js  - 用於在網頁上建立 3D 物體與空間的 JS 庫；

地址：https://threejs.org/

• Fullpage.js - 易於實現全屏滾動功能的庫；

地址：

https://alvarotrigo.com/fullPage/#firstPage

• Typed.js - 實現打字機效果；

地址：

http://www.mattboldt.com/demos/typed-js/

• Waypoints.js - 滾動到元素觸發事件的庫；

地址：

http://imakewebthings.com/waypoints/

• Highlight.js - 頁面上語法高亮顯示；

地址：https://highlightjs.org/

• Chart.js - 純 JS 製做漂亮的圖表；

地址：http://www.chartjs.org/

• Instantclick - 鼠標懸停預先加載頁面資源，大大加速你的網站響應速度；

地址：http://instantclick.io/

• Chartist - 開源響應式圖表庫；

地址：

http://gionkunz.github.io/chartist-js/index.html

• Motio - 基於 sprite 的動畫和平移庫；

地址：

http://darsa.in/motio/#!introduction

• Animstion - 頁面切換動畫的 jQuery 插件；

地址：http://git.blivesta.com/animsition/

• Barba.js - 建立頁面間流暢平滑的過渡效果；

地址：https://github.com/luruke/barba.js

• TwentyTwenty - jQuery 視差插件；

地址：

http://zurb.com/playground/twentytwenty

• Vivus.js - 能夠執行 SVG 路徑動畫的輕量級 JS 庫；

地址：

https://github.com/maxwellito/vivus#vivusjs

• Wow.js - 頁面滾動時展示動畫效果；

地址：

http://mynameismatthieu.com/WOW/

• Scrolline.js - 頁面滾動時顯示滾動進度的 jQuery 插件；

地址：

https://github.com/anthonyly/Scrolline.js

• Velocity.js - 用於加速 JavaScript 動畫；

地址：http://velocityjs.org/

• Animate on scroll - 頁面滾動時增添元素動畫的小型庫；

地址：http://michalsnik.github.io/aos/

• Handlebars.js - JavaScript 模板引擎；

地址：http://handlebarsjs.com/

• jInvertScroll - 輕量級的 jQuery 水平視差插件；

地址：

http://www.pixxelfactory.net/jInvertScroll/

• One page scroll - 實現蘋果風格單頁滾動效果的 jQuery 插件；

地址：

https://github.com/peachananr/onepage-scroll

• Parallax.js - 輕量級的視差引擎，可以對智能設備的方向做出反應；

地址：

https://github.com/wagerfield/parallax

• Typeahead.js - 搜索框自動補全的 JS 庫；

地址：

http://twitter.github.io/typeahead.js/

• Dragdealer.js - 基於拖動的 JavaScript 組件；

地址：

http://skidding.github.io/dragdealer/

• Bounce.js - 快速建立漂亮的 CSS3 動畫效果；

地址：http://bouncejs.com/

• Pagepiling.js - 建立全屏滾動效果；

地址：

https://github.com/alvarotrigo/pagePiling.js

• Multiscroll.js - 建立兩列垂直反向滾動效果的 jQuery 插件；

地址：

http://aerolab.github.io/midnight.js/

• Favico.js - 動態圖標插件；

地址：http://lab.ejci.net/favico.js/

• Midnight.js - 固定頭部切換效果；

地址：

http://aerolab.github.io/midnight.js/

• Anime.js - JavaScript 動畫引擎；

地址：http://animejs.com/

• Keycode - 獲取鍵盤按鍵的 JS 鍵碼值；

地址：http://keycode.info/

• Sortable - 用於拖拽排序的 JavaScript 庫；

地址：http://rubaxa.github.io/Sortable/

• Flexdatalist - 支持<datalist>的 jQuery 自動完成插件；

地址：

http://projects.sergiodinislopes.pt/flexdatalist/

• Slideout.js - 實現滑出式 Web App 導航菜單；

地址：https://slideout.js.org/

• Jquerymy - 實時、複雜的雙向數據綁定 jQuery 插件；

地址：http://jquerymy.com/#/

• Cleave.js - 自動格式化表單輸入框的文本內容；

地址：http://nosir.github.io/cleave.js/

• Page - 構建單頁應用的小型客戶端路由庫；

地址：

http://smalljs.org/client-side-routing/page/

• Selectize.js - 基於 jQuery 的<select> UI 控件，用於建立tag標籤輸入框和 select 下拉框；

地址：

http://selectize.github.io/selectize.js/

• Nice select - 建立漂亮下拉框的 jQuery 插件；

地址：

http://hernansartorio.com/jquery-nice-select/

• Tether - 使用絕對定位建立兩個互相相關元素的 JS 庫；

地址：http://tether.io/

• Shepherd.js - 建立新手引導的 JS 庫；

地址：

https://github.com/HubSpot/shepherd

• Tooltip - 工具提示插件；

地址：https://github.com/HubSpot/tooltip

• Select2 - 基於 jQuery 的替代選擇框；

地址：https://select2.github.io/

• IziToast - 輕量的跨瀏覽器響應式消息通知插件；

地址：http://izitoast.marcelodolce.com/

• IziModal - 炫酷的 jQuery 模態窗口插件。

地址：http://izimodal.marcelodolce.com/

---

CSS 庫與設計資源

• Animate.css  - 強大的 CSS3 動畫庫；

地址：

https://daneden.github.io/animate.css/

• Flat UI Colors - 漂亮的扁平化配色；

地址：https://flatuicolors.com/

• Material Design Lite - 基於谷歌 Material Design 的前端框架；

地址：https://getmdl.io/index.html

• Colorrrs  - 隨機顏色生成器；

地址：

https://www.webpagefx.com/web-design/random-color-picker/

• Section separators - CSS 區域分割；

地址：

https://tympanus.net/Development/SectionSeparators/

• Topcoat - 專一爲簡潔、快速的 Web 應用提供 CSS 開發的工具；

地址：http://topcoat.io/

• Create Ken Burns Effect - 利用 CSS3 實現的 Ken burns 特效；

地址：

https://www.kirupa.com/html5/ken_burns_effect_css.htm

• DynCSS - 用於分析 CSS -dyn-屬性規則，並使其具有動態屬性；

地址：

http://www.vittoriozaccaria.net/dyn-css/

• Magic animations - 具有特殊動效的 CSS3 動畫；

地址：

https://www.minimamente.com/example/magic_animations/

• CSSpin - 豐富的 CSS 加載動畫；

地址：https://webkul.github.io/csspin/

• Feather icons - 簡單、漂亮的開源圖標庫；

地址：https://feathericons.com/

• Ion icons - 專爲 Ionic 框架設計的圖標字體；

地址：http://ionicons.com/

• Font Awesome - 可縮放的矢量圖標字庫；

地址：http://fontawesome.io/

• Font Generator - 在線字體生成器；

地址：http://brandmark.io/font-generator/

• On/Off FlipSwitch - 在線建立純 CSS3 動畫開關效果；

地址：https://proto.io/freebies/onoff/

• UIkit - 輕量級的模塊化前端框架；

地址：https://getuikit.com/

• Bootstrap - 著名的前端框架；

地址：http://getbootstrap.com/

• Foundation - 著名的前端框架。

地址：http://foundation.zurb.com/

---

有用的產品/連接

• <head> Cheatsheet - 能夠寫入到<head>標籤的內容清單；

地址：

https://github.com/joshbuchea/HEAD

譯者注 - 中文翻譯版

地址：

http://www.css88.com/archives/8052

• Ghost - 基於 Node.js 的簡易博客平臺；

地址：https://ghost.org/

• What runs - 用於網站技術分析的 Chrome 插件；

地址：https://www.whatruns.com/

• Learn anything - 用於分解項目的強大思惟導圖。

地址：

https://learn-anything.xyz/learn-anything

以上就是我我的經常使用的一些前端工具、框架、庫的列表，但願對你們有所幫助。若是你也願意分享一些新的發現，能夠在推特上隨時聯繫我。

• 這個話題到這裏就算是說完了，我本身是名j前端程序員，建了一個千人羣天天分享前端基礎到項目學習資料和學習方法：249244868，歡迎初學和進階中的小夥伴。須要更多精彩內容，敬請關注小編！

轉載於：

英文原文：67 useful tools, libraries and resources for saving your time as a web developer

做者：Ognjen Gatalo