在css中创建视差固定背景图像的更有效方法

Question

我们都知道background-attachment: fixed会使背景固定并产生视差效果。但是，这是非常昂贵的，因为每次在页面上滚动时，DOM都必须重新绘制。这会让你的网站感觉有点不稳定，特别是当你的页面有几个固定的背景时。有没有人知道更好的方法呢？

Answer 1

This pure CSS example使用绝对定位、transform和perspective来渲染视差效果。对于某些浏览器，scroll-behavior: smooth还可以最小化一些可见的波动。

有一些更有效的方法可以通过使用JavaScript来渲染视差效果，方法是仅设置可见元素的动画并使用间隔来更新元素位置。This article更详细地解释了其中的一些技术。requestAnimationFrame函数特别允许浏览器在下一次可用重绘时执行滚动动画。