提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「路徑文字捲動」(Text Path Scroll) 效果,也叫 text path curve scroll animation。
文字排在一條曲線上,隨使用者捲動沿曲線滑動:往下捲動時前進,往上捲動時後退。
讓移動直接綁定捲動位置、沒有延遲,並讓螢幕閱讀器把它當作一般文字讀取。相似的動效
Motion Path (路徑動畫)
別稱 Animate Along Path, Offset Path Animation
元素沿著自訂曲線路徑移動,並可隨路徑旋轉方向。
適用情境
路線上的飛機或圓點、裝飾性移動元素
在[套用位置]加入「路徑動畫」(Motion Path),也叫 animate along path。
一個小元素沿著自訂曲線路線緩慢、等速地移動,並隨時轉向前進的方向。
使用封閉路線,讓循環重複時不會跳動;路線要隨容器縮放,而不是固定尺寸。ABCDEFGHIJKLMNOP
Spinning Text (環形旋轉文字)
別稱 Circular Text, Text on Circle
文字沿圓周排列,並持續旋轉。
適用情境
旋轉徽章、印章
在[套用位置]加入「環形旋轉文字」(Spinning Text),也叫環形文字 (circular text) 或 text on circle。
字母沿圓周平均排列,整個圓緩慢、等速地旋轉,循環重新開始時不能有跳動。
只向螢幕閱讀器提供一次一般文字;如果使用者開啟了「減少動態效果」(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),就保持靜止。Text 中的其他動效
ABCABCABCABCABC
在裡面捲動
Text Repetition (文字重複)
別稱 Repeated Text Scroll
一個詞被複製成許多層疊的副本,隨捲動錯開移動。
適用情境
作品集標題
在[套用位置]加入「文字重複」(Text Repetition) 效果,也叫 repeated text scroll。
把一個詞複製成一疊更淡的描邊副本,隨使用者捲動從它身後展開,往上捲動時再收攏回去。
讓展開程度直接綁定捲動位置,並對螢幕閱讀器隱藏多餘的副本,讓這個詞只被讀一次。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)。
段落一開始是黯淡的,隨著使用者捲動,每個詞依序亮到完全清晰,與捲動位置綁定。
往上捲回時文字重新變暗;無論黯淡程度如何,整段文字都要始終能被螢幕閱讀器讀取。