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.
Be First to Comment