滚动相关 · 滚到哪、变到哪
滚动分档失焦Scroll quantized focus blur
- 一次只读一段
- 像手电筒
- 档位分明
一大段文字被钉在屏幕上,读到哪一段哪一段是清楚的,其它几段一起糊成虚影;往下滚,焦点一档一档往下移,像有人帮你把手电筒往下照。
什么时候用它
长论述、FAQ、条款、分步说明这类「一次只该读一段」的内容用它;需要来回对照的表格和清单别用 —— 糊掉的部分正是用户要对照的。
参数
progress < .2 → idx 0 · < .9 → idx 1 · else idx 3 · others opacity .05 + blur 5px · 300ms ease-out · stepped, not interpolated
配方
滚动分档失焦 → 300ms ease-out条件 progress < .2 → idx 0条件 < .9 → idx 1
给 AI 的一句话
把这段文字做成滚动分档失焦:把滚动进度量化成几档(例如 .2 和 .9 两个阈值切三档),非当前档的段落一起降到不透明度 .05 并加 filter: blur(5px),当前档 opacity 1、blur 0,切换用 300ms ease-out。注意是分档切换,不是逐帧插值 —— 中间不该有过渡态。