Sticky Text Fade (固定文字淡入淡出)

隨著使用者捲動，段落中的文字從黯淡變為完全不透明。

在[套用位置]加入「文字顯現」(Text Reveal) 效果，也叫捲動文字顯現 (scroll text reveal) 或逐詞顯現 (word-by-word reveal)。
段落一開始是黯淡的，隨著使用者捲動，每個詞依序亮到完全清晰，與捲動位置綁定。
往上捲回時文字重新變暗；無論黯淡程度如何，整段文字都要始終能被螢幕閱讀器讀取。

在一段捲動範圍內，元素固定在原位，其他內容或動畫繼續推進。

在[套用位置]加入「捲動釘選」(Pinning) 效果，也叫釘選區塊 (pinned section) 或 sticky section。
旁邊的內容隨捲動經過時，一個面板要固定在原位，並隨正在閱讀的步驟切換內容，區塊結束時再解除固定。
優先使用原生的 sticky 定位，而不是攔截捲動；並確保在小螢幕上即使沒有固定面板，每個步驟也依然好讀。

動畫進度直接綁定捲動位置，往下捲動時播放，往回捲動時倒轉。

在[套用位置]加入「捲動連動動畫」(Scroll-Linked Animation)，也叫 scroll-driven animation 或 scroll scrub。
動畫要緊跟著捲動位置：往下捲動時正向播放，往上捲動時當場倒轉，本身不帶以時間為基礎的緩動。
把整段動畫對應到一個明確的捲動範圍；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示一個合理的靜態狀態。

先以描邊畫出字母輪廓，再顯示填色。

在[套用位置]加入「文字描邊繪製」(Stroke Text Draw) 效果，也叫 draw in text 或 animated stroke text。
字母輪廓流暢地逐筆畫出，輪廓完成後填色再淡入。
頁面載入時只播放一次，讓文字保持為可存取的真實文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示已填色的文字。

字母或單字繞軸做 3D 翻轉，露出背面的下一段文字。

在[套用位置]加入「3D 翻轉文字」(Text 3D Flip) 懸停效果，也叫 3D flip text reveal。
游標移到文字上時，每個字母繞水平軸做 3D 翻轉，露出另一面的新字母，一個接一個快速流暢地掃過；游標移開時再翻回來。
翻轉過程中保持文字框尺寸不變，鍵盤聚焦時也顯示同樣的效果。

文字隨捲動或游標移動自然地扭曲、起伏。

在[套用位置]加入「文字扭曲」(Text Distortion) 效果，也叫 organic text distortion。
一行文字不斷橫向流動，同時自然地扭曲、起伏，彷彿隔著流動的水去看，流動由使用者的捲動驅動。
扭曲要夠輕，確保文字可讀，在較慢的裝置上也要流暢；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉此效果。