在這篇文章中,我不會與大家談論大型的前端框架,如 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 - 基於谷歌 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 - 用於分解項目的強大思維導圖。
以上就是我個人常用的一些前端工具、框架、庫的列表,希望對大家有所幫助。如果你也願意分享一些新的發現,可以在推特上隨時聯繫我。
感謝你的閱讀。若你有所收穫,歡迎點贊與分享。
注:
本文版權歸原作者所有,僅用於學習與交流;
如需轉載譯文,煩請按下方註明出處信息,謝謝!