滾動效果
視差深度卡片
滾動時多層卡片以不同速度位移，形成景深視差。
內建滾動容器，滾動時多層卡片以不同係數位移、縮放與模糊——遠層緩慢且帶景深模糊、近層快速而清晰，形成鏡頭推拉般的視差效果，適合作品展示或功能亮點區塊。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add parallax-depth-cardsPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
320
編輯中的呼叫預設屬性
<ParallaxDepthCards/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/parallax-depth-cards.json或在 components.json 設定 registries 後，改用 @webberui/parallax-depth-cards 安裝。
使用
import { ParallaxDepthCards } from "@/components/ui/parallax-depth-cards";
<ParallaxDepthCards
height={400}
intensity={1}
layers={[
{ icon: "🏔️", title: "遠景", description: "移動最慢、帶景深模糊" },
{ icon: "🌲", title: "中景", description: "以中等速度跟隨滾動" },
{ icon: "✨", title: "近景", description: "移動最快、始終清晰" },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
layers | DepthCardLayer[] | — | 卡片層資料，索引越大越靠近觀者、視差位移越快 |
intensity | number | 1 | 視差強度（建議 0.4–2），同時影響位移距離與模糊差異 |
height | number | 420 | 內建滾動容器的高度（px） |
className | string | — | 透傳到最外層滾動容器 |
DepthCardLayer
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | — | 卡片標題 |
description | string | — | 卡片說明文字，顯示於標題下方 |
icon | React.ReactNode | — | 卡片左上角的圖示，可傳 emoji 字串或任意 ReactNode |
gradientClassName | string | 內建配色 | 覆寫卡片背景漸層的 Tailwind class |
可及性
- 使用者系統開啟「減少動態效果」時，卡片以靜態堆疊呈現，不套用滾動位移、縮放與模糊
- 卡片標題與說明為真實文字節點，輔助科技可正常朗讀；純裝飾的光暈與提示標記為
aria-hidden - 滾動容器帶有
role="region"與aria-label，並使用overscroll-contain避免滾動穿透外層頁面