Optimizing parallax scrolling in javascript/coffeescript

Question

We have parallax scrolling on our site.
It's simple enough, 4 layers on each side which scroll in different paces according to a linear function.

However, it's not a smooth as I want it to be, especially when I have multiple tabs open.
You notice a slight delay between the scroll and the update of the parallax images as well as a decreased framerate.

The framerate is much better on a small screen (I'm developing on a 27" screen) but I'd like to get the best performance on all screens.

Here is the code to setup the scrolling:

win = $(window)
footerHeight = $('footer').height()
win.scroll ->
  scroll = win.scrollTop()
  baseTop = 183 - scroll - 6*scroll/footerHeight
  for layer in [0..7]
    el = parallaxLayers[layer].element
    top = parseInt(baseTop - scroll * (10 + layer % 4 * 30)/footerHeight)
    left = parallaxLayers[layer].left
    el.style.backgroundPosition = "#{left}px #{top}px"

This is CoffeeScript but I hope it's simple enough to understand for most JS-developers.

Things that I already do:

• Prefetch all element so they can be instantly accessed in the function.
• Prefetch the background-position-x so it doesn't need to be fetched each iteration.
• Don't use jQuery for setting the style due to increased overhead.
• Calculate everything as few times as possible (hence baseTop)

Each layer is statically positioned so they don't jitter and I make sure to modify the background position so that I don't cause a reflow of the page.

Is there anything more I could try?

---

Since the performance scales with the screen size I believe this is a rendering problem more than a JS-problem. Maybe some fancy CSS3 might help?

Answer 1

I ended up using a canvas instead. This gives a much smoother feeling.