網頁設計資源彙整

背景視差特效工具，特色是可以支援影片與 Youtube 的背影播放與視差

功能簡單但強大的視差捲動外掛，不只背景，還可以支援 foreground div 的視差

功能簡單但強大的視差捲動外掛，不只背景，還可以支援 foreground div 的視差

用來製作滑鼠移動到卡片上時，能夠 3D 微調方向的外掛

一個可以用來作滾動翻頁與動態特效的JS套件

專門做整頁向下切換翻頁的 JS 套件

也是一個滾動切換外掛，但是他的特色是左右會用不同的方向翻進來，創造出非常有趣的效果

Parallax.js 也是一個視差外掛，但他不是用在滾動上，他的特色是根據滑鼠移動來位移 HTML 元素，可以創造出很有趣的互動效果。

Headroom 可以做出往下滑就隱藏 選單/header ，往上滑就重新出現的效果，類似手機上常見的介面

可做出如同星空般的視差效果

另一個可做出如同星空般的視差效果

也是一款滾動特效外掛，特點是完全跟著滾動的數值更新位置，且

GSAP 是 GreenSock Animation Platform 的簡稱，是一套專門處理動畫與特效的 JS 套件。功能非常強大，是很多特效網站採用的工具。

Waypoints 是一個方便的外掛，可以在滾動到特定元素時，執行你需要的自定程式碼。用在滾動後執行任何動作非常方便。

WOW.js 非常熱門，滾動到特定元素後會出現在頁面上，就這麼簡單。通常會搭配 animate.css 製作滑入特效

非常有名的動畫CSS工具，只要用類似 fadeInUp 這樣的 CSS class 就能製作各種動畫入場或離場特效，通常會搭配 wow.js 使用。

可以在頁面與圖片尚未完全載入時，預先顯示一個全頁讀取畫面與進度的工具。

很多很多的純 CSS loading 特效，適合用在全頁覆蓋或小區域讀取

也是一個建立全頁讀取覆蓋的套件，可以自定中間的內容 HTML，搭配 SpinKit 可以做出非常美觀的讀取畫面

一系列純CSS非常美觀的 loading icon，採用幾何造型，充滿現代感，適合與全頁讀取搭配使用或放置在小空間中。

全頁讀取覆蓋畫面，採用 Load Awesome 的 icon

功能極為強大的 2D WebGL 繪圖引擎，可以用來作多種動態特效與動畫。

Lottie.js 是 Airbnb 出品的工具，可以把 Adobe After Effect 製作的動畫轉成 HTML5 動畫。

Three.js 是功能極為強大的 JS 3D 引擎，可以用來創建多種 3D 特效，甚至載入 3D 模型在 Web 上顯示。是目前的主流 3D 函式庫。

A-Frame 是一套在HTML上實現3D/AR/VR的工具，可以支援 Quest, Rift, WMR, SteamVR, mobile, desktop 等裝置。

p5.js 也是一個 Canvas 繪圖工具，將許多繪圖、數學、物理模擬等函式封裝好讓我們可以直接使用，如此一來我們可以在享受 Canvas 繪圖的同時不用費心思處理瑣碎的工具！

Konva.js 是一個強大的 canvas 繪圖函式庫，主要功能是讓你創建 Canvas 上的繪圖版、圖層、拖拉工具等，適合用來作 Web 繪圖軟體工具的底層。

Gridster.js 可以建立出一個類似 Windows 動態磚概念的格狀版面，支援手動拖拉大小與位置交換，適合用在設計 UI 上。類似的套件還有 vue-grid-layout 與 react-grid-layout。