この質問は、現在不規則に動作しているスクロール時の視差背景効果のパフォーマンスを改善することに関するものです。すべてのブラウザーで、特に速いスクロール レートで、多くのぎくしゃくした動きが発生します。
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 に減らすと、パフォーマンスがわずかに向上しますが、視差の効果は役に立たなくなります。
それで、問題は、ジャーキネスを解決するためのテクニックが他にありますか?