MOTION HUB

段落高亮进度

Section Progress
#section-progress · 50/72
SCROLL · 滚动查看

参数调改

PLAYGROUND
强调色--accent
章节底色--accent_wash
圆点尺寸--dot_px
616
px
底色--base

实现要点

NOTES
  1. 01

    两套 scroll-driven 机制配合:章节自身的进入用 view() 时间轴(强调条 scaleY + 底色 wash 淡入),固定侧栏圆点用 view-timeline 命名各章时间轴、再由 body 上的 timeline-scope 提升作用域跨元素引用——纯 CSS 读出『当前读到哪一章』。

  2. 02

    动画 range 取 entry 30%-80%:章节进入视口三分之一后开始点亮、80% 时完全点亮,fill both 让它保持常亮——呈现『累计进度』而不是『只有当前章亮』。

  3. 03

    强调条用 scaleY(合成器路径),wash 是小面积透明度动画;不要把大段正文颜色做成 scroll-driven 逐帧动画。

  4. 04

    @supports not (animation-timeline: view()) 降级:强调条静态全亮、圆点为静态灰点,内容零损失(Chrome/Edge 115+ 才支持时间轴)。

  5. 05

    reduced-motion 不受影响(状态由滚动位置决定);demo 自动滚动为预览辅助,用户滚动即停。

源代码

SOURCE

加载源代码…