提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「捲動文字跑馬燈」(Text Marquee on Scroll)，也叫 scroll text marquee 或 scroll velocity text。
頁面往下捲動時，大字級的文字列橫向滑動，相鄰的列朝相反方向移動；往上捲動時再滑回來。
讓移動綁定捲動位置，別讓長文字列產生水平捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。相似的動效
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (跑馬燈)
別稱 Ticker, Infinite Scroll Text
一行內容橫向無縫地無限循環捲動。
適用情境
Logo 牆、公告列、關鍵字橫幅和新聞跑馬燈
在[套用位置]加入「跑馬燈」(Marquee)，也就是水平方向無限捲動的橫條，也叫 ticker。
內容由右往左以緩慢、等速的速度捲動，無縫循環，銜接處不能出現跳動。
滑鼠移上去時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止捲動。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)，就改成可以正常滑動的橫排。ABCABCABCABCABC
在裡面捲動
Text Repetition (文字重複)
別稱 Repeated Text Scroll
一個詞被複製成許多層疊的副本，隨捲動錯開移動。
適用情境
作品集標題
在[套用位置]加入「文字重複」(Text Repetition) 效果，也叫 repeated text scroll。
把一個詞複製成一疊更淡的描邊副本，隨使用者捲動從它身後展開，往上捲動時再收攏回去。
讓展開程度直接綁定捲動位置，並對螢幕閱讀器隱藏多餘的副本，讓這個詞只被讀一次。ABCABCABC
在裡面捲動
Sliced Text (切片文字)
別稱 On-Scroll Sliced Text
標題被切成若干水平切片，頁面捲動時切片彼此錯開、橫向移動。
適用情境
編輯風格的首屏
在[套用位置]加入「切片文字」(Sliced Text) 效果，也叫 on-scroll sliced text。
把一個大標題切成若干水平切片，一開始對齊成完整的詞，使用者捲動時切片彼此錯開、橫向滑動。
讓錯位直接跟隨捲動位置，往回捲動時隨之還原；對螢幕閱讀器保持標題為一段完整可讀的文字。Scroll 中的其他動效
A
在裡面捲動
Zoom on Scroll (捲動縮放)
別稱 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
隨著使用者捲動，元素或場景放大或縮小。
適用情境
主視覺開場、圖片放大展開
在[套用位置]加入「捲動縮放」(Zoom on Scroll) 效果，也叫 scroll zoom 或 scale on scroll。
區塊停留在畫面中時，元素要隨著捲動從一張小卡片平順放大，直到佔滿整個畫面；往上捲動時再縮回去。
縮放時不要推擠周圍的版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以最終尺寸顯示，不做縮放。在裡面捲動
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)。
使用者向下捲動時，頁首要向上滑出畫面；只要向上捲動，就滑回來：快速、流暢，依捲動方向而不是距離來反應。
在頁面最上方時一律顯示，忽略細微的捲動抖動，並且當頁首內有元素取得鍵盤焦點時保持顯示。