3

This question is all about improving the performance of an on-scroll parallax background effect, which currently behaves erratically. I am experiencing a lot of jerkiness across all browsers, especially at a quick scroll rate.

I have an absolutely positioned div - #img_bg - which contains a 1440px x 900px (243kb) background and I am animating 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've been using the setInterval throttling suggestion as recommended in this article: jQuery Parallax / Scroll Events Performance

I've also tried setting .animate on img_bg using various animation speeds, to see if it 'smoothens' the scroll. It doesn't.

As for rendering, the jerkiness does not disappear when all overlapping DOM elements are removed.

Also, I have noted that decreasing the multiplier from 0.5 to around 0.2 does improve performance a small amount, however, the effect of the parallax is then rendered useless.

So, the questions is, are there any more techniques to solve the jerkiness?

Community
  • 1
  • 1
Will Viles
  • 281
  • 2
  • 11
  • Did you ever resolve this issue? Creating a similar effect right now, was curious if you'd discovered any helpful optimizations – derrylwc May 19 '13 at 02:56
  • @derrylwc, setting position to fixed and altering the scroll speed accordingly did the job. However, I took out the throttling. No noticeable performance enhancement! – Will Viles May 26 '13 at 10:40

0 Answers0