Material Design Ripple is a simple and pure JavaScript/CSS implementation of customizable Material Design Ripple effects.
Must Read: A Simple & Lightweight Ripple Effect Plugin | jquery-waves
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. 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>
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.