There are a lot of flat, boring web sites out there, but there are also a lot that are interactive and sometimes even include fun little surprises. Today, I’m going to show you one way to create a fun little interactive surprise in your web page design. David, a regular reader, pointed me to this page and asked how they accomplished the effect with the footer image that changes (click the link and watch the bottom of the page while scrolling down slowly). The effect is what I tried to illustrate below.
Pretty cool, right? The best part is that this is super easy to achieve. Below, I’ll walk you through a few easy steps I completed to create my own interactive background.
Step 1: Create your images
To make this trick really work you want at least two images. The first is a two-toned image that represents the before and after imagery. For my example, I used grey on top and black on bottom. The second image is the gradient that creates the illusion. The gradient should fade in from the same top color to the same bottom color as your before/after image. Try to make both images close to the same height, but experiment with the positions of your artwork. Also, this works better if the two pieces of artwork don’t overlap each other. Just as important is the format. GIF files may work, but generally, PNG images are best.
Step 2: Create HTML
The HTML is really very simple. Inside your body tag, you want a div element with a class of “wrapper” and inside this, another div element with a class of “push”. Below those, you need a div element with a class of “footer”. You can use different names, as long as they match the CSS when you’re done. Be sure to fill up the “wrapper” div with enough content to make the visitor scroll.
Here’s my HTML:
Step 3: Create your CSS
The final step is to create your CSS. This can be inside your HTML page or in its own .css file that the page loads. Either way, set up the CSS for the body and each div element you created as seen below. Of course, the height and margin values may be different for your usage.
With the third step done, the only thing left to do is check it in a browser and adjust as needed. Here’s the rough example I threw together here . I didn’t spend a lot of time on it, but for my example, I created a before/after image using a circuit diagram I found online and a one-color version of my logo. I also kept the skulls image for my demo because I liked it.
Quick Start Kit
I breezed through the steps a little, but it shouldn’t be too hard to accomplish if you have some knowledge of web page development. In any case, the easiest way to try this out is to create a new before/after image and play with what I’ve already done. For this reason, I packaged up the code, images, and a layerd PSD of my before/after image to get you started. Try it out for yourself and if you put it online, link to it in the comments so we can see.
