Sliding Header Layout – Simple grid layout with a special header effect

      

This is a tutorial by Codrops on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.
The idea is to initially show a fullscreen image with a title and a toggle button that allows to change the view to a grid. The header with the fullscreen image animates upwards and reveals a grid of image anchors with a title.

Sliding-Header-Layout

The technologies used in this tutorial:

  • CSS Transitions
  • Media Queries
  • Flexbox with Viewport Units
  • Some JavaScript for toggling classes among others
  • Demo    Download