Home
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.

One of the optical illusion video's that I saw a while ago, was the example of the book called Magic Moving Images. The video clearly explains how this optical illusion works and I really liked it.

Optical Illusion CSS Parallax

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.

Background Image

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.

Download

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.

Conclusion

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.

Update

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

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:
Reddit!Del.icio.us!Facebook!Technorati!StumbleUpon!Newsvine!Furl!Ma.gnolia!
Comments
Add NewSearchRSS
kremalicious - Awesome!   | 91.15.99.xxx | 2008-05-21 15:23:26
Gravatar image Wow, just awesome! I implemented a parallax effect on my website too but your idea beats everything. well done! :woohoo:
and digged it :cheer:
Reply | Quote
1 0
Marco - Nice   | 62.194.187.xxx | 2008-05-21 20:11:25
Gravatar image Your implementation of the parallax effect is really nice! Very subtle, but beautiful.

Thanks for the Digg :) .
Reply | Quote
0 0
kremalicious - Thank you   | 91.15.125.xxx | 2008-05-22 01:03:04
Gravatar image commenting it also in your home: thanks for praising, Marco :kiss:
Reply | Quote
0 0
Kevin - Very very nice   | 222.152.4.xxx | 2008-05-22 08:30:03
Gravatar image Great use of the technique - more fun than anything useful, but appreciate your efforts. Change the lte ie7 to lt ie7 in your css conditional to make it not display the browser warning in IE7.
Reply | Quote
0 0
Rob White - Thats very cool   | 92.232.137.xxx | 2008-05-22 10:02:34
Gravatar image That's a really nice effect.

I like the lateral thinking to get to build it.
Reply | Quote
1 0
kremalicious - Showcasing the CSS Parallax Effect   | 91.15.95.xxx | 2008-05-22 22:48:59
Gravatar image Hi Marco, it's me again :cheer:
Thought it's time for a first showcase so I wrote an article about the parallax effect achieved with css. In it I showcase 12 examples of this effect and I've included yours too. Have a look if you like:
Showcasing the CSS Parallax Effect: 12 Creative Usages
Reply | Quote
1 0
kremalicious   | 91.15.95.xxx | 2008-05-22 22:49:49
Gravatar image ooops, the a tag didn't work. here's the link:
http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/
Reply | Quote
0 0
Paul Annett   | 81.129.111.xxx | 2008-06-02 13:26:34
Gravatar image Wow - what a creative use of the effect! I'm glad my Silverback site design tutorial inspired the Starry night effect, which in turn resulted in your great technique! :)

This kind of innovation was exactly what I was hoping for when I posted my original tutorial, though unfortunately many of the commenters didn't get that.
Reply | Quote
0 0
Marco - Thanks!   | 145.74.180.xxx | 2008-06-02 16:00:48
Gravatar image Hi Paul!

Thanks for your comment and feedback. I always like to combine or improve existing technique to develop something new, creative and amazing.

You did a great job explaining the Silverback app design.

Greetings,
Marco
Reply | Quote
0 0
Hal - Nice!!   | 138.163.160.xxx | 2008-06-16 08:17:35
Gravatar image Good effect :evil:

Next I can try it.
Reply | Quote
0 0
Hal - Good   | 138.163.160.xxx | 2008-06-16 08:22:45
Gravatar image Its funy CSS :lol:
Nice
Reply | Quote
0 0
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Security Image
Please input the anti-spam code that you can read in the image.
Unsubscribe from e-mail notifications.
 
Next >
[ Back ]
Subscribe
Navigation
Search
Search:
          
Sponsors
    




Blogrush