Material Design Ripple Click Effect In Vanilla JavaScript – ripple.js

Preview:

Description:

Just another JavaScript library that applies an animated, Material Design inspired ripple effect to a clickable element using pure JavaScript.

How to use it:

Add the ‘data-ripple’ attribute to any element on which you want to apply the ripple effect when clicked.

<button data-ripple>
   Click Me
</button>

Import the ‘ripple.js’ script into the webpage.

<script src="ripple.js"></script>

The JavaScript to active the ripple effect on the button element.

Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
  new RippleEffect(element);
});

Customize the ripple effect in the CSS.

.ripple-container .ripple {
  background-color: rgba(255,255,255,0.4);
  animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
}
@keyframes 
ripple {  0% {
 transform: scale(0);
 opacity: 1;
}
 80% {
 transform: scale(1);
}
 100% {
 opacity: 0;
}
}