提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「遮罩文字顯現」(Mask Reveal) 文字進場效果,也叫行遮罩顯現 (line mask reveal) 或文字遮罩 (text masking)。
每一行文字從一條看不見的邊緣後方向上滑出,彷彿憑空出現,一行接一行,快速流暢,不要有彈跳感。
文字捲動進入畫面時只播放一次;如果使用者開啟了「減少動態效果」(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),就直接顯示、不做動畫。A
Clip Reveal (裁切顯現)
別稱 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path 或遮罩從邊緣或某一點展開,逐步露出圖片或文字。
適用情境
圖片和標題的顯現
在[套用位置]加入「裁切顯現」(Clip Reveal) 進場效果,也叫 mask reveal、wipe reveal 或 image reveal。
讓裁切邊緣由左往右掃過,內容保持不動、逐步顯露出來:流暢,開始和結束都要柔和。
從一開始就為元素保留空間,避免版面移動;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接完整顯示。ABDEFGHIJKLDEFMN
Word Rotate (文字輪替)
別稱 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
句子中的一個詞以滑動、翻轉或淡入淡出的方式換成清單中的下一個詞。
適用情境
主視覺標語
在[套用位置]加入「文字輪替」(Word Rotate) 效果,也叫輪替詞 (rotating words) 或翻轉詞 (flip words)。
行內的一個詞向上滑出,清單中的下一個詞從下方滑入,每個詞停留片刻後再切換。
詞寬不同時不要讓這一行的其餘部分跳動,不要讓螢幕閱讀器朗讀每次切換;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止輪替。AWBXCYDZ
Text Replacement (文字替換)
別稱 Text Swap
原有文字以動畫方式退出,並被新的文字內容取代。
適用情境
會變化的標籤
在[套用位置]加入「文字替換」(Text Replacement) 效果,也叫文字切換 (text swap)。
文字變化時,舊字元向上滑出,新字元從下方滑入,逐字形成快速而流暢的波動。
切換過程中不要讓文字框尺寸跳動,並且只向螢幕閱讀器朗讀新文字。Text 中的其他動效
Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Matrix Text (駭客任務字雨)
別稱 Digital Rain Text
綠色字元像《駭客任務》裡的程式碼雨一樣成列落下。
適用情境
駭客主題
在[套用位置]加入「駭客任務字雨」(Matrix Text) 效果,也叫 digital rain text。
一列列字元以略有差異的速度穩定落下,每列最前面的字元明亮,後面拖著逐漸淡去的尾跡。
把它當作對螢幕閱讀器隱藏的裝飾,保持輕量;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止動畫。ABCDEF
字母向下滴落、拉長,彷彿正在融化。
適用情境
恐怖或趣味標題
在[套用位置]加入「融化文字」(Melting Text) 效果。
字母緩慢向下塌陷,下方拉出滴落的液滴,彷彿正在融化,最後停在靜止的融化樣貌。
文字進入畫面時只播放一次,結束時保持文字可讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就不做動畫。ABCDEFGHI
Morphing Text (文字變形)
別稱 Text Morph
一個詞在同一位置模糊並融合成下一個詞。
適用情境
首屏標語
在[套用位置]加入「文字變形」(Morphing Text) 效果,也叫 text morph。
一個詞在同一位置變模糊,以柔和、黏稠的方式融合成下一個詞,然後停留片刻再進行下一次切換。
詞語之間無縫循環,讓螢幕閱讀器把這些詞當作一般文字讀出;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止循環。