Animated Waterfall HTML,CSS

Rate this post

Hello everyone, today in this post i am going to share an animated waterfall effect

Animated Waterfall HTML Code

<div class="waterfall">
<svg width="349" height="387" viewBox="0 0 349 387" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="120.095" y="47.665" width="141.611" height="297.335" fill="#59B7D4"/>
<rect x="120.096" y="24.2297" width="141.611" height="83.6565" fill="#DAF1FB"/>
<g class="waterfall-top">
<rect x="120.096" y="66.5288" width="35.4028" height="93.9961" rx="17.7014" fill="#DAF1FB" class="waterfall-top-primary"/>
<rect x="208.603" y="48.6689" width="17.7014" height="93.9961" rx="8.85069" fill="#DAF1FB" class="waterfall-top-primary"/>
<rect x="173.2" y="38.3296" width="17.7014" height="93.9961" rx="8.85069" fill="#DAF1FB" class="waterfall-top-primary"/>
<rect x="244.005" y="30.8105" width="17.7014" height="93.9961" rx="8.85069" fill="#DAF1FB" class="waterfall-top-primary"/>
<rect x="226.304" y="95.6663" width="17.7014" height="93.9961" rx="8.85069" fill="#59B7D3" class="waterfall-top-mask"/>
<rect x="190.902" y="85.3267" width="17.7014" height="93.9961" rx="8.85069" fill="#59B7D3" class="waterfall-top-mask"/>
<rect x="155.499" y="95.6663" width="17.7014" height="93.9961" rx="8.85069" fill="#59B7D3" class="waterfall-top-mask"/>
</g>

<g class='waterfall-foam'>
<circle cx="138.5" cy="326.5" r="20.5" fill="#DAF1FB" class="waterfall-foam-1"/>
<circle cx="174" cy="328" r="26" fill="#DAF1FB" class="waterfall-foam-1"/>
<circle cx="210.5" cy="334.5" r="23.5" fill="#DAF1FB" class="waterfall-foam-1"/>
<circle cx="246" cy="326" r="18" fill="#DAF1FB" class="waterfall-foam-1"/>
<circle cx="133" cy="324" r="17" fill="#DAF1FB" class="waterfall-foam-2"/>
<circle cx="174" cy="325" r="23" fill="#DAF1FB" class="waterfall-foam-2"/>
<circle cx="211" cy="329" r="23" fill="#DAF1FB" class="waterfall-foam-2"/>
<circle cx="246" cy="333" r="23" fill="#DAF1FB" class="waterfall-foam-2"/>

<circle cx="138.5" cy="326.5" r="20" fill="#DAF1FB" class="waterfall-foam-3"/>
<circle cx="174" cy="328" r="26" fill="#DAF1FB" class="waterfall-foam-3"/>
<circle cx="211" cy="329" r="24" fill="#DAF1FB" class="waterfall-foam-3"/>
<circle cx="246" cy="333" r="18" fill="#DAF1FB" class="waterfall-foam-3"/>
</g>

<g class="splashes">
  <circle cx="147.045" cy="282.045" r="7.04465" fill="#DAF1FB"/>
  <circle cx="203.681" cy="283.681" r="5.68125" fill="#DAF1FB"/>
  <circle cx="254.021" cy="282.044" r="7.49911" fill="#DAF1FB"/>
  <circle cx="269.136" cy="300.136" r="6.13572" fill="#DAF1FB"/>
  <circle cx="119.136" cy="293.587" r="6.13572" fill="#DAF1FB"/>
  <circle cx="124.681" cy="271.681" r="5.68125" fill="#DAF1FB"/>
</g>

