私は視差スクロールウェブサイトを構築しています（私たちすべてではありません）。ユーザーのスクロールに合わせて画像が表示されます。Image Chromeからのデコードタイムライン開発ツール
私はバックグラウンドで画像を置いて、上に固体の塗りつぶしdivを配置することによって '露呈'をしました。次に、このdivをスクロール位置に基づいて100％の高さから0％の高さにアニメーション化して、背景画像を表示します。
私はこのようなことを何度もやっていますが、残念ながら私は遅くなってきています。
Chromeの内蔵タイムライン機能を使用すると、この減速のほとんどが画像デコードから発生していることがわかります。上記の説明のために、それはフレームごとに画像ごとに22msかかる、毎フレームの画像を再復号しています。
ブラウザでイメージデコードを行う必要があるときとそうでないときは誰でも知っていますか？画像のサイズを変更した場合、画像を半分だけカバーする必要があるとは限りません。
ありがとうございました。
どのようにプロパティをアニメーション化しますか？私は高さをアニメートするだけの代替案がたくさんあると思います（これはコンテナのサイズ変更の一種です）。
多分、別の要素で背景画像を単にクリップするのはあまり集中しません。私はStackOverflow上でそれに関するスレッドをいくつか提案しました。あなたはJavaScriptを使用してアニメーション化する場合は、残念ながら擬似要素はnoオプションではない...
また、私はこの問題に多くのことを戦ってきました。まだ私は何も具体的に見つけていないし、私の提案された解決策はすべてのケースで動作するようには思われないし、なぜ私は確認できませんでした。
とにかく...
あなたのイメージの上にソリッド要素をアニメーション化する場合、クロムは、画像の再符号化を強制することが表示されます。
私が試した2つのことがあり、大部分が成功しました。あなたがカバーエレメントに-webkit-transform : translate3d(0,0,0)を追加した場合、画像が消えデコードないすべての場合
、あなたは、ほとんどのを見つける必要があります。
上記のCSSをカバーエレメント自体に追加しても問題が解決しない場合は、画像に追加するか、実際に両方のエレメントに追加してみてください。
私の理解は、3D CSSプロパティを使用すると、GPUはなく、ブラウザソフトウェアレンダラによってキャッシュされ、処理され、それ自身の複合層に画像を押すことです。
上記の組み合わせのいずれかが成功したのは90％です。私はそれが助けて欲しい
こんにちはゴルディール、応答のおかげで。私は、Webkit変換を試してGPUに苦労してもらうことを覚えていますが、最終的に私の問題を解決したとは思いません - 初期化の時間が頭痛を引き起こしていたかもしれませんが、正直言ってそれがうまくいかなかった理由をよく覚えていない。最終的には、さまざまなアイテムをさまざまな方法で使用しています。ここにそれは実際に働いている：http://www.patentise.com/ –
あなたがそれをソートしたことを聞いてうれしい:-)それは見た目と方法で素晴らしい作品。 – gordyr
こんにちはNirazul、私はjavascriptで覆いのdivの高さをアニメーション化します。クリップメソッドが何か違う方法で動作しているかどうかがわかります。 –
多くの感謝Nirazul、私は画像を隠すためにクリッピングを使用すると表示よりもはるかに効率的な方法であることを発見しました：なし、または画面から画像を移動するか、 Chromeでイメージデコードが実行されています。しかし、私は実際のSOの質問が「ブラウザが画像デコードを行う必要があるときとそうでないときを知っていますか？あなたの答えはとても役に立ちましたので、ありがとうございました。 –