標籤:too als effect strong har jquery art ons 項目
在這篇文章中,我不會與大家談論大型的前端架構,如 React、Angular、Vue 等,也沒有涉及那些流行的代碼編輯器,如 Atom、VS Code、Sublime,我只想與大家分享一個有助於提升開發人員效率的工具列表合集。
或許,一些朋友已經對文中的一些工具有所瞭解,但如果你發現了一些對你有協助的新工具,那麼,我將倍感欣慰。
由於這個列表中包含了不同類別的資源,為了便於大家查看,我已將其進行了重新的分類,來 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 庫與設計資源
- Animate.css? - 強大的 CSS3 動畫庫;
- Flat UI Colors - 漂亮的扁平化配色;
- Material Design Lite - 基於Google Material Design 的前端架構;
- Colorrrs? - 隨機顏色產生器;
- Section separators - CSS 地區分割;
- Topcoat - 專註為簡潔、快速的 Web 應用程式提供 CSS 開發的工具;
- Create Ken Burns Effect - 利用 CSS3 實現的 Ken burns 特效;
- DynCSS - 用於分析 CSS
-dyn-
屬性規則,並使其具備動態屬性;
- Magic animations - 具備特殊動效的 CSS3 動畫;
- CSSpin - 豐富的 CSS 載入動畫;
- Feather icons - 簡單、漂亮的開源表徵圖庫;
- Ion icons - 專為 Ionic 架構設計的表徵圖字型;
- Font Awesome - 可縮放的向量表徵圖字型檔;
- Font Generator - 線上字型產生器;
- On/Off FlipSwitch - 線上建立純 CSS3 動畫開關效果;
- UIkit - 輕量級的模組化前端架構;
- Bootstrap - 著名的前端架構;
- Foundation - 著名的前端架構。
有用的產品/連結
- <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
Ognjen Gatalo
譯者:IT程式獅
譯文地址:http://www.jianshu.com/p/c95e400e43b6
IT程式獅
連結:http://www.jianshu.com/p/c95e400e43b6
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
67 個JavaScript和CSS工具 + 生產力、庫與資源