Material Design Wave-like Animation On Click - jQuery Ripple.js

Ripple.js is a jQuery plugin that adds a customizable stunning ripple click effect, which is a visual technique commonly used in Material design, to elements on your website or web application.

It creates a ripple-like animation that emanates from the point where the user clicks on an element, simulating the effect of a water droplet hitting the surface of a pond. Typically used in clickable elements (like buttons and links) to provide visual feedback to the user, indicating that their interaction with the element has been registered.

See Also:

• 10 Best Material Ripple Click/Tap Effects In JavaScript/CSS

How to use it:

1. Download and include the jQuery Ripple.js plugin's files on the page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/ripple.min.css" />
<script src="/path/to/dist/ripple.min.js"></script>

2. Apply the ripple click effect to the element.

$.ripple('.myElement', {
  // options
});

3. Customize the trigger event. Default: 'mousedown'.

$.ripple('.myElement', {
  on: 'mouseenter',
});

4. Config the appearance of the ripple click effect.

$.ripple('.myElement', {
  opacity: 0.4,
  color: "auto",
  multi: false,
  duration: 0.7,
  rate: function(pxPerSecond) {
    return pxPerSecond; // animation speed
  },
  easing: 'linear'
});

5. You're also allowed to pass the options via HTML data attributes.

<a href="#" 
   data-duration="1" 
   data-color="black" 
   data-opacity="1">
   Click Me
</a>

---

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