Scroll-Linked Animation (滚动驱动动画)

元素进入或离开视口时，动画播放一次。

在[应用位置]添加“滚动触发动画”(Scroll-Triggered Animation)，也叫滚动显现(reveal on scroll)或 animate on scroll。
每个元素进入视口时只播放一次：淡入并向上滑到位，按自己快速顺滑的节奏播放，而不是跟随滚动位置。
脚本加载失败时内容也要可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接显示元素。

滚动时各图层以不同速度移动，营造出纵深感。

在[应用位置]添加“视差滚动”(Parallax)效果，也叫 parallax scrolling 或视差图层(parallax layers)。
页面滚动时，背景图层要比内容移动得慢，越远的图层移动越少，营造含蓄的纵深感。
让效果紧跟滚动位置、没有延迟，文字放在正常速度的图层上；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭这个效果。

随着用户滚动，元素或场景放大或缩小。

在[应用位置]添加“滚动缩放”(Zoom on Scroll)效果，也叫 scroll zoom 或 scale on scroll。
区块停留在视口中时，元素要随着滚动从一张小卡片平滑放大，直到铺满整个视口；向上滚动时再缩回去。
缩放时不要挤动周围的布局；如果用户开启了“减少动态效果”(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。
滚动时，每张卡片吸附在顶部附近，下一张卡片从下方滑上来盖住它，下面的卡片略微缩小，叠成整齐的一摞。
让每张先前的卡片露出一道细边，并给最后一张卡片留足空间，让它在区块结束前滑到位。