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:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.