|A parallax illusion with CSS: The Horse in Motion|
Time for some fun with CSS and optical illusions. For those people that are feed subscribers for a while, will know that I really love optical illusions. I already wrote several articles with optical illusions (15 cool word illusions, Illusion of a 3D dragon and more), and now it's time to create one myself with the help of CSS.
I wanted to recreate the effect of the illusion with the help of parallax and CSS. Chris Coyier wrote an article about Starry Night: Incredible 3D Background Effect with Parallax. This was the foundation of the effect of an optical illusion.
Check out the demo page with can be created by combining those two awesome techniques.
First you'll need to find a motion silhouette. I really loved these race horse silhouettes, but I don't have an iStockPhoto account. So I went for an older image from Eadweard Muybridge called The Horse in Motion. After some Photoshop work, this was the image I ended up with.
Next, I created the see-through front like in the video myself using Photoshop. With the help of the article from Chris, I was able to create this nice optical illusion. To learn the CSS behind this, I recommend to read that article.
You can download the images and CSS file for this optical illusion in the download section. This packages contains the source files used in my demo.
Although this effect isn't perfect (yet) as in the book Magic Moving Images, it's still is pretty nice to see. I'll write a (Photoshop) tutorial on how to create such an background image yourself to re-create the effect with your own images in a couple of days.
You can now learn how to create your own CSS parallax illusion 3d image.
Tags: css optical illusion horse motion fun
Interested in this topic? You might enjoy another article I've written called
|< Prev||Next >|
|Or try the sitemap|