<path fill-rule="evenodd" clip-rule="evenodd" d="M199.569 386.192C161.812 386.192 127.652 377.922 97.0874 361.381C66.8824 344.481 43.15 321.467 25.89 292.341C8.62999 262.855 0 229.774 0 193.096C0 156.419 8.62999 123.517 25.89 94.3905C43.15 64.9047 67.0622 41.8914 97.6268 25.3506C128.191 8.4502 162.352 0 200.108 0C229.594 0 256.563 5.03416 281.014 15.1025C302.778 23.7442 321.694 36.2318 337.76 52.5654C344.016 57.0585 348.09 64.3966 348.09 72.6862C348.09 86.3588 337.006 97.4427 323.334 97.4427C317.844 97.4427 312.772 95.6559 308.667 92.6323L308.522 92.7724C308.199 92.4326 307.875 92.0948 307.549 91.7588C306.333 90.751 305.215 89.6291 304.211 88.4094C276.557 61.4727 242.576 48.0043 202.265 48.0043C174.218 48.0043 148.867 54.297 126.214 66.8824C103.56 79.4678 85.7606 96.9076 72.8156 119.202C60.2302 141.136 53.9375 165.768 53.9375 193.096C53.9375 220.424 60.2302 245.236 72.8156 267.53C85.7606 289.464 103.56 306.724 126.214 319.31C148.867 331.895 174.218 338.188 202.265 338.188C241.655 338.188 275.213 324.949 302.94 298.472C304.144 296.968 305.52 295.607 307.038 294.419C307.535 293.911 308.03 293.398 308.522 292.88L308.807 293.156C312.684 290.636 317.311 289.173 322.28 289.173C335.952 289.173 347.036 300.256 347.036 313.929C347.036 318.621 345.731 323.008 343.464 326.747L343.582 326.861C343.364 327.106 343.146 327.35 342.927 327.594C341.346 329.977 339.363 332.072 337.076 333.78C321.117 349.817 302.25 362.254 280.475 371.09C256.023 381.158 229.054 386.192 199.569 386.192Z" fill="#4A586D"/>
</svg>
</div>

Animated Waterfall CSS Code

$wooble-duration: .8s;
$grow-duration: .6s;
$jump-duration: 1s;
$splashes-duration: 1s;

body {
  margin: 0;
  width: 100vw; height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #d7dce0;
}

.waterfall {
  position: relative;
}

.waterfall-top-primary {
  animation: wooble $wooble-duration ease-in-out alternate infinite;
}

.waterfall-top-mask {
  animation: wooble $wooble-duration ease-in-out alternate infinite;
}

.waterfall-top {
  @for $i from 1 through 7 {
    :nth-child(#{$i}) {
      animation-delay: random(300) + ms;
    }
  }
}

.waterfall-foam-1 {
  animation: jump-left $jump-duration ease-in-out alternate infinite;
}

.waterfall-foam-2 {
  animation: jump-right $jump-duration ease-in-out alternate infinite;
}

.waterfall-foam-3 {
  animation: grow $grow-duration ease-in-out alternate infinite;
}

.waterfall-foam {
  @for $i from 1 through 12 {
    :nth-child(#{$i}) {
      animation-delay: random(400) + ms;
    }
  }
}

.splashes {
  circle {
    animation: jump $splashes-duration ease-in-out alternate infinite;
  }
   @for $i from 1 through 7 {
    :nth-child(#{$i}) {
      animation-delay: random(1200) + ms;
    }
  }
}

@keyframes wooble {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(3px);
  }
}

@keyframes grow {
  0% {
    transform: translate(0px, 0px) ;
  }
  100% {
    transform:  translate(0px, -10px);
  }
}

@keyframes jump-right {
  0% {
    transform: translate(0px, -10px);
  }
  50% {
    transform: translate(-20px, 10px);
  }
  100% {
    transform: translate(0px, -5px);
  }
}

@keyframes jump-left {
  0% {
    transform: translate(0px, -10px);
  }
  50% {
    transform: translate(20px, 10px);
  }
  100% {
    transform: translate(0px, -5px);
  }
}

@keyframes jump {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(50px);
  }
}

Leave a Reply

Your email address will not be published.