Improving Parallax Performance with JQuery

This question has to do with improving the performance of the background parallax background on scrolling, which is currently behaving erratically. I experience a lot of jerking in all browsers, especially with fast scroll speeds.

I have an absolutely positioned div - #img_bg - that contains a 1440px x 900px (243kb) background, and I animate the background using the following Coffeescript code:

$(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 
  )

      

As you can see, I used the setInterval clause for throttling as recommended in this article: jQuery Parallax / Scrolling Performance

I also tried setting .animate to img_bg using different animation speeds to see if the scroll "flattens". This is not true.

In terms of rendering, the twitching doesn't go away when all overlapping DOM elements are removed.

Also, I've noticed that decreasing the multiplier from 0.5 to about 0.2 does improve performance in a small amount, however, the parallax effect becomes useless.

So there are questions, are there any other methods for dealing with insolence?

+3


source to share





All Articles