提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「捲動縮放」(Zoom on Scroll) 效果，也叫 scroll zoom 或 scale on scroll。
區塊停留在畫面中時，元素要隨著捲動從一張小卡片平順放大，直到佔滿整個畫面；往上捲動時再縮回去。
縮放時不要推擠周圍的版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以最終尺寸顯示，不做縮放。相似的動效
Ken Burns Effect (肯·伯恩斯效果)
別稱 Slow pan and zoom, Ken Burns, Kenburns
靜態圖片在框內緩慢縮放並平移。
適用情境
主視覺輪播、背景
在[套用位置]加入「肯·伯恩斯效果」(Ken Burns Effect)，也叫 slow pan and zoom。
每張圖片顯示時只朝一個方向非常緩慢地縮放、漂移，然後交叉淡入到下一張，下一張朝另一個方向移動：平靜而連續。
讓每張圖片在任何時刻都填滿整個框，絕不露出邊緣；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，讓圖片保持靜止。A
在裡面捲動
Scroll-Linked Animation (捲動連動動畫)
別稱 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
動畫進度直接綁定捲動位置，往下捲動時播放，往回捲動時倒轉。
適用情境
敘事型頁面、進度效果
在[套用位置]加入「捲動連動動畫」(Scroll-Linked Animation)，也叫 scroll-driven animation 或 scroll scrub。
動畫要緊跟著捲動位置：往下捲動時正向播放，往上捲動時當場倒轉，本身不帶以時間為基礎的緩動。
把整段動畫對應到一個明確的捲動範圍；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示一個合理的靜態狀態。將滑鼠移到上面
Hover Zoom (懸停縮放)
別稱 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
懸停時圖片在框內放大，有時還會隨游標平移。
適用情境
產品卡片、縮圖
在[套用位置]加入「懸停縮放」(Hover Zoom) 效果，也叫 image zoom on hover 或 zoom-pan。
游標停在圖片上時，圖片在框內緩慢平順地放大，框的尺寸保持不變；游標移開後平順復原。
把圖片裁切在框內，不要溢出版面；鍵盤焦點時也呈現同樣的放大效果。A
B
C
D
在裡面捲動
Parallax (視差捲動)
別稱 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
捲動時各圖層以不同速度移動，營造出景深感。
適用情境
主視覺背景、登陸頁
在[套用位置]加入「視差捲動」(Parallax) 效果，也叫 parallax scrolling 或視差圖層 (parallax layers)。
頁面捲動時，背景圖層要比內容移動得慢，越遠的圖層移動越少，營造含蓄的景深感。
讓效果緊跟捲動位置、沒有延遲，文字放在正常速度的圖層上；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉這個效果。Scroll 中的其他動效
在裡面捲動
Hide on Scroll Header (捲動隱藏頁首)
別稱 Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
向下捲動時頁首隱藏，向上捲動時重新出現。
適用情境
行動裝置和長頁面的導覽列
在[套用位置]加入「捲動隱藏頁首」(Hide on Scroll Header)，也叫 headroom 或自動隱藏導覽列 (auto-hide navbar)。
使用者向下捲動時，頁首要向上滑出畫面；只要向上捲動，就滑回來：快速、流暢，依捲動方向而不是距離來反應。
在頁面最上方時一律顯示，忽略細微的捲動抖動，並且當頁首內有元素取得鍵盤焦點時保持顯示。A
B
C
D
E
在裡面捲動
Horizontal Scroll Section (橫向捲動區塊)
別稱 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
縱向捲動時，一排被固定的面板橫向移動。
適用情境
圖庫、作品集、時間軸
在[套用位置]加入「橫向捲動區塊」(Horizontal Scroll Section)，也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
區塊到達頂端時要固定住，向下捲動時讓其中的一排面板橫向移動，最後一個面板出現後再解除固定。
橫向移動要直接跟著捲動位置，往回捲動時反向移動；在小螢幕上，或如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改成可以正常滑動的橫排。