Comments on: Using jQuery To Create Parallax Scrolling Backgrounds

By: John Polacek

John Polacek — Sat, 31 Dec 2011 20:05:35 +0000

If you are into the parallax effect, you will probably like Scrollorama. It is a jQuery plugin I made that lets you do css animations based on scroll position. Maybe a little difficult to explain. Check out the github demo page if you are interested: http://johnpolacek.github.com/scrollorama

By: Mainual

Mainual — Mon, 12 Dec 2011 10:19:44 +0000

Thx for this great article. Check out another great example of parallax effect: http://bit.ly/vF9KhP Do you like it?

By: blackops2

blackops2 — Fri, 11 Nov 2011 22:31:02 +0000

Always struggled with Jquery in the past, thanks for your help. You’re writing style made it very easy to follow.

By: aga

aga — Tue, 25 Oct 2011 13:51:40 +0000

It’s simply brilliant! A few lines of code and the effect is just spectacular. I must use it somewhere. Thank you very much, Stephen!

By: Stephen McIntyre

Stephen McIntyre — Fri, 15 Apr 2011 21:15:44 +0000

document.scrollWidth tells you the full width of the page.

window.pageXOffset is the current position of the user’s horizontal scrollbar.

You have to take out the timer entirely and only update when the scrollbar is moved.

By: yoonmi

yoonmi — Fri, 15 Apr 2011 20:04:34 +0000

what does that mean? scrollHeight (actually want to do scrollWidth) divided by pageXOffset, multiply image width. But can you be more specific what scrollWidth means and pageXOffset means. And does that mean you change the 10 to that number?

Thanks in advance,
YoonMi

By: Stephen McIntyre

Stephen McIntyre — Wed, 09 Feb 2011 12:32:39 +0000

Certainly. All you do is change the number 10 to something higher.

The second parameter in setInterval will be the length of time (in milliseconds) that the script pauses before it runs the function given in the first parameter. Increasing this will decrease the number of updates per second and slow down the animation.

By: WinGer

WinGer — Wed, 09 Feb 2011 10:12:11 +0000

Hi, I just found out this piece of code and I love it but i’ve being trying to make the divs move slower and I can’t find the way to do it. Could you help me please?

By: Michael Hart

Michael Hart — Wed, 15 Sep 2010 20:17:42 +0000

Sadly, this reply is a little late. But if you’re still wondering how, simply reorder this part:

$(‘#landscape’).css(‘background-position’,xAdd + ‘px 100%’);

to look like this…

$(‘#landscape’).css(‘background-position’,'100% ‘ + xAdd + ‘px’);

All the best.
Michael

By: Morris Osteen

Morris Osteen — Tue, 13 Apr 2010 17:43:08 +0000

This is a excellent post, I found your weblog searching yahoo for a similar subject and came to this. I couldnt come across to much different information on this piece, so it was good to locate this one. I will likely end up being back to check out some other posts that you have another time.