答案是用transform+mousemove实现轻量级视差背景：监听鼠标移动，通过getBoundingClientRect归一化坐标，乘以最大偏移量后用translate3d动态调整位置，配合requestAnimationFrame节流和will-change优化，禁用background-attachment:fixed，弃用background-position以保障60fps性能。
用 transform + mousemove 实现轻量级视差背景
直接上核心逻辑：监听鼠标移动，计算偏移量，用 transform: translate() 动态调整背景图位置。不需要第三方库，原生 JS 就够用，兼容性覆盖所有现代浏览器。
关键不是“动起来”，而是动得自然——偏移量必须按容器尺寸归一化，否则小屏幕猛甩、大屏幕纹丝不动。
- 取
event.clientX和event.clientY，减去容器左上角坐标（用getBoundingClientRect()） - 除以容器宽高，得到
-0.5 ~ 0.5区间的归一化值 - 再乘以你想要的最大偏移像素（比如
20px），就是最终translateX/Y - 别忘了给背景容器设
background-attachment: fixed—— 这个是干扰项，视差效果里它反而会破坏定位，必须删掉
background-position vs transform：选哪个？
用 background-position 改背景图坐标也能动，但性能差、卡顿明显，尤其在低配设备上。Chrome DevTools 的 Performance 面板里能清楚看到 layout → paint 链路过长。
transform 走的是合成层（compositor），不触发重排重绘，帧率稳在 60fps。实测下来，transform 的 CPU 占用不到 background-position 的三分之一。
立即学习“前端免费学习笔记（深入）”；
- 必须给背景容器加
will-change: transform（只在需要时加，别全局写） - 如果容器有
overflow: hidden，确保偏移后图片边缘不会被意外裁切（可适当扩大背景图尺寸或用background-size: cover） - 移动端慎用——
mousemove在 iOS Safari 上不触发，得 fallback 到touchmove，且需处理preventDefault()阻止滚动冲突
防抖和节流：为什么你的视差总感觉“粘滞”？
鼠标移动事件太密（每秒上百次），不做控制的话，JS 频繁改样式会导致渲染队列积压，视觉上就是延迟、拖影、跟不上指针。
别用 setTimeout 手写防抖——这里更适合节流（throttle），保证每 16ms（≈60fps）最多更新一次。
- 用
requestAnimationFrame是最顺滑的选择：把偏移计算放在 rAF 回调里，天然对齐屏幕刷新节奏 - 避免在事件回调里直接调用
element.style.transform = ...，先存到变量，rAF 里统一更新 - 如果页面有多个视差层（前景/中景/背景），不同层用不同偏移系数（比如背景 ×0.1，中景 ×0.3），才像真视差
IE11 兼容？别费劲了
IE11 不支持 transform 的 translate3d() 在 background 容器上的平滑动画，强行加前缀也卡成幻灯片。更麻烦的是，IE11 的 mousemove 坐标计算和 getBoundingClientRect() 行为和现代浏览器不一致，微小偏移会累积误差。
真实项目里，检测到 IE11 就直接关掉视差，回退到静态背景图——用户感知远好于一个半死不活的抖动效果。
- 用
if ('msMaxTouchPoints' in window)快速判断 IE - 别试图用
filter: progid:DXImageTransform.Microsoft.Matrix模拟，性能更差，且无法和鼠标坐标联动 - 即使加了 polyfill，也无法绕过 IE11 渲染管线的固有瓶颈
视差的本质是增强沉浸感，不是炫技。鼠标偏移量算错几个像素没人察觉，但卡顿和错位会立刻破坏体验——把精力放在归一化计算和 rAF 调度上，比纠结兼容旧浏览器实在得多。
