滚动相关滚到哪、变到哪
和滚动挂钩的动效：滚到哪里、滚得多快，画面就变到哪里。
13 条动效
- 滚动进入Scroll reveal 元素在滚进可见区域时才播放入场，用户往下读的过程中内容一段段出现
- 滚动驱动Scroll-driven animation 动画进度直接绑定滚动位置，用户往回滚，动画就倒着走，像在拖一条时间轴
- 视差Parallax 背景比前景移动得慢一些，制造出前后错开的深度感
- 视图转场View transition 浏览器在切换前后各截一张图，自动把两张图之间的差异补成一段动画
- 阅读进度Reading progress 顶上一条细线，滚多少填多少；右边几个刻度告诉你「一共几段、现在第几段」
- 平滑滚动接管Smooth scrolling 滚轮推一下，内容不是立刻跟上来，而是带一点重量地追上去；松手还会缓缓滑一小段才停
- 按滚动方向收纳导航Direction-aware nav hide 往下读的时候顶部那条导航自己滑走了，把屏幕让给内容；只要往上滚一点点，它立刻滑回来 —— 哪怕你还在页面很下面
- 横向滚动区段Horizontal scroll section 往下滚，这一段却横着走：一排商品卡从右往左平移过去，滚到头才继续往下
- 滚动逐词点亮Scroll word illumination 一整段灰扑扑的文字，随着往下滚，词一个一个从「蒙着雾」变得清晰，读到哪亮到哪；往回滚，后面的词又退回雾里
- 滚动分档失焦Scroll quantized focus blur 一大段文字被钉在屏幕上，读到哪一段哪一段是清楚的，其它几段一起糊成虚影；往下滚，焦点一档一档往下移，像有人帮你把手电筒往下照
- 从散落聚拢Assemble from scatter 一排卡片刚开始是歪七扭八散着的：每张被推到不同方向、各自歪着不同角度
- 滚动推播放头Scroll-scrubbed playback 一段原本自己播的动画，现在不自己播了：往下滚它就往前走，往回滚它就倒着放，停住它就定在那一帧
- 滚动逐帧序列Scroll frame sequence 看着像视频，其实是一叠预渲染图（演示里 36 张真实商品照）：往下滚它就往前跳一帧，往回滚滚就倒回去一帧，停住画面就定住