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.

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.

[adrotate group=”2″]

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

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 9

Comments are closed.
  1. Ah stop it now, just stop it!!! Your awesomeness is too much for me! Splendid as always, keep on keeping on.