Basado en JS+Implementación del efecto de ondas de agua al hacer clic en un botón de Canves

Recientemente he visto un efecto de clic de botón bastante bueno, que produce un efecto de ondas en el agua cuando se hace clic, es bastante divertido, así que lo he implementado de manera sencilla (sin considerar la compatibilidad con navegadores de versiones anteriores)

Veamos el efecto primero, como se muestra en la siguiente imagen (el software de grabación de gif es un poco malo, parece un poco lento...)

Este efecto se puede lograr mediante la implementación de canves anidado en el elemento, o mediante css3Implementación.

Implementación de Canves

He tomado un fragmento de código implementado con Canves, he quitado algunas definiciones repetidas de estilo y he proporcionado comentarios en js, el código es el siguiente

código html

<a class="btn color-1 material-design" data-color="#2f5398">Presione me!</a>

código css

* {
box-sizing: border-box;
outline: none;
}
body {
font-family: 'Open Sans';
font-size: 100%;
font-weight: 300;
línea-altura: 1.5em;
texto-alineación:centro;
}
.btn {
border: none;
display: inline-bloque;
color: white;
overflow: hidden;
margin: 1rem;
padding: 0;
ancho: 150px;
altura: 40px;
texto-alineación:centro;
línea-altura: 40px;
borde-radio: 5px;
}
.btn.color-1 {
background-color: #426fc5;
}
.btn-border.color-1 {
background-color: transparent;
border: 2px solid #426fc5;
color: #426fc5;
}
.material-design {
position: relative;
}
.material-design canvas {
opacity: 0.25;
position: absolute;
top: 0;
left: 0;
}
.container {
align-content: center;
align-items: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
max-ancho: 46rem;
}

código js

var canvas = {},
centerX = 0,
centerY = 0,
color = '',
containers = document.getElementsByClassName('material',-design')
context = {},
element = {},
radius = 0,
// Generar animación requestAnimationFrame basada en callback
requestAnimFrame = function () {
return (
window.requestAnimationFrame || 
window.mozRequestAnimationFrame || 
window.oRequestAnimationFrame || 
window.msRequestAnimationFrame || 
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
} (),
// Generar canves para cada elemento especificado
init = function () {
containers = Array.prototype.slice.call(containers);
for (var i = 0; i < containers.length; i += 1) {
canvas = document.createElement('canvas');
canvas.addEventListener('click', press, false);
containers[i].appendChild(canvas);
canvas.style.width ='100%';
canvas.style.height='100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
},
// Haga clic y obtenga los datos necesarios, como las coordenadas del clic, el tamaño del elemento y el color
press = function (event) {
color = event.toElement.parentElement.dataset.color;
element = event.toElement;
context = element.getContext('2d');
radius = 0;
centerX = event.offsetX;
centerY = event.offsetY;
context.clearRect(0, 0, element.width, element.height);
dibujar();}}
},
// dibujar círculo y ejecutar animación
dibujar = function () {
contexto.beginPath();
contexto.arc(centerX, centerY, radio, 0, 2 * Math.PI, false);
contexto.colorRelleno = color;
contexto.llenar();
radio += 2;
// mediante la condición de que el radio sea menor que el ancho del elemento, se dibuja continuamente el radio += 2 círculo
if (radio < elemento.ancho) {
requestAnimFrame(dibujar);
}
};
init();

CSS3implementación

A continuación, es el código hecho a mano...siento que es mejor css3más fácil de implementar, tal vez porque estoy acostumbrado a escribir css...

código html

<a class="olas ts-btn">Presioname!</a>

código css

.olas{
posición:relativa;
cursor:apuntador;
visualización:inline-bloque;
desbordamiento:oculto;
texto-alineación:centro;
-webkit-tocado-resaltado-color:transparent;
z-índice:1;
}
.olas .olas-animación{
posición:absoluta;
borde-radio:50%;
ancho:25px;
altura:25px;
opacidad:0;
fondo:rgba(255,255,255,0.3);
transición:todo 0.7s suavidad-salida;
transition-propiedad:transform, opacidad, -webkit-transform;
-webkit-transform:escala(0);
transform:escala(0);
pointer-eventos:none
}
.ts-btn{
ancho: 200px;
altura: 56px;
línea-altura: 56px;
fondo: #f57035;
color: #fff;
borde-radio: 5px;
}

código js

document.addEventListener('DOMContentLoaded',function(){
var duration = 750;
// estilo de cadena ensamblado
var forStyle = function(position){
var cssStr = '';
for( var key in position){
if(position.hasOwnProperty(key)) cssStr += key+:+position[key]+';';
};
return cssStr;
}
// obtener la posición del clic del ratón
var forRect = function(target){
var position = {
top:0,
left:0
}, ele = document.documentElement;
'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
return {
top: position.top + window.pageYOffset - ele.clientTop,
left: position.left + window.pageXOffset - ele.clientLeft
}
}
var show = function(event){
var pDiv = event.target,
cDiv = document.createElement('div');
pDiv.appendChild(cDiv);
var rectObj = forRect(pDiv),
_height = event.pageY - rectObj.top,
_left = event.pageX - rectObj.left,
_scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ');
var position = {
top: _height+'px',
left: _left+'px'
};
cDiv.className = cDiv.className + " waves-animation
cDiv.setAttribute("style", forStyle(position)),
position["-webkit-transform"] = _scale,
position["-moz-transform"] = _scale,
position["-ms-transform"] = _scale,
position["-o-transform"] = _scale,
position.transform = _scale,
position.opacity = "1",
position["-webkit-transition-duration"] = duration + "ms",
position["-moz-transition-duration"] = duration + "ms",
position["-o-transition-duration"] = duration + "ms",
position["transition-duration"] = duration + "ms",
position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
cDiv.setAttribute("style", forStyle(position));
var finishStyle = {
opacity: 0,
"-webkit-transition-duration": duration + "ms", // tiempo de transición
"-moz-transition-duration": duration + "ms",
"-o-transition-duration": duration + "ms",
"transition-duration": duration + "ms",
"-webkit-transform" : _scale,
"-moz-transform" : _scale,
"-ms-transform" : _scale,
"-o-transform" : _scale,
top: _height + "px",
left: _left + "px",
};
setTimeout(function(){
cDiv.setAttribute("style", forStyle(finishStyle));
setTimeout(function(){
pDiv.removeChild(cDiv);
},duration);
},100)
}
document.querySelector('.waves').addEventListener('click',function(e){
show(e);
},!1);
},!1);

Bueno, esto es todo, de paso, ¡feliz festival de la luna llena~

Declaración: el contenido de este artículo se obtiene de la red, pertenece al autor original, el contenido se contribuye y sube por los usuarios de Internet por su propia iniciativa. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para hacer una denuncia, y proporcione evidencia relevante. Una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.