Skip to main content

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.

Admittedly this doesn't look very amazing; it's better to see it in action

Admittedly this doesn't look very amazing; it's better to see it in action

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 all done with a bit of CSS; why not make your own version?

It's all done with a bit of CSS; why not make your own version?

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 Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.