Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now β
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.
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
Oceanis
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.
Blue Divers
We hope you enjoy this little template and find it useful!