3

この質問は、現在不規則に動作しているスクロール時の視差背景効果のパフォーマンスを改善することに関するものです。すべてのブラウザーで、特に速いスクロール レートで、多くのぎくしゃくした動きが発生します。

1440px x 900px (243kb) の背景を含む絶対配置の div - #img_bg があり、次の Coffeescript コードを使用して背景をアニメーション化しています。

$(document).ready ->
  img_bg = $("#img_bg")
  jq_window = $(window)
  scroll_ok = true

  setInterval (->
    scroll_ok = true
  ), 30

  parallaxScroll = ->

  jq_window.scroll(->
    if scroll_ok == true
      scroll_ok = false
      scrolledY = jq_window.scrollTop()
      new_Y = scrolledY * 0.5
      img_bg.css "background-position", "0px " + new_Y + "px"
      img_bg.height 900 + new_Y 
  )

ご覧のとおり、私はこの記事で推奨されている setInterval スロットリングの提案を使用してきました: jQuery Parallax / Scroll Events Performance

また、さまざまなアニメーション速度を使用して img_bg に .animate を設定して、スクロールが「滑らかになる」かどうかを確認しました。そうではありません。

レンダリングに関しては、重なっている DOM 要素をすべて削除してもジャーキネスは消えません。

また、乗数を 0.5 から約 0.2 に減らすと、パフォーマンスがわずかに向上しますが、視差の効果は役に立たなくなります。

それで、問題は、ジャーキネスを解決するためのテクニックが他にありますか?

4

0 に答える 0