Mirror Effect

Mirror effect as seen around the Web lately, i.e. on Corentin Fardeau's and Method's website. The idea is to mirror an image and animate it within the context of a slideshow.

mirroreffect_800x600

View demo Download source

Today we’d like to share a little effect with you that you might have already stumbled upon on the Web. It’s a kind of a mirror effect as seen on sites like Corentin Fardeau and Method. They are really interesting and gorgeous looking effects, check them out:

mirroreffect_method

mirroreffect_fardeau

The idea is to mirror an image within the context of a slideshow or just as decoration. For showcasing this, we’re using a slideshow with three simple examples, each one showing a possibility of the effect.

Attention: Modern browsers only, since we are using vieport units, blend modes and 3D transforms.

In the first demo we don’t separate the mirror images completely, in the second one we show a vertical example, and in the last one we play with a blend mode and separate the two sides visually. The last example also has a bit of movement, just move around with your mouse to see the effect.

mirroreffect_01

mirroreffect_02

mirroreffect_03

Check out the code examples in the download package to see how you can create your own effects.

References and Credits

We hope you like the effect and find the examples useful!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.