提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「文字顯現」(Text Reveal) 效果,也叫捲動文字顯現 (scroll text reveal) 或逐詞顯現 (word-by-word reveal)。
段落一開始是黯淡的,隨著使用者捲動,每個詞依序亮到完全清晰,與捲動位置綁定。
往上捲回時文字重新變暗;無論黯淡程度如何,整段文字都要始終能被螢幕閱讀器讀取。相似的動效
ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (文字生成)
別稱 Text Generate Effect
頁面載入時,文字逐一淡入,常伴隨模糊逐漸消散,彷彿正在生成。
適用情境
AI 風格的開場文案
在[套用位置]加入「文字生成」(Text Generate) 效果。
文字逐一淡入,同時每個詞上的柔和模糊逐漸消散,彷彿文字正在生成:節奏平穩、沉靜。
頁面載入時只播放一次,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。在裡面捲動
Sticky Text Fade (固定文字淡入淡出)
別稱 Sticky Scroll Text Opacity Fade
文字固定不動,各行隨捲動進度淡入淡出。
適用情境
捲動敘事
在[套用位置]加入「固定文字淡入淡出」(Sticky Text Fade) 效果,也叫 sticky scroll text opacity fade。
該區塊捲動期間,文字區塊固定在原位,各行隨捲動進度逐行淡入淡出。
讓淡入淡出直接跟隨捲動位置,往回捲動時隨之反轉;無論透明度如何,每一行都要能被螢幕閱讀器讀到。在裡面捲動
Scroll-Linked Animation (捲動連動動畫)
別稱 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
動畫進度直接綁定捲動位置,往下捲動時播放,往回捲動時倒轉。
適用情境
敘事型頁面、進度效果
在[套用位置]加入「捲動連動動畫」(Scroll-Linked Animation),也叫 scroll-driven animation 或 scroll scrub。
動畫要緊跟著捲動位置:往下捲動時正向播放,往上捲動時當場倒轉,本身不帶以時間為基礎的緩動。
把整段動畫對應到一個明確的捲動範圍;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就顯示一個合理的靜態狀態。在裡面捲動
Scrolling Letters (捲動字母)
別稱 On-Scroll Letter Animations
使用者捲動經過各個章節時,標題的字母依序變換或移動。
適用情境
章節指示
在[套用位置]加入「捲動字母」(Scrolling Letters) 效果,也叫 on-scroll letter animations。
使用者捲動經過各章節時,標題的字母從左到右依序滾動到下一個字元,並直接跟隨捲動位置變化。
往上捲回時字母要滾回原樣,螢幕閱讀器要以一般文字取得目前的標題。Text 中的其他動效
移動指標試試
Text Reveal Card (文字顯現卡片)
別稱 Spotlight Text Reveal
在卡片上移動游標時,遮罩邊緣或聚光燈下隱藏的文字隨之顯露。
適用情境
功能卡片
在[套用位置]加入「文字顯現卡片」(Text Reveal Card) 效果,也叫聚光燈文字顯現 (spotlight text reveal)。
游標在卡片上移動時,一條垂直邊緣緊緊跟隨,在一側露出隱藏的文字:流暢、直接,沒有延遲。
在沒有游標可跟隨的觸控裝置上,讓拖曳或輕觸也能顯示隱藏文字,並讓隱藏文字可被螢幕閱讀器讀取。將滑鼠移到上面
Text Scramble (亂碼解碼文字)
別稱 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
文字被不斷刷新的隨機字元取代,並逐漸還原成最終的詞。
適用情境
科技風主視覺標題、連結懸停
在[套用位置]加入「亂碼解碼文字」(Text Scramble) 懸停效果,也叫文字解碼 (text decode) 或加密文字 (encrypted text)。
游標移到文字上時,每個字母快速閃過隨機字元,再從左到右依序定格為真正的字母。
亂碼過程中文字寬度不要跳動,讓螢幕閱讀器始終讀取真實文字,並且在鍵盤焦點時呈現同樣的效果。移動指標試試
Text Tilt (文字傾斜)
別稱 Perspective Text Tilt
文字跟隨滑鼠位置以 3D 透視方式傾斜轉動。
適用情境
主視覺標題
在[套用位置]加入「文字傾斜」(Text Tilt) 效果,也叫透視文字傾斜 (perspective text tilt)。
文字隨著游標移動平順跟隨,以 3D 方式輕輕朝游標傾斜,游標移開後再緩緩恢復平整。
傾斜幅度要含蓄,確保文字易讀;在觸控裝置上,以及如果使用者開啟了「減少動態效果」(prefers-reduced-motion),文字保持平整不動。