更有效的方法在css中創建視差固定背景圖像

Question

我們都知道background-attachment：fixed會使背景固定並創建視差效果。但是，這是非常昂貴的，因爲每次在頁面上滾動時，DOM都必須重新繪製。這會讓您的網站感覺有點波動，尤其是如果您的網頁上有多個固定背景。有誰知道更好的方法來做到這一點？

Answer 1

This pure CSS example使用絕對定位，transform和perspective來呈現視差效果。對於某些瀏覽器，scroll-behavior: smooth也可能會減少一些可見的不連貫性。

還有更有效的方法來渲染視差效果，方法是使用JavaScript，通過僅動畫可見元素並使用區間來更新元素位置。 This article更詳細地解釋了其中的一些技術。該功能特別允許瀏覽器在下一次可用重繪時執行滾動動畫。