I was just perusing ThinkGeek for Christmas gift ideas when I noticed that the overflow graphics — the stuff that appears to left and right of the main content at larger screen resolutions — was different depending on where you scrolled. At the top it showed robots, and zombies at the bottom. Check it out for yourself, the homepage has it.
Cool, right? Here’s how they did it. First, the robot and zombies elements are actually all in one image. The following image is set as the CSS background-image for <div id="fancywrapper">…
http://www.thinkgeek.com/images/sitewide/backgrounds/robozombies7.png
Note the color differences in the elements. Now look at the background-image for the <div id="wrapper"> tag…
http://www.thinkgeek.com/images/sitewide/backgrounds/bodytilebottom-tall.jpg
It’s really tough to see in the image by itself, but there’s a color transition in effect here, the bottom is full black (like the robots), and the top is a dark gray (like the zombies). Don’t believe me? Hook up the Colorzilla Firefox add-on and scan the image from top to bottom.
This image is then locked to the bottom of the screen and repeated across the base of the page (background-position:left bottom; background-repeat:repeat-x;). The upper areas of the page, past the height of bodytilebottom-tall.jpg, get background color from the <body> tag, which matches the dark gray of bodytilebottom-tall.jpg. The final effect is a seamless visual transition from dark gray up top to black at the very bottom.
To get the robots and zombies into place, it’s simple CSS definitions to place it at the bottom (background-attachment:fixed; background-position:center bottom; background-repeat:repeat-x;).
Finally, with robozombies7.png locked into position on the screen, over top of a scroll-enabled bodytilebottom-tall.jpg, we get the fade effect as the user scrolls the towards the bottom of the page.
Like I said, cool, right?
P.S. Want to break down site layouts and effects yourself? You need 3 things…
- Mozilla Firefox
- Firebug add-on
- Web Developer toolbar
That is awesome. Thanks for breaking it down. Now I need an excuse to do something like this on one of my sites.