This browser-based illusion is all in CSS

We're big fans of optical illusions around here, and we particularly love Brusspup's fantastic video illusions. We've shown you his mind-boggling 3D anamorphic illusions before, and then there's his excellent animated one. It's kind of like a lenticular design, but without the need for an expensive lenticular plastic sheet; instead it consists of a transparent template and a set of prepared images that you can print out yourself to replicated the animated effect.

James Louis Walker of St. Louis-based Husbandmen, a creative collective specialising in visual identities, packaging, print materials, websites and illustrations, has gone one better and turned Brusspup's illusion on its side to make it work as a web page. Head over to Scroll Slow, Have Fun to see impressive animated effects such as a rotating skull and a spinning cog. Don't use your scroll wheel, though; for best results you'll need to drag the scroll bar really slowly, as the site's title suggests.

Instead of a transparency with a load of black bars printed across it, Walker uses a bit of CSS to achieve the same effect. The bars are just 13 pixel-high black DIVs with a three pixel margin underneath, repeated down the page, and the site uses the CSS z-index property to do all the magic, ensuring that the doctored images scroll up the page beneath the black bars to create the animated illusion. It's all very simple stuff, but extremely effective!

It's not quite perfect; the smoother web pages scroll in your browser, the better the effect is. We've found that while it can be a bit jumpy scrolling down the page, when you scroll back up things look a lot smoother.

Brusspup himself very thoughtfully makes the source images for this illusion free to download, so if you're inclined to make your own version of Scroll Slow, Have Fun, there's lots of material for you to work with. Here's Brusspup's most recent animated offering; links to all the images are included in the description.

And if you do make your own version, be sure to let us know about it!

Words: Jim McCauley

Jim McCauley is a writer, editor and occasional podcaster, and is available for children's parties.

Like this? Read these:

• The easy way to produce your own annual report
• Create a perfect mood board with these pro tips and tools
• Free Photoshop brushes every creative must have