如何利用CSS Scroll-driven动画实现滚动联动视觉差？-css教程-PHP中文网

能实现多层视差，但需复用同一scroll-timeline，为各层单独定义@keyframes并用animation-range分段控制触发区间，位移比例须通过transform显式配置，css无原生parallax-speed属性。

如何利用css scroll-driven动画实现滚动联动视觉差？

能实现，但必须用 scroll-timeline + animation-timeline 绑定多层元素，并手动控制各层的 animation-range 和关键帧位移比例——纯 CSS 视差无法自动“按系数缩放”，所有速度差都得靠动画进度映射和 transform 偏移量显式配置。

为什么不能直接写 `parallax-speed: 0.3`？

CSS 没有原生视差系数属性。所谓“中景滚动 60%、背景 30%”，本质是同一滚动时间线下，不同元素的动画执行范围（animation-range）和位移幅度（transform）按比例缩放的结果。浏览器只管“滚动到哪 → 动画走到哪”，不负责“换算成多少像素”。

scroll-timeline 提供的是归一化进度（0% → 100%），不是物理滚动距离
各层位移必须由 @keyframes 中的 transform 值显式定义，比如背景层从 translateY(0) 到 translateY(-200px)，而前景层走 translateY(0) 到 translateY(-50px)
如果想让背景“看起来慢”，就得让它在相同滚动区间内移动更少像素，或拉长它的 animation-range 范围

如何配置多层滚动时间线并绑定不同 range？

一个容器配一条时间线即可，多层共享同一 scroll-timeline-name，但各自用 animation-range 切割不同触发段，再配合不同 keyframes 幅度实现速度差：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@scroll-timeline scroll-timeline-main {
  source: auto;
  orientation: vertical;
  scroll-offsets: 0%, 100%;
}
<p>.foreground {
animation: slideIn 1s linear;
animation-timeline: scroll-timeline-main;
animation-range: entry 0% cover 80%; /<em> 入口即开始，覆盖前 80% 滚动 </em>/
}</p><p>.midground {
animation: slideIn 1s linear;
animation-timeline: scroll-timeline-main;
animation-range: entry 20% cover 90%; /<em> 延迟启动，节奏更平缓 </em>/
}</p><p>.background {
animation: parallaxBg 2s linear;
animation-timeline: scroll-timeline-main;
animation-range: entry 0% cover 100%; /<em> 全程参与，但位移更小 </em>/
}</p><p>@keyframes slideIn {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}</p><p>@keyframes parallaxBg {
from { transform: translateY(0); }
to { transform: translateY(-80px); } /<em> 幅度只有 foreground 的 ~1/3 </em>/
}</p>

容易忽略的兼容性与合成层陷阱

Chrome 115+、Firefox 119+ 支持完整语法，但 Safari 17.4 仅支持 view-timeline（可视区时间线），不支持 @scroll-timeline —— 这意味着整页视差必须改用 view() + view-timeline-name，且只能绑定到容器内滚动，不能监听 document.scrollingElement。