Today we’re very excited to share an experimental implementation of one of Gil Huybrecht’s designs with you. Gil creates fantastic signature designs with amazing animations and he kindly permitted us code up one of his works.
The design project is called “Outdoors” and it has a very interesting layout with a content/image slideshow and an expanding element. While we tried to implement it as close as possible to the design, we opted to adjust some details. We hope you like the way that it turned out!
If you like Gil’s design, we recommend you checking out his Skillshare class where he teaches about visual hierarchy and spacing.
The layout is powered by layered CSS grids which allow us to use a more semantic HTML structure (see mobile version) without repeating content. We use anime.js for the animations, imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.
Have a look at some screenshots:
We hope you enjoy this layout and find it inspiring!
Thank you, Gil, you rock!
References and Credits
- Design by Gil Huybrecht
- Images by Unsplash.com
- anime.js by Julian Garnier
- imagesLoaded by Dave DeSandro
- Charming.js by Yuan Qing