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
jquery scrolltop parallax onscroll


source to share


No one has answered this question yet

Check out similar questions:

7428
How can I check if an element is hidden in jQuery?
4523
Thinking in AngularJS if I have a jQuery background?
4345
How can I check if a checkbox is checked in jQuery?
3952
Setting "checked" for a checkbox with jQuery?
2644
Is there a function "exists" for jQuery?
2302
Add table row in jQuery
2245
How do I refresh the page using jQuery?
2101
jQuery scroll to element
1957
Disable / enable input with jQuery?
1494
Scroll to the top of the page using JavaScript?



All Articles
Loading...
X
Show
Funny
Dev
Pics