67個拯救web開發者的工具、庫和資源!
在本文中,我不會去談 React、Angular、Vue 等等這些大的前端框架,也不會談 Atom、VS code、Sublime 等等這些已經很出名的代碼編輯器,我只是想簡單的分享一套我認為有助於提升開發者工作流的工具集。
這套工具集中的大部分你可能見過,也可能沒見過,如果有哪個讓你眼前一亮,那麽我的分享就很值了。
這個列表包含許多種類的資源,所以這裏我將它們分組整理。
Javascript 庫
Particles.js—一個用來在 web 中創建炫酷的浮動粒子的庫
Three.js—一個用來在 web 中創建 3d 物體和 3d 空間的庫
Fullpage.js—快速實現全屏滾動特性
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—一個強大的用於分析某個主題的思維導圖
我的QQ:1927955896 歡迎來討論
67個拯救web開發者的工具、庫和資源!