Material diseño Ripple efecto en JavaScript puro

Vista prévia

Descripción

Esta es una implementación simple y pura de JavaScript/CSS de los efectos personalizables material Design Ripple .

Funcionamiento

Los estilos CSS/CSS3 necesarios para el efecto de ondulación.

.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;

}
}

El núcleo 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);

}
}
}

Aplique el efecto de ondulación a un botón.

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

Personaliza el color ondulante usando el atributo ' Ripple-color ' como este:

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