節約 Web 開發時間的 67 個工具、庫和資源

weixin_34116110發表於2017-10-12
原文網址 : https://blog.csdn.net/weixin_34116110/article/details/86970328
Web

簡評：作者沒有討論大型的前端框架如 React，Angular，Vue 等等，也沒有討論流行的程式碼編輯器如 Atom，VS Code，Sublime 等等，而是羅列出了一些加速開發者工作流的工具、資源和庫。

JavaScript 庫

  • Particles.js  —— 在網頁上建立炫酷的漂浮例子的庫，在網站首頁比較常見。

  • Three.js —— 在網頁上建立 3D 物件和空間的庫，常用於網頁遊戲。

  • Fullpage.js —— 輕鬆建立全屏滾動的網頁。

  • Typed.js —— 實現打字機的效果。

  • Waypoints.js  —— 實現滾動一個元素觸發一個函式的最簡單的方式。

  • Highlight.js —— 自動檢測語言及高亮語法。

  • Chart.js —— 純 JavaScript 實現炫酷圖表。

  • Instantclick —— 大大提升網頁載入效率，在滑鼠懸停時預載入資源。

  • Chartist —— 另一個圖表庫。

  • Motio —— 實現基於 sprite 的動畫和平移效果的庫。

  • Animstion —— css 動畫頁面切換效果的 JQuery 外掛

  • Barba.js —— 流暢和平滑的頁面過渡效果。

  • TwentyTwenty —— 一個視覺差異工具，突出兩個影象之間的差異。

  • Vivus.js —— 用於在 SVG 上繪製動畫的庫。

  • Wow.js —— 滾動時顯示動畫。

  • Scrolline.js —— 顯示頁面的滾動進度條。

  • Velocity.js —— 快速、平滑的 JavaScript 動畫。

  • Animate on scroll —— 另一個滾動顯示動畫的庫。

  • Handlebars.js —— JavaScript 模版。

  • jInvertScroll —— 輕量級的水平視差外掛。

  • One page scroll —— 與 FullPage 類似。

  • Parallax.js —— 視覺引擎，對智慧裝置的方向做出反應。

  • Typeahead.js —— 自動匹配搜尋。

  • Dragdealer.js —— 相當酷的實現拖動效果的庫。

  • Bounce.js  —— 建立炫酷的 CSS3 動畫。

  • Pagepiling.js —— 又一個 one page scroll.

  • Multiscroll.js  —— 實現多列滾動皮膚效果。

  • Favico.js —— 動態圖示。

  • Midnight.js  —— 無縫切換固定標題。

  • Anime.js  —— 動畫庫。

  • Keycode —— 獲得按鍵的 JavaScript 鍵碼。

  • Sortable —— 拖動排序控制元件。

  • Flexdatalist —— 輸入補全。

  • Slideout.js  —— 在網頁上實現抽屜效果的側邊導航欄。

  • Jquerymy —— 使用 jquery 的兩種資料繫結方式。

  • Cleave.js  —— 格式化輸入內容。

  • Page —— 小型客戶端路由庫。

  • Selectize.js —— 用於新增標籤的選擇框。

  • Nice select —— 用於建立奈斯型選擇框。

  • Tether —— 可以有效地固定絕對定位的元素。

  • Shepherd.js —— 實現指導使用者使用應用的效果。

  • Tooltip —— 提示資訊。

  • Select2 —— 豐富的自定義選擇框。

  • IziToast —— 容易實現的 JS 通知。

  • IziModal —— 容易實現的 JS 彈窗。

CSS 庫／設計類

有用的產品／連結

  • <head> cheatsheet —— 可以進入 <head> 標籤的所有內容列表。

  • Ghost —— 基於 node.js 的簡單部落格平臺。

  • What runs —— 發現一個網站使用什麼技術的 Chrome 外掛。

  • Learn anything  —— 以思維導圖形式提供各種學習資源，你值得擁有。

英文原文：67 useful tools, libraries and resources for saving your time as a web developer
推薦閱讀：
StackBlitz - 針對 Web 開發者的線上 IDE
55 個頂尖 Web 設計與開發網站
100+ 值得收藏的 Web 開發資源

相關文章