#3 Mascota amasable

El dia de hoy de les enseñare a como poner una mascota amasable, es de esos tutos ultra dificiles asi que presten mucha atencion sin mas dilacion.

Por defecto le deje a Pusheen pero lo pueden cambiar por el que quieran.

El codigo es el siguiente:

</div>

<style>

.squish-cat img {

width: 180px;

transition: transform 0.12s ease-out;

transform-origin: center bottom;

cursor: grab;

}

.squish-cat img:active {

cursor: grabbing;

}

</style>

const cat = document.getElementById("catImg");

cat.addEventListener("mousemove", function(e) {

const rect = cat.getBoundingClientRect();

const y = e.clientY - rect.top;

const centerY = rect.height / 2;

const distY = Math.abs(y - centerY) / centerY;

const scaleX = 1 + (distY * 0.15);

const scaleY = 1 - (distY * 0.15);

cat.style.transform = `scale(${scaleX}, ${scaleY})`;

});

cat.addEventListener("mouseleave", function() {

cat.style.transform = "scale(1,1)";

});

</script>

Para que cambien la mascota solo tendran que poner la url de dicha imagen donde les marque en el codigo, de preferencia que esta sea un png, aqui les dejo donde pueden transformar dichas imagenes en png. (MUCHO OJO LA IMAGEN QUE RECOMIENDO QUE USEN BUSQUENLA COMO PNG, NO IMPORTA SI TIENE FONDO BLANCO YA QUE LA QUITARA EN LA PAGINA).

https://www.remove.bg/es

Y aqui pueden subir las imagenes, una vez subida le dan click izquierdo en la imagen bajan un poco, ahi les saldra un recuadro donde diran varias cosas ustedes copian donde dice "Enlace de la imagen". Con eso listo solo pegan esta url donde les indique.

https://imgbb.com/

A grandes razgos seria esto, este fue un tutorial rapido y sencillo que hice para no dejarles abandonados, ademas no ayuda que Tik Tok me alla bloqueado mi cuenta por no se que cosa jajajajaja, en fin si tienen alguna duda escribanla y diganme que mas les gustaria, no olviden tomar agua :3

Saludillos a quien me pidio ayuda en este codigo, gracias amix me diste la inspiracion para subir este tuto ദ്ദി◝ ⩊ ◜.ᐟ