3

这个问题都是关于提高滚动视差背景效果的性能，该效果目前表现不稳定。我在所有浏览器中都遇到了很多抖动，尤其是在快速滚动时。

我有一个绝对定位的 div - #img_bg - 它包含一个 1440px x 900px (243kb) 背景，我正在使用以下 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