Hot Koehls

Hot Koehls

The more you know, the more you don’t know

This content is a little crusty, having been with me through 3 separate platform changes. Formatting may be rough, and I am slightly less stupid today than when I wrote it.
10 Dec 2009

New scroll transition effect - a breakdown

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&nbsp;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&nbsp;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…

← Your next flash drive
MySQL founder Michael Widenius concerned about sale to Oracle →
comments powered by Disqus