提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「文字生成」(Text Generate) 效果。
文字逐一淡入,同時每個詞上的柔和模糊逐漸消散,彷彿文字正在生成:節奏平穩、沉靜。
頁面載入時只播放一次,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。相似的動效
ABC DEFG
Typewriter (打字機效果)
別稱 Typing Animation, Typewriter Effect, Typing Text
字元像打字一樣逐一出現,通常後面跟著一個閃爍的游標。
適用情境
主視覺大標題、標語
在[套用位置]加入「打字機效果」(Typewriter),也叫打字動畫 (typing animation) 或打字文字 (typing text)。
字元以穩定的打字節奏逐一出現,最後一個已輸入字元後面緊跟一個游標,打完後閃爍幾次。
只播放一次、不要循環,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示完整文字。ABCDEFGHIJKLMNOPQRSTUVWXYZ
在裡面捲動
Text Reveal (文字顯現)
別稱 Scroll Text Reveal, Word-by-word Reveal
隨著使用者捲動,段落中的文字從黯淡變為完全不透明。
適用情境
宣言或引言段落
在[套用位置]加入「文字顯現」(Text Reveal) 效果,也叫捲動文字顯現 (scroll text reveal) 或逐詞顯現 (word-by-word reveal)。
段落一開始是黯淡的,隨著使用者捲動,每個詞依序亮到完全清晰,與捲動位置綁定。
往上捲回時文字重新變暗;無論黯淡程度如何,整段文字都要始終能被螢幕閱讀器讀取。ABCD
Blur In (模糊入場)
別稱 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素從嚴重模糊的狀態逐漸變清晰,常伴隨滑入或淡入。
適用情境
標題和首頁主視覺文字的顯現
在[套用位置]加入「模糊入場」(Blur In) 進場動畫,也叫 text focus in、focus in 或 blur text reveal。
內容從嚴重模糊且透明的狀態開始,在原地逐漸變清晰:柔和、偏慢,沒有位移。
只播放一次;如果使用者開啟了「減少動態效果」(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),就直接顯示、不做動畫。Text 中的其他動效
ABC DEFG HIJ KL
Text Highlighter (文字螢光筆)
別稱 Highlight Marker, Marker Underline, Hero Highlight
一條螢光筆般的色帶劃過詞句,將其突顯強調。
適用情境
強調關鍵詞句
在[套用位置]加入「文字螢光筆」(Text Highlighter) 效果,也叫螢光標記 (highlight marker) 或麥克筆底線 (marker underline)。
一條螢光筆般的色帶從左到右平順地劃過關鍵詞句的背後,就像有人用筆把它畫起來。
在詞句捲動進入畫面時只播放一次,確保色帶上的文字清楚易讀,並且在詞句換成兩行時讓色帶正確跟隨。ABCDABCD
將滑鼠移到上面
Text Hover Effect (文字懸停效果)
別稱 Gradient Outline Text Hover, Text Fill on Hover
描邊文字被跟隨指標或橫掃而過的漸層填滿或點亮。
適用情境
大型展示文字、頁尾
在[套用位置]加入「文字懸停效果」(Text Hover Effect),也叫懸停文字填色 (text fill on hover) 或漸層描邊文字懸停 (gradient outline text hover)。
文字一開始只有描邊;游標停在上面時,實色填滿從左到右平順地掃入,游標移開後再退回去。
填色前的描邊文字也要清楚易讀,並且在鍵盤焦點時呈現同樣的效果。在裡面捲動
Text Path Scroll (路徑文字捲動)
別稱 Text Path Curve Scroll Animation
文字沿曲線路徑排列,並隨使用者捲動沿路徑移動。
適用情境
敘事型區塊
在[套用位置]加入「路徑文字捲動」(Text Path Scroll) 效果,也叫 text path curve scroll animation。
文字排在一條曲線上,隨使用者捲動沿曲線滑動:往下捲動時前進,往上捲動時後退。
讓移動直接綁定捲動位置、沒有延遲,並讓螢幕閱讀器把它當作一般文字讀取。