From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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
Marry me Mary! XD
Stunning! Heads up though, the demo is only working for me through Safari. It’s not displaying properly on the latest Chrome and Firefox builds. I’m using a MacBook.
Is this going to be a finished build or just a sample homepage? I really like the feeling and layout, but all the menu buttons and the read more button doesn’t work as of yet.
“Template”
As in, something to learn from- or a starting point. Though I have seen some AWWWARDS sites that are literally Codrops demos, with different information…
You can add functionality or styling to the read more button yourself, can’t you? That’s part of the fun of web design and development. Learning and applying what you know.
There are quite a few helpful resources on this very site!
legend… -wait for it
dary!!!!
really nice work!
Does not work on Chrome or firefox with PC
working in Firefox but doesn’t Working on Chrome 63 Version. Grid Structure is breaking.
Look great but Not working on Chrome or Firefox in Windows. Please fix it.
Hello, beautiful and awesome work!
I was reading the code and I was wandering if you can tell us how you generate this project. By sharing maybe your package.json ? I love how you wrote the main.js and I’d love to have some recommandations to work like that. I also read your css and how you wrap your classes by using double underscore.
It will be awesome if you answered me!
Thanks a lot
Awesome template! Thanks Mary Lou 🙂
Nice one! Thanks much for your template Mary.
Very nice, but links don’t work in gallery 1 and gallery 2.
If you define a link for gallery 1, then gallery 2 has the same link
I need help
Tahnk you
Any ideas, how to make this slides changing on scroll?
The easiest way I can think of is using on.mouse scroll click next item (or trigget next item).
I can help you out via email if you want.
Cheers!
-Roch
Hi, I’m very bad in JS, I tried to do some tests of functions in main.js but I can not do anything that works. I would also like to make slides changing on scroll. If you arrived to make it works, it would interest me if you accept to share how you did it. 🙂
Hi Roch,
Will be really appropriated if you can share the function that scroll triggers next item, please let me know. Thanks
Regards,
Ke
Thank you! very inspiring!!
Thanks for this template, its awesome. But i found a bug if i download this layout and only checking the facts in 2nd and 3rd section.
Would be great if you can answer me, thanks.
Is Customization available for this?
I guess so.
Love the template thanks for sharing and keep on sharing these awesome templates 🙂
Awesome template, I like it very much and thanks for sharing.
Awesome Effort. I loved the coding and interactions. Is there any way to control this sliding animation with thumbnails.