Creating a Waterfall Animation Using HTML and CSS

Introduction

Have you wondered using the code we can create a waterfall effect? While creating a website we usually use the video tags to make these types of impact on our page, but these have some loading issues. A waterfall Animation, in particular, shows the fluid motion and the creative possibilities of HTML and CSS. In this article; you will learn how to create a waterfall animation, enhancing your understanding of CSS animation and design, We will start with the HTML structure, move on to CSS styling, and add animation to create a realistic waterfall. Finally, we will discuss how to make animation responsive to multiple devices and the potential use cases. Grab your code editor, and let’s bring the waterfall to life! Feel free to share your opinion.

Prerequisites

HTML, CSS, Animations, Responsive Design, nth-child pseudo-class selectors

Step-by-Step Guide

1. HTML Setup

    <div class="waterfall">
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="drop"></div>
                      <div class="fog"></div>
    </div>
   

2. CSS Style

   
    *{
      background-color: blue;
    }
      .waterfall {
        border: 1px solid red;
    /*     top: -20rem; */
        position: relative;
        width: 200px;
        height: 100%;
        border: 1px solid red;
        left: 0;
      }
   
      .drop {
        position: absolute;
        top: -20px;
        width: 10px;
        height: 30px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        animation: fall 2s infinite ease-in-out;
        filter: blur(2px);
      }
   
      .drop:nth-child(1) {
        left: 0%;
        animation-delay: 0s;
      }
      .drop:nth-child(2) {
        left: 10%;
        animation-delay: 1s;
      }
      .drop:nth-child(3) {
        left: 20%;
        animation-delay: 0s;
      }
      .drop:nth-child(4) {
        left: 30%;
        animation-delay: 1s;
      }
      .drop:nth-child(5) {
        left: 40%;
        animation-delay: 0s;
      }
    .drop:nth-child(6) {
        left: 50%;
        animation-delay: 1s;
      }  
    .drop:nth-child(7) {
        left: 60%;
        animation-delay: 0s;
      }  
    .drop:nth-child(8) {
        left: 70%;
        animation-delay: 1s;
      }  
    .drop:nth-child(9) {
        left: 80%;
        animation-delay: 0s;
        }  
    .drop:nth-child(10) {
        left: 90%;
        animation-delay: 1s;
        }  
   
      /* Fog Effect at Bottom */
      .fog {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
        filter: blur(8px);
      }
   

3. Animation Implementation

      /* Falling Animation */
      @keyframes fall {
        0% {
          transform: translateY(0) scale(4);
   
          opacity: 1;
          filter: blur(5px);
        }
        70% {
            scale: (3);
          opacity: 0.7;
          filter: blur(10px);
        }
        100% {
          transform: translateY(100vh) scale(1);
          opacity: 0.3;
          filter: blur(20px);
          transform: translateY(1000px);
        }
      }
   

4. Responsive Design

   
    /* Media Queries for Responsiveness */
    @media screen and (max-width: 768px) {
      .waterfall {
        width: 150px;
      }
   
      .drop {
        width: 8px;
        height: 25px;
      }
   
      .fog {
        width: 25%;
        filter: blur(6px);
      }
    }
   
    @media screen and (max-width: 480px) {
      .waterfall {
        width: 100px;
      }
   
      .drop {
        width: 5px;
        height: 20px;
      }
   
      .fog {
        width: 30%;
        filter: blur(4px);
      }
    }