67 個拯救前端開發者的工具、庫和資源

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   一個基於動畫和平移的雪碧圖庫

Animstion   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   框架

有用的產品/連接

head   能夠寫在head中的全部標籤

Ghost   基於 Node.js 的博客平臺

What runs   一個用於網站技術分析的 Chrome 插件

Learn anything   一個強大的用於分析某個主題的思惟導圖