Build Design Systems With Penpot Components
Jul 21, 2:15 AM
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.
smashingmagazine.com
Codrops | Mary Lou
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
- Glasses frames from Freepik: Glasses 1, Glasses 2
- Small glasses from Vecteezy: Glasses 1, Glasses 2
- Mountain icon and shell icon by Freepik, Flaticon Basic License
- City icon from Odinicons, CC 3.0 BY
- Images from Unsplash.com
First Person Sunglasses Try-On Experiment was written by Mary Lou and published on Codrops.
