Above & Beneath: Featured Content Layout Effect

A landing page template with a featured content section and background sounds that change according to the view.

By Mary Lou in Playground on July 28, 2016

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

Today we’d like to share a little aquatic landing page template with some special effects with you. The idea is to show a big headline in the initial view and when a grid/menu icon is clicked, the view slides down (below the water) and some featured content or menu items get shown. The transitions are accompanied by some fitting background sounds.

Attention: We are using some newer CSS properties that won’t work in older browsers (relative viewport units, CSS animations)

We are using CSS transitions and animations that are controlled by classes that we apply to the main container. Have a look at the three different demos (turn your sound on or tap anywhere if you are on mobile iOS):