Okay, go to the page and scroll to the bottom: You'll notice the background at the bottom changes as you scroll. For the life of me, I can't figure out how they did this. Any ideas? It's pretty much the coolest thing I've seen in a long time.

2 answers

This was chosen as the best answer

It's actually pretty simple from a technical perspective. It's very clever though. :D

On the div with the id "wrapper" they have this gradient background: http://thinkgeek.com/images/sitewide/backgrounds/bodytilebottom-tall.jpg

On the div with the id "fancywrapper" (which is a child of "wrapper") they have this background: http://www.thinkgeek.com/images/sitewide/backgrounds/robozombies7.png

The 2nd image is a transparent PNG, which is placed on top of the solid gradient background in the 1st image. If you look closely, there's 2 different shades of gray in both images. As you scroll down the page, the darker color in the gradient slowly matches up to the color of the robots, which makes them appear as though they're fading away. When the color of the solid background matches the robots completely, it looks like they disappear.

The zombies, however, match the lighter shade of gray in the gradient. They're still there when you're browsing the page, you just can't see them because they're the exact same color as the lighter shade of gray in solid background behind them.

Answered about 7 years ago by Nick Pettit
  • Great answer Nick. You got it spot on while my answer was a partial guess. +1 o.k.w about 7 years ago
  • Excellent. I saw those two images but for some reason was thinking they were the other way around (as in the zombies were on top of the tilebottom), and I didn't realize the png was transparent. Very, very clever of them! Cameron Conner about 7 years ago
  • And thank you, by the way :) Cameron Conner about 7 years ago
  • No problem! :D Nick Pettit about 7 years ago
o.k.w 2355

The background didn't change. Just an illusion which is smartly executed.

There's a static background image in one of the container element which has this image:


You notice the zoombies are in a dark shade (color: #414244) but not black while the robots are in pure black. By setting this background to 'fixed' to the bottom, it will not move with the vertical page scroll.

The trick (I guess) now is having a layer of masking background which has gradient fading from black to the dark shades. This background moves with the vertical scroll and when layered upon the fixed robozoomies background creates the illusion of the zoombies fading in and robots fading out (vice versa as you scroll).

Brilliant I must say.

Answered about 7 years ago by o.k.w