If you haven’t seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around when you visit the site to see the cool “parallax” effect of the hanging vines. The site itself was designed by Paul Annett. Paul wrote an article on Think Vitamin on how he created that parallax effect.
I thought I would take the idea an explain it in a bit more detail, which a slightly different application, and offer up a download for those interested.
What is Parallax?
You can think of motion parallax as what you see when you look out of a moving train. Bushes right alongside the train tracks will zip past your view, while cattle grazing in the field will appear to move more slowly across your view and the mountains in the background will hardly move at all. Parallax has particular relevance to astronomy. Not only because sci-fi movies use the effect all the time to create cool space effects, but because this effect is how we measure how far stars are away from our own solar system.
Multiple Backgrounds with Parallax
In honor of this amazing effect and it’s relevance to science, I created Starry Night. Starry night is a full-page background effect with three layers. Distant stars will only move a little bit as you resize the browser window, while closer stars will move faster. The effect is created with three page elements, all of which occupy the entire browser window. The body (“background”), a div (“midground”), and another div (“foreground”).
<body>
<div id="midground"></div>
<div id="foreground"></div>
</body>The body element will fill the entire screen by default, but we’ll have to style the other two divs with absolute positioning to do the same.
body {
background: url(images/background.png) repeat 5% 5%;
}
#midground {
background: url(images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 997;
}
#foreground {
background: url(images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 998;
}Both the midground and the foreground PNG files are alpha-transparent, so they will lay on top of each other nicely. The important part here is the % values you see in the background attribute. This controls the horizontal and vertical positioning, but in the context of this example, you can read that as “how fast you want it to move”. Also notice you can go beyond 100%, this means it will move at a faster rate than the rate of resizing the browser window.
It is worth mentioning at this time that this effect just ain’t gonna happen in IE 6 or below. Between the bugs with PNG and the bugs with absolute positioning, it’s just not worth it. In my example, I use a conditional stylesheet to display a warning message.
Where does my content go?
That’ll be up to you, notice in my example page the small bit of content in the upper right. You could do something similar. Remember that any area you build to put content into will need to be absolutely positioned and have a higher z-index value. Otherwise, the absolutely positioned foreground and midground will cover up your content area and you won’t be able to select or click anything (if you can see it at all).
[DOWNLOAD EXAMPLE]
.ZIP file inclues Photoshop document for the stars.
Cool!!!
Super cool. Now all it needs is some javascript filckering stars.
I gots me some parallex on my page now too!
This is really CLEVER!
It’s a shame that this superb effect only shows when resizing the page. :)
I could be wrong but the only reason you need to use absolute positioning in this example is because you are doing the effect at the full height of the browser window, right? The Silverback site does not use images that are the full height of the browser window so there is no absolute positioning involved.
Don’t forget that you could also apply the deepest background image to the html element itself eliminating one of the divs that only holds a background image.
Nice experiment by the way…
@chipgrafx: Partly right… it is because the elements need to be on top of one another. If you didn’t want to go full height on all of them, you could use a negative margin to push the other divs on top of one another and not need the absolute positioning.
If you used negative margins to achieve the overlay, and a .png hack attack on IE, this could be pretty useful. Really cool trick Chris.
Ah, yes. I just noticed the divs are separate. Why not just nest the foreground div inside the midground div? That seems it would result in a little less CSS.
Nice Tutorial, I read about this the other day on Vitamin, they have a pretty cool tutorial too. It is a real shame that this can’t happen without resizing the browser like Flavia said.
Maybe some javascript could be used to slowly alter the css if it was inline?
I give this 2 thumbs up for coolness and a wavering hand for usefulness : ) – Noticed the nice IE warning but should it be <!–[if lt IE 7]>, lte means less than or equal to IE7, so I’m seeing the warning message in IE7 too. Regardless, it’s a good use of the conditional to display the message.
Seriously, that is sweet, and sad that it’s not for IE6. I’m going to make that happen this weekend :)
Oka, it can work in IE6 – it needs a little javascript flavor to make it “repeat” but at the same time, it can work. I’ll try to get a working example up this weekend.
This is very cool. But my question is how many users are actually gonna resize their windows while they’re browsing through your site? Things are not so cool when you have to scroll down the page. If we can get a similar effect to work during scrolls that’d be a much more useful effect. NO?
Great job.
this it’s cool :)
werde ich bestimmt einem neuen projekt mal zur anwendung bringen
can we do that using gif instead of png?
Super cool. Now all it needs is some javascript filckering stars.
Super cool
An amazing effect!
Thank you for this tutorial – I have translated it in german (I hope this is ok?) and you’ll find it in my blog guru-20.info.
The link to the example-download is not working – I think you have the zip-file one directory higher than linked.
ByteBros
Download should be fixed.