Outdoors Template

Original Source: http://feedproxy.google.com/~r/tympanus/~3/Gjco7wLANuM/

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.

outdoors_featured

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.

Note that this implementation is a proof-of-concept that uses modern CSS properties like grid and custom properties. You’ll need to implement proper fallbacks for older browsers.

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:

outdoors_01