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.

From our sponsor: Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.

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:

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.