Article
About the Author
Alex Walker
Alex manages design and front end development for SitePoint.com and writes SitePoint's monthly design newsletter, the SitePoint Design View. He also maintains Pixel Perfect, SitePoint's Web Design Blog.
Warning: This Secret CSS Technique Will Surprise You!
A few weeks ago I was shopping with my two-year-old daughter when we came across a brilliant little picture book—Gallop! A Scanimation Picture Book by Rufus Butler Seder.
Now to be honest, the written content of Gallop! is fairly standard kids’ fare—“Can you see the horse gallop?” is probably the literary highlight there. However, the little animation trick it employs is quite beautiful.
The effect works something like this:
- Take a six-frame animation and slice it into wafer-thin vertical strips.
- Throw away 5 out every 6 strips.
- Re-assemble the remaining strips into a single composite image, containing parts of all six frames.
- Cover this composite image with a black acetate sheet that contains thin, transparent lines running from top to bottom. This sheet obscures most of the image behind it, allowing only one frame to be seen at a time.
As the reader opens and closes the page, the illustration is pushed and pulled sideways behind the sheet. The result is a pretty nifty illusion of movement.
Now, this technique mightn’t sound like it would give a convincing result—after all, there’s a lot of black and not much image to see. However, as the animated GIF above shows, the effect is surprisingly impressive. Impressive enough, in fact, to get me wondering if it might be possible to adapt it to work online as users resize their browsers.
I’m going to cut straight to the chase by showing you the test case I mocked up, and then I’ll talk briefly about some of the challenges and issues I came across in building it. Later, I’ll explain the somewhat hairy process involved in creating your own.
Some Random Thoughts
- This is a first take. There are quite a few lessons I’d bring through to any updated version.
- This is a three-frame animation. I originally tried a simpler two-frame version of this animation. This was clearer, but generated too much lightning.
While it’s perfectly possible to design four-, five-, or six-frame animations using this method, the reality is that each additional frame makes the animation progressively darker, reducing the clarity of the animation. - They aren’t straight vertical lines in your example, right? No, vertical lines aren’t the only transparent shapes that work. In fact, I found that grids and checkerboard patterns seem generally to give a clearer result.
Peekaboo Animation: the Method
Okay, so you’re inspired to give it a try. Let’s look at the nuts and bolts of creating the effect. It does require some precision, so try not to get distracted halfway through the process.
It’s not the easiest process to explain, but I’ll do my best—so stick close. I’m going to use Fireworks for the example, but it shouldn’t be difficult to get a similar result in Photoshop or a variety of equivalent graphic apps.
Step 1. Create your animation.
This part is up to you, but you’ll need to create each frame on its own layer.
Step 2. Create your Peekaboo Grid.
The Peekaboo Grid is the semi-transparent grid that overlays our image, allowing only one frame to peek through at any moment. I built my grid in Fireworks, and it’s nothing more than a customized pattern fill.
Here’s a small seamless tile section for you to download. It should allow you to create as much grid as you need.
To use the tile in Fireworks, create a new square shape, set its fill to Pattern and select Other.... You’ll then be able to select the tiling PNG. Resizing the shape should automatically tile the shape with the repeating grid pattern, giving us as much grid as we need. Export a chunk of grid (as a GIF) that’s big enough to comfortably cover your animation area.
Step 3. Create the Peekaboo Grid Mask.
Now things get a bit trickier. Copy the grid shape we just made, and paste it as a new layer covering your three frame layers. Align the grid to the top, left corner of your document.
Step 4. Recolor the Mask flouro blue
Those involved in TV production might be aware of the chroma key technique, which allows producers to target a (usually) blue screen behind a weather man, and replace it with animated weather information. We’ll use a variation on this technique now.
Select your black Peekaboo Grid layer, and apply a Hue/Saturation... filter to it (Filters/Adjust Color/Hue Saturation...). Adjust the sliders until you’ve turned the grid a bright, fluoro blue color.
The exact color you choose isn’t important. You simply need to ensure that the color isn’t used anywhere in the animation, so bright, fluorescent colors are usually best.