67 個JavaScript和CSS實用工具、庫與資源

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

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

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


JavaScript 庫

  • Particles.js  - 一個用於在網頁上建立漂亮的浮動粒子的 JS 庫;
  • Three.js  - 用於在網頁上建立 3D 物體與空間的 JS 庫;
  • Fullpage.js - 易於實現全屏滾動功能的庫;
  • Typed.js - 實現打字機效果;
  • Waypoints.js - 滾動到元素觸發事件的庫;
  • Highlight.js - 頁面上語法高亮顯示;
  • Chart.js - 純 JS 製做漂亮的圖表;
  • Instantclick - 鼠標懸停預先加載頁面資源,大大加速你的網站響應速度;
  • Chartist - 開源響應式圖表庫;
  • Motio - 基於 sprite 的動畫和平移庫;
  • Animstion - 頁面切換動畫的 jQuery 插件;
  • Barba.js - 建立頁面間流暢平滑的過渡效果;
  • TwentyTwenty - jQuery 視差插件;
  • Vivus.js - 能夠執行 SVG 路徑動畫的輕量級 JS 庫;
  • Wow.js - 頁面滾動時展示動畫效果;
  • Scrolline.js - 頁面滾動時顯示滾動進度的 jQuery 插件;
  • Velocity.js - 用於加速 JavaScript 動畫;
  • Animate on scroll - 頁面滾動時增添元素動畫的小型庫;
  • Handlebars.js - JavaScript 模板引擎;
  • jInvertScroll - 輕量級的 jQuery 水平視差插件;
  • One page scroll - 實現蘋果風格單頁滾動效果的 jQuery 插件;
  • Parallax.js - 輕量級的視差引擎,可以對智能設備的方向做出反應;
  • Typeahead.js - 搜索框自動補全的 JS 庫;
  • Dragdealer.js - 基於拖動的 JavaScript 組件;
  • Bounce.js - 快速建立漂亮的 CSS3 動畫效果;
  • Pagepiling.js - 建立全屏滾動效果;
  • Multiscroll.js - 建立兩列垂直反向滾動效果的 jQuery 插件;
  • Favico.js - 動態圖標插件;
  • Midnight.js - 固定頭部切換效果;
  • Anime.js - JavaScript 動畫引擎;
  • Keycode - 獲取鍵盤按鍵的 JS 鍵碼值;
  • Sortable - 用於拖拽排序的 JavaScript 庫;
  • Flexdatalist - 支持<datalist>的 jQuery 自動完成插件;
  • Slideout.js - 實現滑出式 Web App 導航菜單;
  • Jquerymy - 實時、複雜的雙向數據綁定 jQuery 插件;
  • Cleave.js - 自動格式化表單輸入框的文本內容;
  • Page - 構建單頁應用的小型客戶端路由庫;
  • Selectize.js - 基於 jQuery 的<select> UI 控件,用於建立tag標籤輸入框和 select 下拉框;
  • Nice select - 建立漂亮下拉框的 jQuery 插件;
  • Tether - 使用絕對定位建立兩個互相相關元素的 JS 庫;
  • Shepherd.js - 建立新手引導的 JS 庫;
  • Tooltip - 工具提示插件;
  • Select2 - 基於 jQuery 的替代選擇框;
  • IziToast - 輕量的跨瀏覽器響應式消息通知插件;
  • IziModal - 炫酷的 jQuery 模態窗口插件。

CSS 庫與設計資源


有用的產品/連接

  • <head> Cheatsheet - 能夠寫入到<head>標籤的內容清單;(譯者注:中文翻譯版地址
  • Ghost - 基於 Node.js 的簡易博客平臺;
  • What runs - 用於網站技術分析的 Chrome 插件;
  • Learn anything - 用於分解項目的強大思惟導圖。

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


感謝你的閱讀。若你有所收穫,歡迎點贊與分享。jquery

注:git

  1. 本文版權歸原做者全部,僅用於學習與交流;
  2. 如需轉載譯文,煩請按下方註明出處信息,謝謝!

英文原文:67 useful tools, libraries and resources for saving your time as a web developer
做者:Ognjen Gatalo
譯者:IT程序獅
譯文地址:http://www.jianshu.com/p/c95e400e43b6github

做者:IT程序獅 連接:http://www.jianshu.com/p/c95e400e43b6 來源:簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
相關文章
相關標籤/搜索