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 in Playground on
Demo Code

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Blue Divers

AboveBeneath_05

AboveBeneath_06

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

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Image Stack Entrance Animations

Menu and Thumbnail Stack Animation

Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 42

Comments are closed.

  2. Simply out of the box effects, hats off to your creativity. Thanks for sharing.

  9. Very nice and creative, thanks for sharing. I can imagine some planet-to-space zoom like that, and maybe some hover effect on the icons.

  11. This is very cool with sound effect, i think would be even cooler if the background image is a looping video clip.

  16. Cool idea with great implementation – think I’ll try and work this idea into a new project that I’ve recently started!

    Thoman

  23. This is, like every other template and work from Mary, absolutely fantastic! So. Much. Talent.

  32. Cool! There is something wrong(demo 2 and 3) with the sound before you click the grid button, there is that constant buzzing sound on Google Chrome. I am using the latest version of that browser(as of this writing). I have check the demos on Firefox, everything is perfect there.

  37. hi there.

    THIS IS BEAUTIFUL. is there any way to link the headline with the underwater section? so if I click on the headeline I´d be taken to the lower section (just like if I clicked on the ‘grid’icon)?

    thanks and greetings, michael