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').rippleAnimation();

// 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);
  });
});

Changelog:

v1.3.8 (2020-12-06)

• fix function name

v1.2.2 (2020-12-01)

• add .wave-effect alternative

2020-11-30

• bugfix

2020-11-26

• fix on-complete event call

---

This awesome jQuery plugin is developed by isaeken. For more Advanced Usages, please check the demo page or visit the official website.