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)，就关闭该效果。