(No jQuery) Material Design Ripple Effect In Pure JavaScript

Material Design Ripple is a simple and pure JavaScript/CSS implementation of customizable Material Design ripple effects.

material ui ripple effect, material ripple effect css, material ripple effect android, material design ripple color, angular material ripple example, button ripple effect css codepen

How to make use of it:

1. CSS/CSS3 styles are necessary for the ripple effect.

.ripple {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: rippleEffect .88s 1;
  opacity: 0;
}
@keyframes rippleEffect {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(100);
    opacity: 0;
  }
}

2. The core of JavaScript.

window.onload = function() {
  let rippleElements = document.getElementsByClassName("myRipple");
  for(var i = 0; i < rippleElements.length; i++) {
      rippleElements[i].onclick = function(e) {
        let X = e.pageX - this.offsetLeft;
        let Y = e.pageY - this.offsetTop;
        let rippleDiv = document.createElement("div");
        rippleDiv.classList.add('ripple');
        rippleDiv.setAttribute("style","top:"+Y+"px; left:"+X+"px;");
        let customColor = this.getAttribute('ripple-color');
        if(customColor) rippleDiv.style.background = customColor;
        this.appendChild(rippleDiv);
        setTimeout(function(){
          rippleDiv.parentElement.removeChild(rippleDiv);
        }, 900);
  }
}
}

3. Apply a ripple effect to a button.

<button class='myRipple'>CLICK ME</button>

4. Customize the ripple color using the ‘ripple color‘ theme like this:

<button class='myRipple' ripple-color='red'>Custom Color</button>

material design ripple effect Plugin/Codepen

See Demo And Download

Official Website(TrevorWelch): Click Here

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