Peek-a-boo Sliding Animation Done in CSS
It has been a while since I’ve seen something extraordinary in CSS that made me smile — the last one being CSS Homer. Today, I had another one of those delightful moments. Does anyone remember having one of those cardboard animation boxes as a child? You know, that thing where you had two pieces of cardboard one on top of the other. The top cardboard had vertical strips cut out from it, while the bottom cardboard would contain two pictures, overlapping one another at points where the image would peek through the vertical cut outs of the top cardboard. So that when you moved placed them on top of one another and move the bottom cardboard left and right, by viewing the changing image from the cut outs would give the illusion that the image is animating. At a whopping 2 frames!
Do you remember how amazing you thought it was back then? If not, then you are probably too young and never had the chance to experience that kind of toy — but fear not, for Alex Walker has successfully this sliding animation through CSS. The Peekabo Animation technique is a bit complicated to explain, so I leave it up to you to follow the link to the original article where there are some nice screenshots explaining how it is done.
The gist of it though, is creating the background image (or the “bottom cardboard” in real life) and placing a repeating black and transparent mesh on top of it. Both are done by assigning the background property of two nested elements (DIVs).
The result is an amazing image that animates when the user resizes the browser window. Check out the demonstration page and have fun!
While this makes for a neat demo, the downside to this, aside from having an obviously darkened image resulting from the black-and-transparent mesh, is that the user needs to resize the browser to actually see animation. So unless you plan to inform the visitor about your cool website feature, it’s pretty much left up to chance that a visitor might actually see the trick. Which, given the fact that majority of users rarely resize their browser, pretty much results in a miss.
But still, I am left impressed. I love it! 
July 15th, 2008 at 9:20 pm
Yes, you’re right: this solution leave to visitors the faculty to animate or not the picture.
But we can manage it w/o javascript using it, for example, just like any other rollover effect.
Plus, we can have something like three-state-big-animated-buttons
October 2nd, 2008 at 4:17 pm
[...] I’ve discovered this post onto Roman Cortés and his work with homer simpson caracter: follow this link: css and simpson are wrote in spanish and don’t show any code of his work. but reading another post related to the peek a boo sliding animation done in css [...]