in Playground
41 Comments

Above & Beneath: Featured Content Layout Effect

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

AboveBeneath_800x600

View demo Download source

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):

Seaweed

AboveBeneath_01

AboveBeneath_02

Oceanis

AboveBeneath_03

AboveBeneath_04

Blue Divers

AboveBeneath_05

AboveBeneath_06

We hope you enjoy this little template and find it useful!

Find this project on Github

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

tilthovereffects_featured

Tilt Hover Effects

AnimatedAnimals_Featured

Animated Animals in CSS and SVG

revealereffect_featured

Block Reveal Effects

Stay connected with us:

Grab the RSS Feed Get email updates Follow us on Twitter Join us on Facebook Add us on Google+

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 41

Leave a comment

Follow this discussion

Leave a Comment