视差只动 transform,不动 top/left
背景层位移统一用 translate3d(0, y, 0),并加 will-change:transform;用滚动进度驱动时速度差控制在前景的 0.2–0.5 倍。验收:滚动时主线程长任务 < 50 ms,掉帧率低于 5%。
以三层视差背景(网格底纹/主色光斑/暖金高光)配合滚动揭示动画,把千万级明细的挖掘过程拆成可阅读的叙事节奏。差异点:不堆图表,而是让「数据处理链路」本身成为版式结构。
面板按「总量 → 分布 → 异常」三段推进,滚动进入视口时逐段揭示,避免一次性信息过载。
每条都给出做法与量化阈值,可直接落到工程排期与验收单里。
背景层位移统一用 translate3d(0, y, 0),并加 will-change:transform;用滚动进度驱动时速度差控制在前景的 0.2–0.5 倍。验收:滚动时主线程长任务 < 50 ms,掉帧率低于 5%。
底层网格(低对比)→ 主色光斑(中对比)→ 暖金高光(点睛)。每层透明度差 ≥0.15,避免糊成一片。移动端降到 2 层,位移幅度减半。
用 animation-timeline:view() + animation-range:entry 8% cover 34%,让元素进入视口 8% 处开始、34% 处完成;不支持时自动降级为静态呈现,保证内容始终可读。
首屏仅出「总量/分布/异常」,其余下沉懒加载;单图数据点 ≤ 200,超过则先聚合到 12–24 个桶。目标:首屏数据就绪 ≤1.2 s,交互查询 P95 ≤320 ms。
1600 px 放宽容器并增列,1024 px 切双栏,640 px 单列堆叠,380 px 以下内边距收到 8–12 px。scroll-snap-type:y proximity 仅在 ≥1024 px 且未开启减弱动效时启用,避免小屏抢滚动。
正文与底色对比度 ≥4.5:1,强调色只用于关键数字与按钮。必须提供 prefers-reduced-motion: reduce 分支:关闭视差位移与粒子动画,保留静态层级与全部文案。
overflow:hidden 内、位移量 ≤ 容器高度的 12%;吸附段落必须短于视口高度,并设置 scroll-margin-top 防遮挡锚点标题。
三张特性卡围绕中心链路展开,语序一致、指标可核验,便于横向对比选型。
明细层按分钟滚动聚合,只把变化量推给前端渲染,滚动过程中柱体与折线保持连续。
每个挖掘结论都挂载可读解释:贡献度排序、样本量、置信区间,点击即展开,不用离开当前滚动位置。
把分析结论组织成「章节 + 节拍」,滚动到哪个节拍就高亮哪段结论,形成可复述的数据故事。
按数据体量、可视化复杂度与视差层数划分,价格以「月」为单位,含实施与调优。
同一套视差版式,按角色切换首屏节拍与指标密度,做到「一页多读法」。

首屏直接给出异常周期与波动幅度,滚动即展开下钻路径,减少在多个报表间来回跳转。

把行为路径聚类结果做成滚动章节,每章一个典型人群,配合漏斗图与停留时长分布。

字段级血缘以层级缩进 + 视差纵向展开,质量评分用细高亮标注,问题字段一眼可辨。

面向外部汇报时启用叙事模式:节拍更少、文案更短、动效更克制,重点突出结论而非过程。