提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「文字重複」(Text Repetition) 效果,也叫 repeated text scroll。
把一個詞複製成一疊更淡的描邊副本,隨使用者捲動從它身後展開,往上捲動時再收攏回去。
讓展開程度直接綁定捲動位置,並對螢幕閱讀器隱藏多餘的副本,讓這個詞只被讀一次。相似的動效
ABCDEFABCDEF
Line Shadow Text (線條陰影文字)
別稱 Text Shadow Animation, Dancing Shadow
字母後方的條紋或錯位陰影朝一個方向移動。
適用情境
醒目的大標題
在[套用位置]加入「線條陰影文字」(Line Shadow Text) 效果,也叫 text shadow animation 或 dancing shadow。
字母後方由細斜條紋組成的錯位陰影緩慢、持續地滑動,字母本身保持靜止、清晰。
條紋的移動要無縫循環;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓陰影保持靜止。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),就保持靜止。ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography (動態文字排版)
別稱 Kinetic Text
文字不再是靜態文案,而是作為運動的圖形元素縮放、移動或旋轉。
適用情境
品牌主視覺區塊
在[套用位置]加入「動態文字排版」(Kinetic Typography),也叫 kinetic text。
一列列重複的大字級文字以緩慢、穩定的節奏交替朝相反方向橫向滑動,讓文字本身變成運動的圖形。
每一列都要無縫循環、看不出跳接,螢幕報讀器只讀一次文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止運動。Text 中的其他動效
AWBXCYDZ
Text Replacement (文字替換)
別稱 Text Swap
原有文字以動畫方式退出,並被新的文字內容取代。
適用情境
會變化的標籤
在[套用位置]加入「文字替換」(Text Replacement) 效果,也叫文字切換 (text swap)。
文字變化時,舊字元向上滑出,新字元從下方滑入,逐字形成快速而流暢的波動。
切換過程中不要讓文字框尺寸跳動,並且只向螢幕閱讀器朗讀新文字。ABCDEFGHIJKLMNOPQRSTUVWXYZ
在裡面捲動
Text Reveal (文字顯現)
別稱 Scroll Text Reveal, Word-by-word Reveal
隨著使用者捲動,段落中的文字從黯淡變為完全不透明。
適用情境
宣言或引言段落
在[套用位置]加入「文字顯現」(Text Reveal) 效果,也叫捲動文字顯現 (scroll text reveal) 或逐詞顯現 (word-by-word reveal)。
段落一開始是黯淡的,隨著使用者捲動,每個詞依序亮到完全清晰,與捲動位置綁定。
往上捲回時文字重新變暗;無論黯淡程度如何,整段文字都要始終能被螢幕閱讀器讀取。ABCDEFGHIJKL
移動指標試試
Text Reveal Card (文字顯現卡片)
別稱 Spotlight Text Reveal
在卡片上移動游標時,遮罩邊緣或聚光燈下隱藏的文字隨之顯露。
適用情境
功能卡片
在[套用位置]加入「文字顯現卡片」(Text Reveal Card) 效果,也叫聚光燈文字顯現 (spotlight text reveal)。
游標在卡片上移動時,一條垂直邊緣緊緊跟隨,在一側露出隱藏的文字:流暢、直接,沒有延遲。
在沒有游標可跟隨的觸控裝置上,讓拖曳或輕觸也能顯示隱藏文字,並讓隱藏文字可被螢幕閱讀器讀取。