3

I want to make the background on my blog move slightly every time I scroll down, giving it a 3D effect. I even made a pretty picture to show you exactly what I mean:

enter image description here

so how would I go about doing this? Say, I move the posts on my blog down 50%. I would want my background to move down about 25%. So the background would move down half of what my posts do. Thanks!

user2632633
  • 61
  • 1
  • 1
  • 5

2 Answers2

2

Here's a tutorial that walks through the process of making a parallax effect without any plugins: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

Here's the demo: http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/index.html

shshaw
  • 3,123
  • 2
  • 23
  • 33
0

Is smokeyPHP's solution applicable to a div instead of a background image? So instead of the background image scrolling at a slower speed, make an underlying div (z-index:-1) scroll at a slower speed.

SmokeyPHP's solution]1

document.addEventListener('scroll',function(e) {
    var newPos = (window.scrollY*-1)/2
    document.body.style.backgroundPosition = "center "+newPos+"px";
});

Eddy

Eddy
  • 566
  • 2
  • 8
  • 28