1. 進場動畫 Entrance Animations
效果說明：當元素進入畫面（viewport）時觸發動畫。
預期行為：捲動到此區塊時，各個方塊會依照設定的動畫類型出現。
使用方式：
預期行為：捲動到此區塊時，各個方塊會依照設定的動畫類型出現。
使用方式：
data-ve-animate="fadeInUp"
AI Prompt 範例：
請幫我做一個「進場動畫」效果：當使用者捲動頁面，元素進入畫面時才觸發動畫。
需求：
- 使用 IntersectionObserver 偵測元素是否進入 viewport
- 支援多種動畫類型：fadeIn（淡入）、fadeInUp（從下往上淡入）、fadeInDown（從上往下淡入）、fadeInLeft（從左淡入）、fadeInRight（從右淡入）、zoomIn（放大淡入）、slideInLeft/Right/Up/Down（從各方向滑入）
- 用 CSS @keyframes 定義動畫，JS 只負責在進入 viewport 時加上 class 觸發
- 支援自訂動畫時間長度（duration）和延遲（delay）
- 動畫預設只播一次，可設定重複播放
- 請用 data attribute（如 data-animate="fadeInUp"）來指定動畫類型，不要用 JS 寫死
fadeIn 系列
fadeIn
淡入
淡入
fadeInUp
從下往上淡入
從下往上淡入
fadeInDown
從上往下淡入
從上往下淡入
fadeInLeft
從左往右淡入
從左往右淡入
fadeInRight
從右往左淡入
從右往左淡入
zoomIn
zoomIn
從小放大淡入
從小放大淡入
slideIn 系列
slideInLeft
從左滑入
從左滑入
slideInRight
從右滑入
從右滑入
slideInUp
從下滑入
從下滑入
slideInDown
從上滑入
從上滑入
2. Stagger 連續動畫
效果說明：同一父層的子元素會依序延遲觸發動畫，產生「波浪」效果。
預期行為：四張卡片會依序間隔 150ms 出現，而非同時出現。
使用方式：父層加
預期行為：四張卡片會依序間隔 150ms 出現，而非同時出現。
使用方式：父層加
data-ve-stagger="150"，子層加 data-ve-animate
AI Prompt 範例：
請幫我做一個「Stagger 連續動畫」效果：同一組的多個元素依序出現，產生波浪般的連鎖動畫。
需求：
- 父層容器設定一個間隔時間（例如 150ms）
- 子元素依照 DOM 順序，每個多延遲一個間隔才觸發動畫
- 例如：第 1 個延遲 0ms、第 2 個 150ms、第 3 個 300ms...
- 搭配進場動畫（如 fadeInUp）使用
- 用 data attribute 設定間隔時間，如 data-stagger="150"
- 適用場景：卡片列表、功能介紹、團隊成員等多欄排列
01
第一個
02
第二個
03
第三個
04
第四個
↓ 繼續往下捲動測試更多效果 ↓
3. 捲動特效 Scroll Effects
效果說明：元素會隨著頁面捲動產生位移、透明度或縮放變化。
預期行為：捲動頁面時，下方區塊會產生視差位移效果（往相反方向移動）。
使用方式：
預期行為：捲動頁面時，下方區塊會產生視差位移效果（往相反方向移動）。
使用方式：
data-ve-scroll="parallax" + data-ve-scroll-speed="0.5"
AI Prompt 範例：
請幫我做一個「捲動視差特效」：元素會隨著頁面捲動產生位移、透明度或縮放的變化。
需求：
- 監聽 scroll 事件（用 requestAnimationFrame 節流）
- 支援三種效果：
1. parallax（視差）：元素隨捲動產生上下位移，移動速度比頁面慢，產生深度感
2. opacity（透明度）：元素在畫面中央時最清晰，靠近邊緣時逐漸透明
3. scale（縮放）：元素在畫面中央時最大，靠近邊緣時縮小
- 用 data attribute 指定效果類型和速度，如 data-scroll="parallax" data-scroll-speed="0.5"
- 速度值 0~1，數字越大效果越明顯
- 行動裝置可選擇性停用（避免效能問題）
Parallax 視差位移
Opacity 透明度變化
捲動透明度
捲動時透明度會隨位置變化
捲動時透明度會隨位置變化
Scale 縮放變化
捲動縮放
捲動時大小會隨位置變化
捲動時大小會隨位置變化
4. 滑鼠特效 Mouse Effects
效果說明：元素會跟隨滑鼠位置產生 3D 傾斜或位移效果。
預期行為：將滑鼠移到卡片上，卡片會朝滑鼠方向傾斜。
使用方式：
注意：觸控裝置上此效果會自動停用。
預期行為：將滑鼠移到卡片上，卡片會朝滑鼠方向傾斜。
使用方式：
data-ve-mouse="tilt"注意：觸控裝置上此效果會自動停用。
AI Prompt 範例：
請幫我做一個「滑鼠互動 3D 傾斜」效果：滑鼠移到卡片上時，卡片會朝滑鼠方向產生 3D 傾斜。
需求：
- 監聽 mousemove 事件，計算滑鼠相對於元素中心的位置
- 用 CSS transform: perspective() rotateX() rotateY() 產生 3D 傾斜
- 滑鼠離開時平滑回到原位（transition ease-out）
- 可設定傾斜強度（intensity），數字越大傾斜角度越大
- 額外加上動態 box-shadow 跟隨傾斜方向，增強立體感
- 另外支援 track（跟隨）模式：內容隨滑鼠位置微幅位移
- 觸控裝置自動停用此效果
- 用 requestAnimationFrame 確保動畫流暢
3D Tilt 傾斜
滑鼠移到這裡
卡片會產生 3D 傾斜
Track 跟隨
滑鼠移到這裡
內容會跟隨滑鼠位移
5. Hover 懸停特效
效果說明：滑鼠懸停時產生放大、陰影、灰階等效果。
預期行為：滑鼠移到圖片上，會產生對應的懸停效果。
使用方式：
預期行為：滑鼠移到圖片上，會產生對應的懸停效果。
使用方式：
data-ve-hover="zoom"
AI Prompt 範例：
請幫我做「Hover 懸停特效」：滑鼠移到元素上時產生視覺回饋效果，純 CSS 實現。
需求（全部用純 CSS :hover 實現，不需要 JS）：
- zoom（放大）：hover 時圖片放大 1.05~1.1 倍，容器 overflow:hidden 裁切溢出部分
- shadow（陰影加深）：hover 時 box-shadow 從淡變深，產生「浮起」的感覺
- grayscale（灰階→彩色）：預設灰階，hover 時恢復彩色
- 所有效果都加上 transition 平滑過渡（約 400ms）
- 用 CSS custom properties 讓放大倍率、過渡時間可自訂
- 適用場景：作品集、產品圖片、團隊照片
Zoom 放大
Shadow 陰影
Grayscale 灰階→彩色
6. Sticky 黏性定位
效果說明：元素會在捲動到特定位置時「黏住」。
預期行為：左側的「Sticky 元素」會在捲動時保持在視窗頂部。
使用方式：
預期行為：左側的「Sticky 元素」會在捲動時保持在視窗頂部。
使用方式：
data-ve-sticky="top" + data-ve-sticky-offset="100"
AI Prompt 範例：
請幫我做一個「Sticky 黏性定位」效果：元素捲動到特定位置時會「黏住」不再跟著捲動。
需求：
- 使用 CSS position: sticky 實現（不需要 JS 監聽 scroll）
- 支援黏在頂部（top）或底部（bottom）
- 可自訂 offset（距離頂部/底部的間距），例如頂部預留 navbar 的高度
- 可自訂 z-index 確保黏住時不被其他元素遮住
- 適用場景：側邊目錄、篩選工具列、CTA 按鈕
- 注意：父層不能有 overflow:hidden，否則 sticky 會失效
Sticky 元素
捲動時我會黏在頂部
這是很長的內容區域...
繼續捲動...
看看左邊的 Sticky 元素...
它應該會黏在視窗頂部
7. Ken Burns 緩動縮放
效果說明：圖片會緩慢地放大並平移，產生紀錄片風格的動態效果。
預期行為：圖片會在 8-12 秒內緩慢放大約 1.4-1.5 倍，同時有輕微的平移。
使用方式：
預期行為：圖片會在 8-12 秒內緩慢放大約 1.4-1.5 倍，同時有輕微的平移。
使用方式：
data-ve-kenburns="true" + data-ve-kenburns-scale="1.5"
AI Prompt 範例：
請幫我做一個「Ken Burns 緩動縮放」效果：圖片緩慢放大並平移，產生紀錄片風格的動態感。
需求：
- 圖片在 8~20 秒內緩慢放大約 1.3~1.5 倍，同時有輕微的隨機平移
- 支援兩個方向：Ken Burns In（從小到大）和 Ken Burns Out（從大到小）
- 用 CSS @keyframes + animation 實現，不需要 JS 逐幀計算
- 容器 overflow:hidden 裁切溢出部分
- 進入 viewport 時才啟動動畫（用 IntersectionObserver）
- 每次載入時隨機產生不同的平移方向，避免每張圖都一樣
- 適用場景：Hero banner、關於我們、產品展示等大圖區塊
Ken Burns In (放大)
Ken Burns Out (縮小)
8. 動態標題 Animated Headlines
效果說明：文字會以打字機、輪播或畫線標記等方式動態呈現。
預期行為：
- 打字機：文字會逐字打出，然後刪除再打下一組
- 輪播：文字會淡入淡出切換
- Highlight：文字底下會有 SVG 畫線效果
預期行為：
- 打字機：文字會逐字打出，然後刪除再打下一組
- 輪播：文字會淡入淡出切換
- Highlight：文字底下會有 SVG 畫線效果
AI Prompt 範例：
請幫我做「動態標題文字」效果，支援以下三種模式：
1. Typewriter（打字機）：文字逐字打出，打完後刪除，再打下一組文字，無限循環
- 可設定打字速度、停頓時間、是否顯示閃爍游標
- 例如：「我們是 [創意|現代|優雅|專業]」輪流打出
2. Rotate（文字輪播）：多組文字淡入淡出切換
- 用 CSS transition opacity + translateY 做上下切換動畫
- 同一時間只顯示一組文字
3. Highlight（畫線標記）：重點文字下方出現 SVG 手繪底線動畫
- 用 SVG path 畫波浪底線
- 用 stroke-dasharray + stroke-dashoffset 做「畫出」的動畫效果
- 進入 viewport 時觸發畫線動畫
所有模式都要在元素進入 viewport 時才觸發（用 IntersectionObserver）。
Typewriter 打字機
我們是
Rotate 文字輪播
專精於
Highlight 畫線標記
打造 完美體驗 的最佳選擇
9. 進度條 Progress Bar
效果說明：進入畫面時，進度條會從 0% 動畫填充到設定的百分比。
預期行為：捲動到此區塊時，進度條會動態增長。
使用方式：
預期行為：捲動到此區塊時，進度條會動態增長。
使用方式：
data-ve-progress-value="75"
AI Prompt 範例：
請幫我做「進度條動畫」效果：水平進度條在進入畫面時從 0% 動態填充到目標值。
需求：
- 進度條包含：標籤文字、百分比數字、軌道（背景）、填充條
- 進入 viewport 時觸發填充動畫（用 IntersectionObserver）
- 填充動畫用 CSS transition width 實現，約 1.5 秒，easing 用 ease-out
- 可自訂：目標百分比、進度條顏色、背景色、高度、圓角
- 可選：條紋動畫效果（用 CSS linear-gradient 45deg + background-position 動畫）
- 同頁面放多條進度條，每條設不同顏色和百分比
- 適用場景：技能展示、專案進度、統計數據
10. 圓形進度 Circular Progress
效果說明：以 SVG 圓環方式呈現進度，進入畫面時會動畫填充。
預期行為：捲動到此區塊時，圓環會從 0% 動畫填充到設定百分比。
使用方式：
預期行為：捲動到此區塊時，圓環會從 0% 動畫填充到設定百分比。
使用方式：
data-ve-cprogress-value="85"
AI Prompt 範例：
請幫我做「圓形進度環」效果：用 SVG 圓環顯示百分比，進入畫面時動態填充。
需求：
- 用 SVG circle 畫兩個同心圓：底層（灰色軌道）+ 上層（彩色填充）
- 填充動畫用 stroke-dasharray + stroke-dashoffset + CSS transition 實現
- SVG 旋轉 -90deg 讓起點從 12 點鐘方向開始
- 圓環中央顯示百分比數字，數字也要同步從 0 遞增到目標值（用 requestAnimationFrame）
- 進入 viewport 時觸發（用 IntersectionObserver）
- 可自訂：大小、線條粗細、顏色、動畫時間
- JS 動態產生 SVG，不需手寫 SVG 標籤
- 適用場景：客戶滿意度、達成率、技能等級
客戶滿意度
專案達成率
成長幅度
11. 背景輪播 Background Slideshow
效果說明：多張背景圖片自動輪播，可搭配 Ken Burns 效果。
預期行為：背景圖片會每隔 5 秒自動切換，淡入淡出過渡。
使用方式：
預期行為：背景圖片會每隔 5 秒自動切換，淡入淡出過渡。
使用方式：
data-ve-slideshow-images="img1.jpg,img2.jpg"
AI Prompt 範例：
請幫我做「背景圖片輪播」效果：多張背景圖自動切換，可搭配 Ken Burns 緩動效果。
需求：
- 多張圖片堆疊在同一個容器內，用 position:absolute 重疊
- 每隔 N 秒（預設 5 秒）自動切換到下一張，用 opacity 0→1 淡入淡出
- 可選搭配 Ken Burns 效果：每張圖片在顯示期間緩慢放大平移
- 支援半透明遮罩層（overlay），讓上方文字更容易閱讀
- 圖片 URL 用 data attribute 傳入，逗號分隔
- JS 動態建立 slide 元素，不需手寫每張圖的 HTML
- 可自訂：切換間隔、過渡速度、遮罩顏色、最小高度
- 適用場景：Hero 區塊、全寬 banner、Landing page 首屏
12. Lottie 動畫
效果說明：嵌入 Lottie JSON 動畫，支援 SVG/Canvas 渲染。
預期行為：下方會顯示一個循環播放的 Lottie 動畫。
使用方式：
注意：需要有效的 Lottie JSON URL 才能顯示動畫。
預期行為：下方會顯示一個循環播放的 Lottie 動畫。
使用方式：
data-ve-lottie-src="animation.json"注意：需要有效的 Lottie JSON URL 才能顯示動畫。
AI Prompt 範例：
請幫我做「Lottie 動畫嵌入」功能：在網頁中嵌入 Lottie JSON 動畫檔。
需求：
- 動態載入 lottie-web 函式庫（CDN），只在頁面有 Lottie 元素時才載入
- 用 lottie.loadAnimation() 初始化動畫
- 支援設定：循環播放、自動播放、播放速度、渲染模式（svg/canvas）
- 支援三種觸發方式：
1. viewport：進入畫面時自動播放，離開時暫停（省效能）
2. hover：滑鼠移入播放，移出暫停
3. load：頁面載入後立即播放
- Lottie JSON 的 URL 用 data attribute 傳入
- 可自訂容器寬高
- Lottie JSON 動畫檔可以從 LottieFiles.com 免費下載
如果看到動畫表示 Lottie 正常運作
13. 數字計數器 Number Counter
效果說明：數字會從 0 動畫增長到設定的目標值。
預期行為：捲動到此區塊時，數字會快速跳動增長。
使用方式：
預期行為：捲動到此區塊時，數字會快速跳動增長。
使用方式：
data-module="number-counter"
AI Prompt 範例：
請幫我做「數字計數器」效果：數字從 0 快速跳動遞增到目標值。
需求：
- 進入 viewport 時觸發（用 IntersectionObserver）
- 用 requestAnimationFrame 做數字遞增動畫，約 2 秒完成
- 支援前綴和後綴，例如「$50M」（前綴 $、後綴 M）、「98%」（後綴 %）
- 數字遞增速度：先快後慢（ease-out 效果），不要線性遞增
- 可自訂目標數字和動畫時間
- 一排放多個計數器，各自獨立計數
- 適用場景：公司數據展示（完成專案數、客戶滿意度、營收總額等）
0
完成專案
0
客戶滿意度
0
營收總額
0
全天候服務
14. 圖片比較 Before/After Slider
效果說明：拖曳滑桿比較兩張圖片的前後差異。
預期行為：拖曳中間的滑桿可以左右滑動，顯示 Before/After 對比。
使用方式：
預期行為：拖曳中間的滑桿可以左右滑動，顯示 Before/After 對比。
使用方式：
data-module="image-comparison"
AI Prompt 範例：
請幫我做「圖片前後比較滑桿」效果：拖曳滑桿左右滑動，比較兩張圖片的 Before/After。
需求：
- 兩張圖片重疊，上層圖片用 clip-path 或 overflow + width 裁切
- 中間有一條垂直分隔線 + 圓形把手，把手上顯示「◄ ►」箭頭
- 支援滑鼠拖曳和觸控拖曳（mousedown/mousemove/mouseup + touchstart/touchmove/touchend）
- 拖曳時分隔線跟著移動，左右兩張圖片同步裁切
- 預設位置在 50%（中間）
- 把手要有 hover 效果（放大或變色）
- 適用場景：修圖前後對比、網站改版前後、產品升級對比
拖曳滑桿比較 Before / After
15. 動畫按鈕 Animated Buttons
效果說明：按鈕搭配進場動畫 + Stagger，產生連續出現效果。
預期行為：三個按鈕會依序間隔 150ms 從下往上淡入出現。
使用方式：按鈕加
預期行為：三個按鈕會依序間隔 150ms 從下往上淡入出現。
使用方式：按鈕加
data-ve-animate="fadeInUp"，父層加 data-ve-stagger="150"
AI Prompt 範例：
請幫我做「按鈕連續進場動畫」效果：多個按鈕依序從下往上淡入出現。
需求：
- 結合進場動畫（fadeInUp）+ Stagger（依序延遲）兩個效果
- 父層容器設定 stagger 間隔（如 150ms）
- 每個按鈕依序出現，產生「一個接一個冒出來」的視覺效果
- 按鈕本身可以是任何樣式（實心、外框、不同顏色）
- 進入 viewport 時觸發
- 這不是一個獨立的特效模組，而是展示如何組合使用「進場動畫」+「Stagger」
- 適用場景：CTA 區塊、定價方案按鈕、功能列表
重新載入頁面可以再次觸發所有進場動畫