CSS Scrolling Animation
While redesigning this site, I tried implementing many different background effects to grab users’ attention. Although I decided against using the following effect, perhaps you can make better use of it. This is a demonstration of how to use two images and some simple CSS to animate the background of your site while the user scrolls up and down the page.
Here is a demonstration of the effect using three mask possibilities.
This technique follows Rufus Butler Seder’s Scanimation technique he invented for use in greeting cards and children’s books. Here’s an explaination of how it works:
The animation consists of two images: the base layer that contains segments from each frame of animation in the form of single pixel, horizontal scan lines, and a mask that will only allow one frame at a time. The animation in this demo consists of 4 frames, so every 4th horizontal line in the base layer will belong to the same frame.
The mask layer consists of 3 opaque horizontal lines, followed by 1 transparent line. In total, the mask layer really only needs to be 4 pixels high (or 3, or 5, or however many frames you are using) and one across, but I have larger masks here for demonstration. The mask works best if it’s the same color as the foreground of the base layer, but that’s not the only option. Try dragging each of the masks slowly over the base layer to see the effect in action.
 |
 |
| The base layer | Foreground color mask |
 |
 |
| Background color mask | Different color mask |
Let’s take a closer look at the base layer, frame by frame. Our base layer image contains 4 frames of animation, each one showing a spiral at a different stage of rotation. Even though each frame only shows part of the image, your brain will successfully fill in the rest. Drag and drog these frames onto each other to see how they are merged together to create the base layer image above.
 |
 |
| Frame 1 | Frame 2 |
 |
 |
| Frame 3 | Frame 4 |
Once you’ve created the images in your favorite image editor, the simple code below will allow you to tile the base layer in the background to scroll with the page, while the mask stays above it (but below the content), unmoved.
The HTML
<body>
<div id='mask'></div>
<h1>Header</h1>
<div>Content</div>
</body>
The CSS
body { background:url('img/spiral.png'); }
#mask { position:fixed; top:0; left:0; width:100%; height:100%; background:url('img/mask.png'); z-index:-10; }
