前端你需要的各種開源庫

weixin_33797791發表於2018-12-02
前端

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 庫 / 設計相關

好用的產品

  • waitanimate動效速度測試平臺。當我們在 WEB 中構建了一些迷你的 PNG 或者 SVG 圖示動畫時，如何快速確定動畫的延時、間隔、速度關係？反覆調整和預覽著實令工程師頭疼。所以這個網站著力解決關鍵幀百分比的快速計算問題
  • cheatsheet — 可以寫在中的所有標籤
  • Ghost — 基於 Node.js 的部落格平臺
  • What runs — 一個用於網站技術分析的 Chrome 外掛
  • Learn anything — 一個強大的用於分析某個主題的思維導圖

相關文章