SCROLL · 滚动查看
参数调改
PLAYGROUND
强调色--accent
章节底色--accent_wash
圆点尺寸--dot_px
616
底色--base
实现要点
NOTES- 01
两套 scroll-driven 机制配合:章节自身的进入用 view() 时间轴(强调条 scaleY + 底色 wash 淡入),固定侧栏圆点用 view-timeline 命名各章时间轴、再由 body 上的 timeline-scope 提升作用域跨元素引用——纯 CSS 读出『当前读到哪一章』。
- 02
动画 range 取 entry 30%-80%:章节进入视口三分之一后开始点亮、80% 时完全点亮,fill both 让它保持常亮——呈现『累计进度』而不是『只有当前章亮』。
- 03
强调条用 scaleY(合成器路径),wash 是小面积透明度动画;不要把大段正文颜色做成 scroll-driven 逐帧动画。
- 04
@supports not (animation-timeline: view()) 降级:强调条静态全亮、圆点为静态灰点,内容零损失(Chrome/Edge 115+ 才支持时间轴)。
- 05
reduced-motion 不受影响(状态由滚动位置决定);demo 自动滚动为预览辅助,用户滚动即停。
源代码
SOURCE
加载源代码…