67個拯救web開發者的工具、庫和資源！——愛創課堂
劃重點css
在本文中，我不會去談 React、Angular、Vue 等等這些大的前端框架，也不會談 Atom、VS code、Sublime 等等這些已經很出名的代碼編輯器，我只是想簡單的分享一套我認爲有助於提高開發者工做流的工具集。前端
這套工具集中的大部分你可能見過，也可能沒見過，若是有哪一個讓你眼前一亮，那麼個人分享就很值了。web
這個列表包含許多種類的資源，因此這裏我將它們分組整理。前端框架
Javascript 庫
Particles.js — 一個用來在 web 中建立炫酷的浮動粒子的庫框架
Three.js — 一個用來在 web 中建立 3d 物體和 3d 空間的庫編輯器
Fullpage.js— 快速實現全屏滾動特性ide
Typed.js — 打字機效果工具
Waypoints.js — 滾動到某個元素位置時觸發一個功能字體
Highlight.js — web 語法高亮動畫
Chart.js — 使用 JavaScript 建立漂亮的圖表
Instantclick — 可以明顯加速網站加載時間，鼠標 hover 時預加載資源
Chartist — 另外一個圖表庫
Motio — 一個基於動畫和平移的雪碧圖庫
Animsition — CSS 實現動畫過渡的 jQuery 插件
Barba.js — 流式頁面過渡
TwentyTwenty — 一個對比圖片的可視化 diff 工具
Vivus.js — 在 SVG 上繪製動畫
Wow.js — 滾動時展示動畫
Scrolline.js — 頁面滾動時顯示滾動進度
Velocity.js — 快速流暢的 JavaScript 動畫
Animate on scroll — 漂亮的頁面滾動元素動畫
Handlebars.js — Javascript 模板
jInvertScroll — 視差滾動
One page scroll — 又一個頁面滾動庫
Parallax.js — 對智能設備方向變化作出響應的視差引擎
Typeahead.js — 搜索補全
Dragdealer.js — 炫酷拖拽
Bounce.js — 建立炫酷的 CSS3 動畫
Pagepiling.js — 全屏滾動
Multiscroll.js — 兩列垂直反向滾動
Favico.js — 動態 favicon
Midnight.js — 固定頭部切換效果
Anime.js — 動畫庫
Keycode — 獲取鍵盤按鍵的 JavaScript keycode
Sortable — 拖拽插件
Flexdatalist — 自動補全
Slideout.js — 移動應用側滑導航
Jquerymy — 使用 jQuery 實現雙向數據綁定
Cleave.js — 實時格式化輸入內容
Page — 客戶端單頁應用路由
Selectize.js — 用來添加 tag 的 Hybrid 選擇框
Nice select — 建立漂亮的選擇框的 jQuery 庫
Tether — 使用固定定位來建立相關元素
Shepherd.js — 爲應用建立新手引導
Tooltip — tooltip 提示框
Select2 — Jquery 選擇框插件
IziToast — 通知彈窗實現
IziModal — 模態框實現
CSS 庫 / 設計相關
Animate.css — 動畫庫
Flat UI Colors — 扁平化設計配色
Material design lite— 基於 Google material design 的框架
Colorrrs — 隨機顏色生成器
Section separators — CSS 實現區域分割
Topcoat — 框架
Create ken burns effect — 使用 CSS3 動畫實現 Ken burns 特效
DynCSS — 給 CSS 添加 function，動態化 CSS
Magic animations — CSS3 實現動畫特效
CSSpin — css spinners 合集
Feather icons — Icon 集合
Ion icons — Icon 集合
Font awesome — Icon 集合
Font generator — 組合多個字體建立混合字體
On/Off switch — 使用 CSS 建立 on/off 開關、radio 按鈕
UI Kit — 框架
Bootstrap — 框架
Foundation — 框架
有用的產品/連接
cheatsheet — 能夠寫在<head>中的全部標籤
Ghost — 基於 Node.js 的博客平臺
What runs — 一個用於網站技術分析的 Chrome 插件
Learn anything — 一個強大的用於分析某個主題的思惟導圖
- 1. 67 個拯救前端開發者的工具、庫和資源
- 2. 67 個前端開發者的工具、庫和資源
- 3. React.js: web開發者的14個工具和資源
- 4. 給 Web 開發人員推薦的文檔生成工具——愛創課堂
- 5. 爲 Web 開發者準備的 UI 設計工具和資源
- 6. 67 個JavaScript和CSS實用工具、庫與資源
- 7. 愛創課堂分享「15 個有趣的 JS 和 CSS 庫」
- 8. 愛了，愛了，一款拯救直男的開源神器！
- 9. 愛創課堂vue視頻資料
- 10. web前端開發工程師必須知道的幾點——愛創課堂
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • jQuery Mobile 工具欄 - jQuery Mobile 教程
- • PHP開發工具
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。