Android L Ripple efecto de clic con JavaScript y CSS3

Vista prévia

Descripción

Solo otro enfoque para crear un famoso efecto de ondulación de Android L & Google material Design con JavaScript y CSS3. Creado por < a href = "https://codepen.io/idiotWu" target = "_ blank" rel = "noopener" > idiotWu .

Funcionamiento

Creat un botón de interfaz de usuario que desea aplicar un efecto de ondulación al hacer clic en.

<button>BUTTON</button>

El CSS de ejemplo para el estilo del botón de interfaz de usuario siguiente < a href = "https://www.google.com/design/spec/components/buttons.html" target = "_ blank" rel = "noopener" > material de diseño .

button {

position: relative;

display: block;

width: 13em;

height: 3em;

margin: 2em;

border: none;

outline: none;

letter-spacing: .2em;

font-weight: bold;

background: #dfdfdf;

cursor: pointer;

overflow: hidden;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

border-radius: 2px;
}

Las reglas CSS requeridas para crear el efecto de ondulación usando animaciones CSS3.

.ripple {

position: absolute;

background: rgba(0,0,0,.25);

border-radius: 100%;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

pointer-events: none;
}

.ripple.show {

-webkit-animation: ripple .5s ease-out;

animation: ripple .5s ease-out;
}
@-webkit-keyframes
 ripple { to {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 opacity: 0;
}
}
@keyframes
 ripple { to {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 opacity: 0;
}
}

Un poco de JavaScript para activar el efecto dominó.

var addRippleEffect = function (e) {


var target = e.target;


if (target.tagName.toLowerCase() !== 'button') return false;


var rect = target.getBoundingClientRect();


var ripple = target.querySelector('.ripple');


if (!ripple) {




ripple = document.createElement('span');




ripple.className = 'ripple';




ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';




target.appendChild(ripple);


}


ripple.classList.remove('show');


var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;


var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;


ripple.style.top = top + 'px';


ripple.style.left = left + 'px';


ripple.classList.add('show');


return false;
}

document.addEventListener('click', addRippleEffect, false);