私は視差スクロール Web サイトを構築しています (私たち全員ではありません)。とりわけ、ユーザーがスクロールすると画像が表示されます。
画像を背景に配置し、その上に塗りつぶされた div を配置して、「表示」を行いました。次に、この div をスクロール位置に基づいて 100% の高さから 0% の高さまでアニメーション化し、背景画像を表示します。
私はこの種のことを複数回行っていますが、残念ながら速度が低下しています。
Chrome のビルトイン タイムライン機能を使用すると、この速度低下のほとんどが画像デコードによるものであることがわかります。上記の公開では、フレームごとに画像を再デコードしています。これには、フレームごとに画像ごとに 22 ミリ秒かかります。
ブラウザがいつ画像デコードを行う必要があるか、いつ必要でないかを知っている人はいますか? 画像のサイズを変更する必要があることは明らかですが、画像を半分だけカバーする場合はそうする必要はありませんか?
ご協力いただきありがとうございます。
私もこの問題とたくさん戦ってきました。まだ具体的なものは見つかっておらず、提案された解決策がすべてのケースで機能するとは限らず、その理由を確認できませんでした。
ともかく...
画像の上でソリッド要素をアニメーション化すると、クロムが画像の再コード化を強制するようです。
私が試したことが2つありますが、ほとんどの場合、成功しています。
カバー要素に追加-webkit-transform : translate3d(0,0,0)すると、すべてではないにしても、ほとんどの画像デコードが消えるはずです。
上記の CSS をカバー要素自体に追加しても問題が解決しない場合は、代わりに画像に追加するか、両方の要素に追加してみてください。
私の理解では、3d css プロパティを使用して、ブラウザーのソフトウェア レンダラーではなく、GPU によってキャッシュおよび処理される独自の複合レイヤーに画像をプッシュします。
90% の確率で、上記の組み合わせのいずれかが成功したことがわかりました。お役に立てば幸いです。
プロパティをどのようにアニメーション化しますか? 高さをアニメーション化するだけの代替手段がたくさんあると思います（これは、コンテナのサイズ変更のようなものです）。
背景画像を別の要素で「クリップ」するだけでは、あまり集中的ではないかもしれません。StackOverflow で、いくつかの提案を含むスレッドを見つけました。JavaScriptでアニメーションする場合、残念ながら擬似要素はオプションではありません...