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.

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

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.