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!
12 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