提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「切片文字」(Sliced Text) 效果,也叫 on-scroll sliced text。
把一個大標題切成若干水平切片,一開始對齊成完整的詞,使用者捲動時切片彼此錯開、橫向滑動。
讓錯位直接跟隨捲動位置,往回捲動時隨之還原;對螢幕閱讀器保持標題為一段完整可讀的文字。相似的動效
ABCDEF
將滑鼠移到上面
Glitch Text (故障文字)
別稱 Text Glitch, RGB Split Glitch
文字像訊號故障一樣抖動,出現切片錯位和紅青色分離。
適用情境
賽博龐克或遊戲風格標題
在[套用位置]加入「故障文字」(Glitch Text) 滑鼠懸停效果,也叫 text glitch 或 RGB 分離故障 (RGB split glitch)。
游標停在文字上時,文字以快速、俐落的陣發方式抖動:細細的橫向切片左右跳動,兩份彩色副本像訊號故障一樣錯開;游標移開後恢復原狀。
真正的文字在文件中只保留一份,避免螢幕報讀器讀出副本;鍵盤聚焦時也顯示同樣的效果。A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
在裡面捲動
Text Marquee on Scroll (捲動文字跑馬燈)
別稱 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
頁面縱向捲動時,大字級的文字列橫向滑動。
適用情境
品牌標語、主視覺區塊
在[套用位置]加入「捲動文字跑馬燈」(Text Marquee on Scroll),也叫 scroll text marquee 或 scroll velocity text。
頁面往下捲動時,大字級的文字列橫向滑動,相鄰的列朝相反方向移動;往上捲動時再滑回來。
讓移動綁定捲動位置,別讓長文字列產生水平捲軸;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
在裡面捲動
Scrolling Letters (捲動字母)
別稱 On-Scroll Letter Animations
使用者捲動經過各個章節時,標題的字母依序變換或移動。
適用情境
章節指示
在[套用位置]加入「捲動字母」(Scrolling Letters) 效果,也叫 on-scroll letter animations。
使用者捲動經過各章節時,標題的字母從左到右依序滾動到下一個字元,並直接跟隨捲動位置變化。
往上捲回時字母要滾回原樣,螢幕閱讀器要以一般文字取得目前的標題。Text 中的其他動效
ABCDEFGHIJKLMNOP
Spinning Text (環形旋轉文字)
別稱 Circular Text, Text on Circle
文字沿圓周排列,並持續旋轉。
適用情境
旋轉徽章、印章
在[套用位置]加入「環形旋轉文字」(Spinning Text),也叫環形文字 (circular text) 或 text on circle。
字母沿圓周平均排列,整個圓緩慢、等速地旋轉,循環重新開始時不能有跳動。
只向螢幕閱讀器提供一次一般文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止旋轉。ABCDEF
Split Text Stagger (文字拆分交錯)
別稱 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
標題被拆分成字元、單字或行,以短暫延遲依序動畫進場。
適用情境
大標題、章節標題
在[套用位置]加入「文字拆分交錯」(Split Text Stagger) 進場效果,也叫逐字交錯 (letter stagger) 或 staggered text reveal。
把標題拆成單個字母,字母之間留出短暫延遲,依序上移並淡入,快速流暢,不要有彈跳感。
標題進入畫面時只播放一次,讓螢幕閱讀器把它當作一個完整的詞讀出;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (翻牌文字)
別稱 Text Flipping Board, Flip Board, Vestaboard display
字元像機場航班看板一樣翻動,直到停在目標字母上。
適用情境
狀態看板、復古顯示幕
在[套用位置]加入「翻牌文字」(Split-Flap Text) 效果,也叫翻牌看板 (text flipping board 或 flip board)。
每個字元格快速翻過字母表,直到停在目標字母上,各字元格從左到右依序停穩。
每次文字出現或變化時執行一次,只向螢幕閱讀器朗讀最終文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就不翻動、直接顯示最終文字。