1

当サイトではパララックススクロールを採用しています。
線形関数に従って異なるペースでスクロールする両側に 4 つのレイヤーがあり、非常にシンプルです。

ただし、特に複数のタブを開いている場合は、思ったほどスムーズではありません。
スクロールと視差画像の更新の間にわずかな遅延と、フレームレートの低下が見られます。

フレームレートは小さい画面の方がはるかに優れています (私は 27 インチの画面で開発しています) が、すべての画面で最高のパフォーマンスを得たいと考えています。

スクロールを設定するコードは次のとおりです。

win = $(window)
footerHeight = $('footer').height()
win.scroll ->
  scroll = win.scrollTop()
  baseTop = 183 - scroll - 6*scroll/footerHeight
  for layer in [0..7]
    el = parallaxLayers[layer].element
    top = parseInt(baseTop - scroll * (10 + layer % 4 * 30)/footerHeight)
    left = parallaxLayers[layer].left
    el.style.backgroundPosition = "#{left}px #{top}px"

これは CoffeeScript ですが、ほとんどの JS 開発者にとって理解できるほど単純であることを願っています。

私がすでに行っていること:

  • すべての要素をプリフェッチして、関数ですぐにアクセスできるようにします。
  • をプリフェッチして、background-position-x反復ごとにフェッチする必要がないようにします。
  • オーバーヘッドが増えるため、スタイルの設定に jQuery を使用しないでください。
  • すべてをできるだけ少ない回数で計算します (したがってbaseTop)

各レイヤーは静的に配置されているため、ジッターが発生せず、ページのリフローが発生しないように背景の位置を変更するようにしています.

他に試してみることはありますか？

パフォーマンスは画面サイズに比例するため、これは JS の問題というよりはレンダリングの問題だと思います。派手な CSS3 が役立つかもしれません。

4

1 に答える 1

3

代わりにキャンバスを使用することになりました。これにより、はるかに滑らかな感触が得られます。

于 2012-03-08T19:14:56.700 に答える