First Person Sunglasses Try-On Experiment

A fun "try-on" experiment that shows a first person view through the colored lenses of sunglasses, mimicking the movement of putting them on and off.

GeekyGlasses_800x600

View demo Download source





Today we’d like to share a fun little experiment with you: a geeky “try-on” sunglasses effect. It’s not a “try-on” in the classical sense for previewing how the sunglasses might look on a person, but instead how the view looks like when putting on some sunglasses and looking through them. For that we use a simple overlay effect and some animations to mimic the movement you do when you try on glasses from the first person perspective.

This is just a fun experimental demo where we use lots of Flexbox for the layouts and CSS Animations controlled by a class logic in our script.

Attention: Some of these techniques are very experimental and won’t work in all browsers.

The first view of the demo is the grid of all sunglasses. Once you click on one, a “swoosh” animation happens and we can see a little loader (just dummy loading). Another swoosh animation reveals the single sunglasses preview where you can see the large version of the glasses being animated in a way to mimic the movement of putting them on. A semi-transparent overlay appears that shows the view through the sunglasses. The navigation allows to put on the next or previous sunglasses, and also to hide the overlay.

When hovering the bottom part of the page, close to the edge, the sunglasses “slide off”. This is being indicated by a little “be cool” text at the bottom.

GeekyGlasses_01

GeekyGlasses_02

GeekyGlasses03

We hope you enjoy this little experiment and find it inspiring!

References and Credits

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.

Feedback 9

Follow this discussion

Leave a Comment