滚动图片视差特效（容器内滚动，多层速度实时可调）

效果演示（真实可交互）

演示区用内嵌滚动容器模拟页面滚动，每张「图片」由渐变图层构成（无需真实图片资源即可演示效果）。正式使用时把监听对象换成 window 或任意滚动容器即可。

完整代码

<div class="sp-scroller" id="spScroller">
  <div class="sp-slide">
    <div class="sp-img" data-speed="-0.28"></div>
    <div class="sp-img sp-fg" data-speed="0.42"></div>
  </div>
</div>

.sp-slide { position: relative; height: 300px; overflow: hidden; }
.sp-img {
  position: absolute; left: 0; right: 0; top: 50%; height: 140%;
  will-change: transform;
}

const sc = document.getElementById('spScroller');
const imgs = sc.querySelectorAll('.sp-img');

function update() {
  const vc = sc.getBoundingClientRect().top + sc.clientHeight / 2;
  imgs.forEach(img => {
    const r = img.parentElement.getBoundingClientRect();
    const offset = (r.top + r.height / 2) - vc;          // 元素相对视口中心的偏移
    const shift = offset * parseFloat(img.dataset.speed); // 速度系数决定移动快慢
    img.style.transform = `translateY(calc(-50% + ${shift}px))`;
  });
}
sc.addEventListener('scroll', update, { passive: true });
update();

核心公式：每张图片取其父区块中心到「视口中心」的距离，乘以各自的速度系数（负值表示反向移动），得到平移量。速度系数绝对值越大移动越快、视差越强；配合 height: 140% 与 overflow: hidden 保证移动过程中不露白边。

参数说明

兼容性与性能

• 滚动回调只读 getBoundingClientRect 并更新 transform，transform 位于合成层，不触发重排与重绘
• 监听器使用 { passive: true }，不阻塞滚动线程；图片数量少（每屏 1-3 层），每帧开销可忽略
• 渐变图层代替真实图片，体积更小、加载更快；换真实图片只需替换背景即可
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android），无需任何 polyfill 与第三方库

常见问题

Q: 滚动时图片边缘会露出背景色？ 把 .sp-img 高度设为容器的 130%-150%，并给偏移量加限幅（本组件限制 ±80px），即可保证任何滚动位置都不露白。

Q: 和「滚动文字揭示」有什么不同？ 视差强调的是「移动速度差」带来的空间纵深，元素始终可见；揭示强调的是「入场动画」，元素先隐藏再显现。两者可叠加使用。

Q: 性能有隐患吗？ 注意三点：监听器加 passive、回调内避免读写布局属性混用、图片层数控制在 5 层以内。本组件演示同时满足，滚动全程不掉帧。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。