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

Question

我们都知道背景附件：固定会使背景固定并产生视差效果。但是，这非常昂贵，因为每次在页面上滚动时DOM都必须重新绘制。这会让您的网站感觉有些不稳定，特别是如果您的网页上有多个固定背景。有谁知道更好的方法吗？

Answer 1

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

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