前端你須要的各類開源庫

Javascript 庫

• vue-cropper vue圖片裁剪上傳插件
• layabox 與白鷺齊名的h5遊戲動畫庫
• Animatron HTML5 視頻編輯平臺。video做爲 HTML5 的重要特性，不少開發者卻仍然搞不清它的發佈形式和加載策略，那麼在 Animatron 上你能夠快速編輯 HTML5 環境下的視頻，利用它的自帶動畫素材庫完成有趣的扁平風格卡通動效組件或者視頻
• Google Web Designer 以視覺設計爲核心的代碼可擴展工具。用來作佈局和設備終端適配測試比較方便，界面頗有 AE 的風格
• HYPE3 專業級本地 HTML5 設計軟件。很早之前就向你們推薦過，基於平行時間線邏輯的 HTML5 可視化設計開發平臺，你甚至能夠用它作一個脫機的交互演示文稿 Ember Burger Menu 漢堡式菜單樣式生成器。愈來愈多的站點在自適時採用漢堡式摺疊菜單，而這個網站就能夠快速更改這種菜單的具體屬性，並引用到你本身的項目中去▼ offirgolan.github.io/ember-burge…
• Anime CSS/JS 動畫分享庫。像一個在線小商城，有不少開發者本身上傳的千奇百怪的 CSS 或者 JS 動畫能夠參考和引用
• countUp.js 一個簡潔的計數器跳動 js 組件，能夠用於在 WEB 完成諸如訪問量、分數展現等和數字有關的計數動畫
• SmoothState.js 加載優化。對於首頁的啓動、回跳進行加載動畫優化，這對移動端 H5 營銷來講尤爲重要
• mo.jsCSS 動效庫。這是一個正在不斷開發完善的 庫，雖然目前還未開放路徑、彈性等控件，可是它的 CSS 形狀庫已經很是使人驚喜
• iTyped打字動畫。不須要依賴 jQuery 的打字機效果動畫，能夠調節速度和大小的小巧工具
• animsition.js
• granim.js一個騷氣的 js 庫。用於快速建立 WEB 內的使人歎爲觀止的漸變更畫
• create.js 一套完整的js動畫庫，作2d的動畫他就足夠了，包括 聲音加載庫：sound.js，預加載庫 ：preload.js，canvas動畫庫：ease.js，補間動畫庫：tween.js
• greenscok.js 是國外的一套功能強大的動畫庫，包含大量插件，文檔優雅，可視化操做，代碼邏輯簡潔，支持動畫的回放，支持dom動畫，svg動畫，canvas，webgl，大量的demo庫讓你驚豔。 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 — 框架

好用的產品

• waitanimate動效速度測試平臺。當咱們在 WEB 中構建了一些迷你的 PNG 或者 SVG 圖標動畫時，如何快速肯定動畫的延時、間隔、速度關係？反覆調整和預覽着實令工程師頭疼。因此這個網站着力解決關鍵幀百分比的快速計算問題
• cheatsheet — 能夠寫在中的全部標籤
• Ghost — 基於 Node.js 的博客平臺
• What runs — 一個用於網站技術分析的 Chrome 插件
• Learn anything — 一個強大的用於分析某個主題的思惟導圖