Material Ripple Effect In jQuery And CSS3 - Ripple.js

Ripple.js is a tiny jQuery plugin that creates a Material Design ripple effect when you click/tap on a button or any DOM element you specify.

Powered by CSS animations and a little bit of jQuery code. Easy to implement with only CSS classes.

How to use it:

1. Install and import the Ripple.js as an ES module.

# Yarn
$ yarn add @gabrielfins/ripple-effect

# NPM
$ npm i @gabrielfins/ripple-effect

import "@gabrielfins/ripple-effect";

2. Or directly load the Ripple.js (jQuery is included) into the HTML document.

<script src="dist/ripples.js"></script>

3. Add the CSS class md-ripples to the target element and the plugin will take care of the rest.

<button class="md-ripples">
  Ripple Effect
</button>

<div class="md-ripples">
  Div element is supported as well
</div>

3. Change the theme to dark or light.

<button class="md-ripples ripples-dark">
  Ripple Effect
</button>

<div class="md-ripples ripples-light">
  Div element is supported as well
</div>

4. Customize the Material ripple effect by overriding the default CSS styles as shown below.

.md-ripples {
   position: relative;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
}

.ripples-light .ripple {
   background-color: #fff;
}

.ripples-dark .ripple {
   background-color: #000;
}

.ripple {
   background-color: #000;
   opacity: 0.16;
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   animation: ripple 0.3s ease-out;
}

@keyframes ripple {
   from {
     transform: scale(0);
  }
   to {
     transform: scale(1);
  }
}

Changelog:

v1.0.5 (2021-07-29)

• • Fixed bug where the event listener could be applied more than once to the DOM

2021-07-15

• Fixed typo

2021-03-27

• Update effects

---

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