滚动特效

虚拟滚动页面里的视差、进度、钉住与揭示效果：页面自动滚动，指针可接管滚动位置，实时读出滚动进度。

技术栈: 虚拟滚动, scroll 进度, parallax, Canvas 2D

• 视差层 — 现实中远处的山看起来移动得慢，近处的树移动得快。
• 进度条 — 进度 = 已滚动距离 ÷ 可滚动的总距离。
• 章节钉住 — 章节标题平时跟着内容滚动，一旦碰到视口顶部，就「粘」在顶部不动；直到这一章的内容全部滚完，标题才被下一章推走。
• 淡入揭示 — 卡片还没进入视口时是透明并且偏下的；当它从底部进入视口，进度 e 从 0 增加到 1，透明度跟着变成 1、位…
• 缩放进入 — 卡片离视口中心越近就越大越亮，离开中心时又缩小变暗。
• 横向画廊 — 页面纵向滚动时，把滚动进度换算成一条横向轨道的位移（translateX），卡片就从右向左移过屏幕。
• 卡片堆叠 — 每张卡片都是 position: sticky，钉住的位置一张比一张低一点（top = 基础 + i · 间…
• 文字擦除 — 每一行文字先用暗色画一遍，再用一个从左到右的线性渐变（亮色 → 透明）覆盖。
• 路径随滚 — 一条蛇形的 SVG 路径贯穿整个页面。
• 数字递增 — 统计数字进入视口后，从 0 开始滚动增加到目标值，常见于官网的「数据亮点」区域。
• 背景变色 — 页面分成若干段，每段指定一个背景色。
• 分屏擦除 — 屏幕被分成两半，两半的内容朝相反方向移动——一边向上、一边向下（或一边向左、一边向右）。
• 惯性吸附 — 给滚动容器设置 scroll-snap-type: y mandatory，每个段落设置 scroll-sn…
• 目录高亮 — 长文档旁边的目录会随着阅读位置自动高亮当前章节。
• 封面揭开 — 页面开头是一张大封面。
• 滚动时间线 — 一条竖线贯穿页面，每个事件是线上的一个节点和一张卡片。
• 图片懒显 — 页面里的图片先显示灰色占位框，只有当图片靠近视口（距离小于「加载距离」）时才真正开始下载，下载完成后从模糊淡…
• 交错网格 — 网格里的格子不是一起出现，而是一个接一个地「波浪式」浮现。
• 回顶气泡 — 页面滚动超过一定距离后，右下角浮出一个圆形按钮，按钮外圈的进度环显示读了多少。
• 滚动叙事 — 一侧是固定不动的插图（sticky），另一侧是一段段文字。