Before-After Slider (前後對比滑桿)
別稱 Image comparison slider, Compare slider
拖曳分隔線，一側顯示一張圖片，另一側顯示另一張。
適用情境
照片修圖、產品比較
變體
- horizontal
- vertical
- hover-controlled
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「前後對比滑桿」(Before-After Slider)，也叫 image comparison slider 或 compare slider。
兩張圖片上下疊放，拖曳一條垂直分隔線時，一張露出更多、另一張露出更少；分隔線緊跟游標，沒有延遲。
分隔線一開始位於中間，並支援觸控和方向鍵操作。相似的動效
在裡面捲動
Image Reveal Wipe (圖片擦除顯現)
別稱 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
遮罩收縮或遮色片邊緣擴展，逐漸露出圖片。
適用情境
捲動時出現的編輯類配圖
在[套用位置]加入「圖片擦除顯現」(Image Reveal Wipe)，也叫 mask reveal 或 clip-path reveal。
圖片捲動進入畫面時，遮罩從一側擦除，隨捲動進度平順地露出圖片，並在圖片離開畫面之前早早完全展開。
預留圖片所占空間，避免版面跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，直接完整顯示圖片。ABCDEFGHIJKL
移動指標試試
Text Reveal Card (文字顯現卡片)
別稱 Spotlight Text Reveal
在卡片上移動游標時，遮罩邊緣或聚光燈下隱藏的文字隨之顯露。
適用情境
功能卡片
在[套用位置]加入「文字顯現卡片」(Text Reveal Card) 效果，也叫聚光燈文字顯現 (spotlight text reveal)。
游標在卡片上移動時，一條垂直邊緣緊緊跟隨，在一側露出隱藏的文字：流暢、直接，沒有延遲。
在沒有游標可跟隨的觸控裝置上，讓拖曳或輕觸也能顯示隱藏文字，並讓隱藏文字可被螢幕閱讀器讀取。A
將滑鼠移到上面
SVG Mask Reveal (SVG 遮罩顯現)
別稱 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形狀劃過或跟隨游標，露出下方的內容。
適用情境
圖片和內容顯現
在[套用位置]加入「SVG 遮罩顯現」(SVG Mask Reveal) 懸停效果，也叫 clip-path reveal 或聚光燈遮罩 (spotlight mask)。
游標移上去時，圓形遮罩從中心擴大，露出下方的內容；游標移開後再收合：流暢且偏快。
兩個圖層保持完全相同的尺寸，避免任何位移；鍵盤聚焦和點按時也顯示同樣的顯現效果。A
拖曳試試
Drag (拖曳)
別稱 Draggable, Drag constraints
拖曳時元素跟著游標移動，並可以限制在某個區域或某條軸上。
適用情境
滑桿、可排序卡片
在[套用位置]加入「拖曳」(Drag) 互動，也叫可拖曳 (draggable) 或拖曳限制 (drag constraints)。
拖曳時元素直接跟著游標，在允許區域的邊緣停住，放開後帶一點回彈地彈回靜止位置。
觸控和滑鼠都要能用，拖曳時下方的頁面不能跟著捲動，並提供用鍵盤移動它的方式。Image & Media 中的其他動效
將滑鼠移到上面
Hover Zoom (懸停縮放)
別稱 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
懸停時圖片在框內放大，有時還會隨游標平移。
適用情境
產品卡片、縮圖
在[套用位置]加入「懸停縮放」(Hover Zoom) 效果，也叫 image zoom on hover 或 zoom-pan。
游標停在圖片上時，圖片在框內緩慢平順地放大，框的尺寸保持不變；游標移開後平順復原。
把圖片裁切在框內，不要溢出版面；鍵盤焦點時也呈現同樣的放大效果。Ken Burns Effect (肯·伯恩斯效果)
別稱 Slow pan and zoom, Ken Burns, Kenburns
靜態圖片在框內緩慢縮放並平移。
適用情境
主視覺輪播、背景
在[套用位置]加入「肯·伯恩斯效果」(Ken Burns Effect)，也叫 slow pan and zoom。
每張圖片顯示時只朝一個方向非常緩慢地縮放、漂移，然後交叉淡入到下一張，下一張朝另一個方向移動：平靜而連續。
讓每張圖片在任何時刻都填滿整個框，絕不露出邊緣；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，讓圖片保持靜止。