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 Comments »
RSS feed for comments on this post. TrackBack URL
Very cool, Brett!
#1: Comment by SmileyChris — March 21, 2007 @ 7:06 am
This is friggin awesome! I want to redesign my blog as an 80′s side-scrolling game now. haha. Simply amazing.
#2: Comment by jason — March 22, 2007 @ 3:28 am
Not far away from actually implementing a parallax shooter, ey? Reminds me of Katakis and Turrican
#3: Comment by Markus — March 22, 2007 @ 7:07 am
love it! now let’s do some experimenting…
#4: Comment by schnuck — March 22, 2007 @ 8:39 am
That’s very cool! Quite inspirational.
Anyway, I’ll be working across the street from Natcoll starting from next week. Might see you around.
#5: Comment by Sid Bachtiar — March 22, 2007 @ 1:20 pm
Didn’t seem to work for me (using MAC – OS X 10.4.9 and FF 2.0.0.2), sorry…
#6: Comment by trice — March 22, 2007 @ 6:28 pm
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
#7: Comment by sal — March 22, 2007 @ 11:52 pm
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..
#8: Comment by Joshua — March 23, 2007 @ 2:03 am
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
#9: Comment by Paolo Montrasio — March 23, 2007 @ 7:22 am
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!
#10: Comment by Leland Scott — March 23, 2007 @ 2:12 pm
works in Opera 9.10 for me, as long as you scroll really slowly… :p
otherwise, works great!
#11: Comment by mdm-adph — March 24, 2007 @ 3:18 am
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/
#12: Comment by kremalicious — May 23, 2008 @ 3:11 pm
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
#13: Comment by Dirk — August 18, 2010 @ 12:36 pm
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?
#14: Comment by Rob — February 14, 2011 @ 2:20 am
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.
#15: Comment by Steve Ollice
Twitter: ollicedesign
— May 11, 2011 @ 4:45 am
Thanks for the script. Awesome! I’m also wondering if it’s possible to make it scroll horizontally.
Thanks again – Kevin
#16: Comment by Kevin — June 7, 2011 @ 1:01 am
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!
#17: Comment by Andreas Hopf
Twitter: um undancep
— August 21, 2011 @ 3:53 am