Configurable Ripple Effect On Click/Tap - Jquery Waves.js

Waves.js is a tiny jQuery plugin that applies Android (Material Design) inspired, click/tap triggered ripple effect to any DOM elements within the document.

How to use it:

1. Import jQuery and the Waves.js plugin' files into the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Waves.js plugin -->
<link rel="stylesheet" href="/path/to/jquery-waves.css" />
<script src="/path/to/jquery-waves.js"></script>

2. Add the CSS class waves-effect or data-waves attribute to the element where you want to enable the ripple effect. That's it.

<button class="waves-effect">
  Click/Tap Me
</button>

<button data-waves>
  Click/Tap Me
</button>

3. Customize the ripple color using the waves-color classes or data-waves-background-color attribute:

<button data-waves data-waves-background-color="rgba(0, 0, 0, 0.35)">
  Click/Tap Me
</button>

<button class="waves-effect waves-light bg-black">
  Light
</button>
<button class="waves-effect waves-red">
  Red
</button>
<button class="waves-effect waves-yellow">
  Yellow
</button>
<button class="waves-effect waves-orange">
  Orange
</button>
<button class="waves-effect waves-purple">
  Purple
</button>
<button class="waves-effect waves-green">
  Green
</button>
<button class="waves-effect waves-teal">
  Teal
</button>

4. Or use a random color:

<button data-waves data-waves-background-color="RANDOM">
  Click/Tap Me
</button>
5. Customize the opacity of the ripple effect.
<button data-waves data-waves-background-color="black" data-waves-opacity="0.55">
  Click/Tap Me
</button>
6. Customize the duration of the animation in milliseconds. Default: 800.
<button data-waves data-waves-duration="500">
  Click/Tap Me
</button>
7. Create MDBootstrap Material style ripple effects.
<div class="box waves-effect waves-material">
  This is a box
</div>
8. Apply the ripple effect to an element programmatically.
<div id="rippleElement" data-waves-background-color="random"></div>
$('#rippleElement').ripple<a href="https://www.jqueryscript.net/animation/">Animation</a>();

// or
var ripples = [];
$('#rippleElement').click(function () {
  var ripple = $(this).ripple(
      50, // x position
      80, // y position
  );
  ripples.push(ripple);
});

// remove the ripple effect
$('#rippleElement').click(function () {
  $.each(ripples, function (index, ripple) {
    $('#rippleElement').hideRipple(ripple);
  });
});