提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「捲動字母」(Scrolling Letters) 效果,也叫 on-scroll letter animations。
使用者捲動經過各章節時,標題的字母從左到右依序滾動到下一個字元,並直接跟隨捲動位置變化。
往上捲回時字母要滾回原樣,螢幕閱讀器要以一般文字取得目前的標題。相似的動效
ABCDEF
Split Text Stagger (文字拆分交錯)
別稱 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
標題被拆分成字元、單字或行,以短暫延遲依序動畫進場。
適用情境
大標題、章節標題
在[套用位置]加入「文字拆分交錯」(Split Text Stagger) 進場效果,也叫逐字交錯 (letter stagger) 或 staggered text reveal。
把標題拆成單個字母,字母之間留出短暫延遲,依序上移並淡入,快速流暢,不要有彈跳感。
標題進入畫面時只播放一次,讓螢幕閱讀器把它當作一個完整的詞讀出;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。ABCDEFGHIJKLMNOPQRSTUVWXYZ
在裡面捲動
Text Reveal (文字顯現)
別稱 Scroll Text Reveal, Word-by-word Reveal
隨著使用者捲動,段落中的文字從黯淡變為完全不透明。
適用情境
宣言或引言段落
在[套用位置]加入「文字顯現」(Text Reveal) 效果,也叫捲動文字顯現 (scroll text reveal) 或逐詞顯現 (word-by-word reveal)。
段落一開始是黯淡的,隨著使用者捲動,每個詞依序亮到完全清晰,與捲動位置綁定。
往上捲回時文字重新變暗;無論黯淡程度如何,整段文字都要始終能被螢幕閱讀器讀取。ABCABCABC
在裡面捲動
Sliced Text (切片文字)
別稱 On-Scroll Sliced Text
標題被切成若干水平切片,頁面捲動時切片彼此錯開、橫向移動。
適用情境
編輯風格的首屏
在[套用位置]加入「切片文字」(Sliced Text) 效果,也叫 on-scroll sliced text。
把一個大標題切成若干水平切片,一開始對齊成完整的詞,使用者捲動時切片彼此錯開、橫向滑動。
讓錯位直接跟隨捲動位置,往回捲動時隨之還原;對螢幕閱讀器保持標題為一段完整可讀的文字。Text 中的其他動效
ABC DEFGH
Shimmer Text (微光文字)
別稱 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
一道亮光反覆掃過文字。
適用情境
徽章、公告膠囊標籤
在[套用位置]加入「微光文字」(Shimmer Text) 效果,也叫 animated shiny text 或金屬微光文字 (metallic shimmer text)。
一條光帶從左到右流暢地掃過文字,短暫停頓後再重複。
高光經過時文字仍要清楚可讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。ABCDEFGHIJKLMNOP
Spinning Text (環形旋轉文字)
別稱 Circular Text, Text on Circle
文字沿圓周排列,並持續旋轉。
適用情境
旋轉徽章、印章
在[套用位置]加入「環形旋轉文字」(Spinning Text),也叫環形文字 (circular text) 或 text on circle。
字母沿圓周平均排列,整個圓緩慢、等速地旋轉,循環重新開始時不能有跳動。
只向螢幕閱讀器提供一次一般文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止旋轉。