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?
source to share
No one has answered this question yet
Check out similar questions: