This browser-based illusion is all in CSS
You may have seen this clever illusion done with paper, but have you seen it in a web browser?
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
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
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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 eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, 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.