Parallax Scrolling

Question

Can anyone point me in the right direction? I have a DIV with a background image that is fixed, but I'd like it to scroll at a slower rate when scrolling down the page. I'm not great with jQuery or CSS3 so asking for some help.

Thanks in advance.

Answer 1

This may help: http://stephband.info/jparallax/ It turns nodes into absolutely positioned layers that move in response to the mouse.

Answer 2

http://potentpages.com/parallax-scroll-tutorial/

Here is a tutorial that my company and I created describing how to make a webpage like you are talking about. It doesn't require any jQuery or advanced CSS.

There are numerous libraries and tutorials on how to create parallax websites. We listed some here:

http://potentpages.com/parallax-tutorials/

The relevant javascript is:

var topDiv = document.getElementById("topDiv");
var speed = 1.5;

window.onscroll = function()
{
   var yOffset = window.pageYOffset;
   topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}

Where "topDiv" is the element that you want to move slower than the "regular scrolling speed." To make the element move slower, increase the speed variable. To make it move slower, decrease it.

Answer 3

There are multiple tutorials around the web regarding parallax effect. Here area two just form a simple google search for "parallax effect tutorial":

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://richardshepherd.com/smashing/parallax/

http://stephband.info/jparallax/

Answer 4

window.onscroll = function(e)
{
    var val = document.body.scrollTop / your_scroll_factor;
    document.getElementById('your_background_image').style.posTop = -val;
}