cssで視差固定の背景画像を作成するより効率的な方法

Question

私たちは皆、background-attachment：fixedは背景を固定し、視差効果を作成することを知っています。ただし、ページをスクロールするたびにDOMを再描画する必要があるため、これは非常に高価です。これは、あなたのページにいくつかの固定された背景がある場合、特にあなたのサイトを少しばれて感じる。誰もがこれを行うためのより良い方法を知っていますか？

Answer 1

This pure CSS exampleは、絶対配置を使用して、transformとperspectiveを使用して視差効果をレンダリングします。いくつかのブラウザでは、scroll-behavior: smoothはまた、可視の断続性の一部を最小限に抑えることができます。

JavaScriptを使用して可視要素のみをアニメーション化し、間隔を使用して要素位置を更新することにより、視差効果をレンダリングする効率的な方法があります。 This articleは、これらの技術のいくつかをより詳細に説明しています。特に​​関数は、ブラウザが次の利用可能な再描画時にスクロールアニメーションを実行できるようにします。