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. First Person Sunglasses Try-On


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.




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

References and Credits

Find this project on Github

View demo Download source

First Person Sunglasses Try-On Experiment was written by Mary Lou and published on Codrops.


Clover Desain is a non commercial website that providing information to its visitors, Clover Desain gathered information from various sources (will be displayed in each content)

All data and information provided on this site is for informational purposes only. Clover Desain makes no representations as to accuracy, completeness, currentness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delays in this information or any losses, injuries, or damages arising from its display or use. All information is provided on an as-is basis.

If this content contains any copyright please send us email or message through our social media to take out this content.

And/Or you as the author or the owner of this content and you do not want your content displayed on this website please send us email or message through our social media.

Leave a comment