I got thinking about how I could build a parallax background system for web pages, powered with JavaScript, so I did:
Done using simple CSS and a nice bit of JavaScript, but nothing too advanced, and without any libraries!
Enjoy it!
17 thoughts on “Parallax Backgrounds”
Comments are closed.
Very cool, Brett!
This is friggin awesome! I want to redesign my blog as an 80’s side-scrolling game now. haha. Simply amazing.
Not far away from actually implementing a parallax shooter, ey? Reminds me of Katakis and Turrican 😉
love it! now let’s do some experimenting…
That’s very cool! Quite inspirational.
Anyway, I’ll be working across the street from Natcoll starting from next week. Might see you around.
Didn’t seem to work for me (using MAC – OS X 10.4.9 and FF 2.0.0.2), sorry…
Nice to see an nzer while flicking through link lists.
trice: Seems to work for me, although not as fluidly as it’s probably supposed to. I’m same setup as you, tried in both Opera 9.1 and FF 2.0.0.3
Hold up.. IE > Tools > Internet Options > Settings > Check for new versions: “Every visit to the page”… breaks the hell out of it. Images can’t load fast enough and then the JS break (presumably cause it doesn’t reload with scrolling either). Will def need something a little more robust for use..
It works with IE 6 on WinXP but I get an error Invalid argument, line 65, char 3 after scrolling the page for a few seconds.
Anyway, it’s a very nice hack 🙂
Wow! Way kewl, man. I can see it would be very easy to get dizzy from this! 🙂 Great job thinking outside the box and coming up something totally new. Works great in Safari!
works in Opera 9.10 for me, as long as you scroll really slowly… :p
otherwise, works great!
even more than 1 year after you’ve posted this article and demo i have to say: awesome!
I’ve included your example in my showcase article about various websites using the parallax effect done with css):
http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/
Hi!
Really appreciate your script. finally something working without java and without needing to resize my window… Thanks!
I’m trying since 2 hours and don’t seem to find the answer
how to make this work for X-axis…
Is there any way?
Please let me know.
Cheers, Dirk
Hey guys,
trying to get this working, but on scroll the image jumps down 50px then scrolls up…
here’s what I have:
function calcParallax(tileheight, speedratio, scrollposition) {
return ((tileheight) – (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
window.onscroll = function() {
var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
var ground = document.getElementById(‘ground’);
var groundparallax = calcParallax(50, 12, posY);
ground.style.backgroundPosition = “0 ” + groundparallax + “px”;
document.getElementById(‘javascriptcode’).style.backgroundPosition = groundparallax + “px 0”;
}
}
any ideas?
Hello Brett! Four years later and your blog post holds up! I tweaked some of your parameters and added a few layers, and came up with a unique example. Check out my fishing portfolio.
Thanks for the script. Awesome! I’m also wondering if it’s possible to make it scroll horizontally.
Thanks again – Kevin
At last, no jQuery etc. in sight, just plain JavaScript… great! The real fun with this starts when you specify negative numbers for “speedrato” for all or some backgrounds on a multiple background setup, especially if one half of a website is travelling upwards, the other half downwards… In any case, thanks for making your script available!