3 月值得關注的 15 個 JavaScript 和 CSS 庫

發表於2017-03-18

171318_nNPB_2903254

Tutorialzine 是一個教程資源網站,每月都會發布一些優秀資源,以讓讀者瞭解最新最酷的網路開發趨勢,本月同樣精心挑選了 15 個 JavaScript 和 CSS 供大家參考學習。

Propeller

143615_67KC_2903254

Propeller 是一個基於 Bootstrap 和 Google’s Material Design 語言的 CSS 元件框架。它包含 25 個元件,響應敏捷,具有典型 Material Design 動畫的特點。該專案可以作為 Bootstrap 主題下載,也可作為完整的框架或獨立的元件下載。

BaguetteBox

172638_vl4p_1011777

baguetteBox.js 是一個簡單簡單、易用的 JavaScript lightbox庫,它具有一下特點:

  • 純 JavaScript 實現,無需依賴其他庫
  • 支援觸控式螢幕裝置手勢操作
  • 支援顯示標題(說明)
  • 支援響應式影像
  • 支援CSS3過渡
  • 使用 SVG 按鈕,沒有多餘的檔案下載
  • 啟用 gzip 壓縮後僅 2KB

Whitestorm

144912_nVUL_2903254

Whitestorm 使用 Three.js 引擎開發 3D 網頁應用和遊戲,它為普通的 Three.js 任務提供封裝,使搭建環境,建立物件,新增物件等操作更簡單。官方提供了很好的專案教程,以及與 React 整合的工具。

Animatelo

151122_kbPQ_2903254

Animatelo 是極度流行的 Animate.css 庫的埠,它用 Web Animations API 克隆代替 CSS 轉換。所有原始的 Animate.css 效果都被重建,但現在的 API 是基於 JavaScript 類而不是 CSS 類。該庫輕量且不依賴 jQuery,但在舊版瀏覽器要求 polyfill。

FuseBox

153126_WQRb_2903254

FuseBox 是一個用於 JavaScript 和 CSS 的捆綁載入器,帶有 TypeScript,Sass 等可選的附加元件。它以簡潔與效能為主,為 webpack 提供替代方案。相關教程:Angular 2 + TypeScript, React + Babel, Vue.js, Electron 等。

Yargs

154629_KOlI_2903254

Yargs 框架通過使用 Node.js 構建功能全面的命令列應用,它能輕鬆配置命令,解析多個引數,並設定快捷方式等,還能自動生成幫助選單。

WebGradients

155001_A2FO_2903254

WebGradients 含有多種漂亮的漸變色,可在任何 HTML 頁面輕鬆應用。你可在專案網站快速預覽可用的漸變色,還能一鍵複製 CSS 到你的專案中去。

Sticky-Kit

155515_kGY0_2903254

Sticky-kit 是一個 jQuery 外掛,它允許你在頁面附加元素,設定跟隨滾動的側邊欄效果。

ScrollDir

160007_Mfqt_2903254

ScrollDir 是一個超輕量無依賴的 JavaScript 庫,用以檢查滾動條的移動,並根據你的選擇元素切換 上/下 資料屬性。該專案能給你帶來平滑的使用者體驗。

Svgo

160823_EyL1_2903254

用以優化 SVG 檔案的 Node.js 工具,它將它們從非必要的資訊中剝離出來,如,編輯器後設資料,註釋,隱藏元素等。SVGO 具有基於外掛的架構,你可自由選擇需要刪除和保留的內容。

Store.js

162220_T2Yn_2903254

Store.js 是一個跨瀏覽器的用於高階本地儲存的解決方案,它實現了瀏覽器的本地儲存的 JavaScript 封裝 API,不是通過 Cookie 和 Flash 技術實現,而是使用 localStorage、globalStorage 和 userData 行為。

Snarkdown

162614_SrXJ_2903254

Snarkdown 是一個用 JavaScript 編寫的極簡的 Markdown 解析器。它不是功能最全的,但可能是最容易實現的一款解析器。Snarkdown 只有 1Kb 大小,且只有一種方法,適合速成專案。

Unfetch

164336_Fuz3_2903254

Fetch API 能讓開發者更好地處理非同步請求,它能在大多數瀏覽器上受支援,但 fetch() 方法在 IE 瀏覽器中仍不可用。

Scrollanim

164408_h6MZ_2903254

Scrollanim 是使用 CSS3 + JavaScript 實現的用於建立滾動動畫的庫,應用到元素上後,當此元素出現在瀏覽器可視區域時便會執行對應的動畫。Scrollanim 是 Kissui 的一部分,所以使用 Scrollanim 時需要用到 kissui.css。

Neurojs

164527_g65q_2903254

用於在瀏覽器中進行深度學習 JavaScript 框架,可以通過強化學習進行全棧神經網路。演示:Demo app

相關文章