AquaMotion Intro

by Sharxxy

HTML

<div class="drop"></div>
  <div class="ripple"></div>
  <div class="splash"></div>
  <div class="intro-text">AquaMotion</div>

  <audio id="drop-sound" src="https://cdn.pixabay.com/download/audio/2021/09/01/audio_276d8ddc14.mp3?filename=water-drop-35734.mp3"></audio>
  <audio id="splash-sound" src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_5a4c4259c7.mp3?filename=water-splash-59127.mp3"></audio>

CSS

* {margin:0;padding:0;box-sizing:border-box;}

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to bottom, #001f3f, #0074D9);
      overflow: hidden;
      font-family: 'Poppins', sans-serif;
    }

    .drop {
      position: absolute;
      top: -100px;
      left: 50%;
      width: 30px;
      height: 40px;
      background: #00cfff;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* teardrop shape */
      transform: translateX(-50%);
      animation: dropFall 1.6s cubic-bezier(.2,.8,.4,1) forwards;
    }

    @keyframes dropFall {
      0% { top: -100px; transform: translateX(-50%) scale(0.9,1.1); }
      70% { top: 60%; transform: translateX(-50%) scale(1,0.8); }
      85% { top: 62%; transform: translateX(-50%) scale(1.2,0.7); }
      100% { top: 60%; transform: translateX(-50%) scale(0); opacity:0; }
    }

    .ripple {
      position: absolute;
      bottom: 35%;
      left: 50%;
      width: 0;
      height: 0;
      border: 3px solid rgba(0,200,255,0.6);
      border-radius: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: rippleExpand 2s ease-out forwards;
      animation-delay: 1.5s;
    }

    @keyframes rippleExpand {
      0% { width:0;height:0;opacity:1; }
      60% { opacity:0.8; }
      100% { width:300px;height:300px;opacity:0; }
    }

    .splash {
      position: absolute;
      bottom: 34%;
      left: 50%;
      width: 10px;
      height: 10px;
      background: #00cfff;
      border-radius: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: splashOut 1.2s ease-out forwards;
      animation-delay: 1.4s;
    }

    @keyframes splashOut {
      0% { opacity:1; transform: translateX(-50%) translateY(0) scale(0.5); }
      100% { opacity:0; transform: translateX(-200px) translateY(-100px) scale(1); }
    }

   ...

JavaScript

window.addEventListener("load", () => {
      const dropSound = document.getElementById("drop-sound");
      const splashSound = document.getElementById("splash-sound");

      // play drop sound when falling starts
      setTimeout(()=> dropSound.play(), 200);

      // play splash sound at impact
      setTimeout(()=> splashSound.play(), 1400);
    });