Press "Enter" to skip to content

Ripple Effect CSS Animation Infinite Using Only CSS and jQuery

Ripple effect is created using only CSS and jQuery. The following effect is achieved by adding 40 divs with height, width, background color and delaying the animation relative to its index, and then moving the background color of each div from gray to the current color for unlimited times.

ripple effect codepen, pulse animation codepen, circle ripple animation css, pulse animation css codepen, water ripple animation, ripple effect css animation infinite, pulse effect css

How to make use of it:

1. Create a blank DIV element for the wavy animation.

<div class="ripple"></div>

2. Generate waves in the ripple component.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
$(".ripple").ready(function () {
  for (let i = 0; i <= 40; i++) {
    $createWave = $("<div class='wave'></div>");
    $(".ripple").append($createWave);
    $(".wave:nth-child(" + i + ")").css("height", i * 8 + "px");
    $(".wave:nth-child(" + i + ")").css("width", i * 8 + "px");
    $(".wave:nth-child(" + i + ")").css("z-index", 40 - i);
    $(".wave:nth-child(" + i + ")").css(
      "animation-delay",
      0.1 * (40 - i) + "s"
    );
    $(".wave:nth-child(" + i + ")").css(
      "backgroundColor",
      "hsl(100,0%," + i + "%)"
    );
  }
});

3. Master CSS/CSS3 Wave Design and Animation.

.ripple {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  background-color: rgb(42, 42, 42);
}

.ripple .wave {
  position: absolute;
  border-radius: 50%;
  animation: ripple-animation 1s ease-in infinite;
}

@keyframes ripple-animation {
  from {
    background-color: rgb(42, 42, 42);
  }
  to {
    background-color: auto;
  }
}

Animated Ripple Pulse Effect In jQuery, Ripple Effect Plugin/Github


See Demo And Download

Official Website(ankitmishradev): Click Here

This superior jQuery/javascript plugin is developed by ankitmishradev. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *