Scroll-Triggered Animation (捲動觸發動畫)

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

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

元素在淡入的同時向上移動一小段距離，彷彿落到自己的位置上。

在[套用位置]加入「上浮淡入」(Fade Up) 進場動畫，也叫 fade-in-up 或捲動顯現 (reveal on scroll)。
元素第一次捲動進入畫面時，一邊輕微上移一邊淡入：要含蓄、快速，不要有彈跳感。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。

一組元素依序以微小的時間差播放動畫，形成波浪般的效果，而不是同時出現。

在[套用位置]加入「交錯動畫」(Stagger)，也叫 staggered animation 或級聯 (cascade)。
讓各項以短而均勻的間隔依序上浮出現，整體看起來像一道快速的波浪，而不是同時出現。
即使清單很長也要讓整個過程保持簡短；捲動進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。

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

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

捲動和錨點跳轉帶有緩動地平滑滑動，而不是生硬地跳動。

在[套用位置]加入「平滑捲動」(Smooth Scroll)，也叫 smooth scrolling 或慣性捲動 (inertia scroll)。
捲動和錨點跳轉要順暢地滑動並緩緩停下，而不是一格一格地跳；手感要輕快靈敏，不要沉重拖泥帶水。
保留鍵盤捲動、捲軸、頁面內搜尋等原生行為；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉平滑效果。

捲動時卡片固定在頂端並層層疊起，先前的卡片通常會稍微縮小。

在[套用位置]加入「堆疊卡片」(Stacking Cards)，也叫 sticky stacking cards 或 card stack scroll。
捲動時，每張卡片固定在頂端附近，下一張卡片從下方滑上來蓋住它，底下的卡片稍微縮小，疊成整齊的一疊。
讓每張先前的卡片露出一道細邊，並給最後一張卡片留足空間，讓它在區塊結束前滑到定位。

使用者往下捲動後，固定頁首的高度或尺寸會縮小。

在[套用位置]加入「固定頁首縮小」(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
頁首固定在頂端，讀者稍微往下捲動後，平順地縮成更窄的橫條、Logo 也變小；回到頂端時再恢復原狀。
頁首尺寸變化時，不要讓下方內容跳動。