5

この質問は、スクロール イベントよりも視差に関するものではありません。私のプロジェクトに関する私の最大の関心事は、パララックス スクロール効果がスムーズでぎくしゃくしないことです。

私の質問は、特定のプロパティは他のプロパティよりもアニメーション/スクロールが優れていますか? たとえば、スクロール時にmargin-topを調整するよりも、background-positionの方がうまく機能します。

4

1 に答える 1

11

一部のプロパティが他のプロパティよりもアニメーション化中のオーバーヘッドが少ないかどうかはわかりませんが、誰かがその主題に関する良い情報を投稿してくれたら非常に興味があります. そうは言っても、私はパフォーマンスを向上させることができるいくつかのことを知っています.

設定position : absoluteにより、ページの通常のフローから要素が削除されるため、アニメーション化するときにページ全体を再描画する必要はありません。position : relative祖先要素と子孫要素が影響を受ける可能性があるため、ページ全体の再描画が強制されます。

また、scrollイベントを抑制しても 30fps を達成できます。

var scroll_ok = true;
setInterval(function () {
    scroll_ok = true;
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance
$(window).bind('scroll', function () {
    if (scroll_ok === true) {
        scroll_ok = false;
        //now run your code to animate with respect to scroll
    }
});

更新 :: 2014-08-26

これが最初に書かれて以来、状況は変わっています。いくつかの簡単なメモ:

  • 最新のブラウザは、特定のプロパティ セットを指定して要素の描画を GPU で高速化しようとしてopacityいます (transform頭の中で)。topこれらのプロパティを使用すると、 /などの他のプロパティよりもパフォーマンスが大幅に向上しますleft(また、を使用するよりも多くのインスタンスでページを再描画する必要がありますtransform)。

  • will-changeは、ブラウザによって取り上げられたばかりの新しいプロパティです。基本的に、変更される可能性のあるプロパティのリストを設定して、ブラウザが事前にプロパティの変更を最適化できるようにすることができます。

  • requestAnimationFrame堅牢なポリフィルと優れた最新のブラウザー サポートを備えています。これは、ブラウザーが可能な限りレンダリングするため、大量の「チャンク」を作成することなく要素をスムーズにアニメーション化するためのはるかに優れた方法です。

于 2012-01-18T18:38:19.997 に答える