A Simple & Lightweight Ripple Effect Plugin | jquery-waves

jQuery Waves is a small jQuery plugin that’s inspired by Material Design, click/tap double effect triggers any DOM elements within the document.

How to make use of it:

1. Import jQuery and the Waves.js plugin files into the doc.

<!-- 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 component the place you want to allow the ripple impact.

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

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

3. Customize the ripple shade utilizing the waves-color classes or data-waves-background-color attributes:

<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 shade:

<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 period of the animation in milliseconds.

<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 a component programmatically.

<div id="rippleElement" data-waves-background-color="random"></div>
$('#rippleElement').ripple();

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

Configurable Ripple Effect On Click/Tap, jQuery Waves Plugin/Github


See Demo And Download

Official Website(isaeken): Click Here

This superior jQuery/javascript plugin is developed by isaeken. For extra advanced usage, please go to the official website.

Share