Espero que todo se entienda súper bien y cualquier duda dejad un mensajitoooo ;)
Os va a quedar igual de bonito que el mío o incluso más jejjejj <3
Para crear este gadget necesitaremos un código que encontraréis al final del todo, donde tendréis que modificarlo a vuestro gusto y luego en diseño, añadir gadget HTML/JavaScript y pegar el código completo en el contenido para guardarlo ;)
el tamaño del espacio que ocupa el gatito junto al texto (el gadget completo). Mi blog tiene un espacio de 250px entonces he puesto el tamaño del gadget a 200px ;)
Luego bajamos a la parte donde dice gatito area, y pondremos lo mismo que en el anterior, con esto habremos modificado la zona donde se moverá el gatito.
- Segundo cambiamos la tipografía del texto, yo lo tengo en Georgia
- Tercero cambiamos el tamaño de la letra, la mía está en 23px
- Cuarto podemos poner el texto con el color que queráis ;)
Leopardo:
Conejito:
Ciervo:
Zorro:
Gato naranja:
<!-- 🐱 GATITO ACARICIABLE -->
<div id="gatito-acariciable">
<div id="texto-acariciame">
¡Acaríciame!
</div>
<div class="gatito-area">
<img
id="gatito-img"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPRydKpHClKV_VsavShhskvQ7IQLRgpm0pxhK0O3-IPipFzpizb1n8fbMdFpMEC465uO_XciWrElPidhBmVay797B3luskAjkiC-ydJXVq6uiPjDUol0ey4njN2q2mKyAH94j-R3NLSjGJi-garE7vFweMHnEopqY4AdBAaIDc2B4O6Mce_UxYV3dyUwv/s531/IMG_1572.png"
alt="Gatito"
>
</div>
</div>
<style>
#gatito-acariciable {
width: 200px;
margin: 0 auto;
text-align: center;
user-select: none;
-webkit-user-select: none;
}
#texto-acariciame {
width: 200px;
margin: 0 auto 2px;
font-family: Georgia, serif;
font-size: 23px;
line-height: 1.15;
text-align: center;
color: #333;
}
.gatito-area {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: visible;
cursor: pointer;
touch-action: none;
}
#gatito-img {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
object-fit: contain;
pointer-events: none;
transform: translate(0, 0) scaleX(1) scaleY(1);
transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gatito-area.acariciando #gatito-img {
filter: drop-shadow(0 0 5px rgba(255, 150, 180, 0.15));
}
</style>
<script>
(function() {
const zona = document.querySelector("#gatito-acariciable .gatito-area");
const gatito = document.getElementById("gatito-img");
let ratonAnteriorX = null;
let ratonAnteriorY = null;
let moviendo = false;
let volverCentro = null;
function moverGatito(x, y) {
if (ratonAnteriorX === null || ratonAnteriorY === null) {
ratonAnteriorX = x;
ratonAnteriorY = y;
return;
}
const diferenciaX = x - ratonAnteriorX;
const diferenciaY = y - ratonAnteriorY;
ratonAnteriorX = x;
ratonAnteriorY = y;
if (Math.abs(diferenciaX) < 1 && Math.abs(diferenciaY) < 1) {
return;
}
const intensidadX = Math.min(Math.abs(diferenciaX), 18);
const intensidadY = Math.min(Math.abs(diferenciaY), 18);
const movimientoHorizontal =
Math.abs(diferenciaX) > Math.abs(diferenciaY);
let escalaX = 1;
let escalaY = 1;
if (movimientoHorizontal) {
escalaX = 1 + intensidadX * 0.025;
escalaY = 1 - intensidadX * 0.010;
} else {
escalaY = 1 + intensidadY * 0.030;
escalaX = 1 - intensidadY * 0.018;
}
escalaX = Math.max(0.70, Math.min(1.45, escalaX));
escalaY = Math.max(0.70, Math.min(1.45, escalaY));
const moverX = Math.max(-3, Math.min(3, diferenciaX * 0.10));
const moverY = Math.max(-3, Math.min(3, diferenciaY * 0.10));
gatito.style.transform =
"translate(" + moverX + "px, " + moverY + "px) " +
"scaleX(" + escalaX + ") " +
"scaleY(" + escalaY + ")";
zona.classList.add("acariciando");
clearTimeout(volverCentro);
volverCentro = setTimeout(function() {
gatito.style.transform =
"translate(0, 0) scaleX(1) scaleY(1)";
zona.classList.remove("acariciando");
}, 650);
}
/* RATÓN */
zona.addEventListener("mouseenter", function(e) {
moviendo = true;
const rect = zona.getBoundingClientRect();
ratonAnteriorX = e.clientX - rect.left;
ratonAnteriorY = e.clientY - rect.top;
});
zona.addEventListener("mousemove", function(e) {
if (!moviendo) return;
const rect = zona.getBoundingClientRect();
moverGatito(
e.clientX - rect.left,
e.clientY - rect.top
);
});
zona.addEventListener("mouseleave", function() {
moviendo = false;
ratonAnteriorX = null;
ratonAnteriorY = null;
clearTimeout(volverCentro);
gatito.style.transform =
"translate(0, 0) scaleX(1) scaleY(1)";
zona.classList.remove("acariciando");
});
/* MÓVIL */
zona.addEventListener("touchstart", function(e) {
e.preventDefault();
const toque = e.touches[0];
const rect = zona.getBoundingClientRect();
ratonAnteriorX = toque.clientX - rect.left;
ratonAnteriorY = toque.clientY - rect.top;
moviendo = true;
}, { passive: false });
zona.addEventListener("touchmove", function(e) {
e.preventDefault();
if (!moviendo) return;
const toque = e.touches[0];
const rect = zona.getBoundingClientRect();
moverGatito(
toque.clientX - rect.left,
toque.clientY - rect.top
);
}, { passive: false });
function terminarToque() {
moviendo = false;
ratonAnteriorX = null;
ratonAnteriorY = null;
clearTimeout(volverCentro);
gatito.style.transform =
"translate(0, 0) scaleX(1) scaleY(1)";
zona.classList.remove("acariciando");
}
zona.addEventListener("touchend", terminarToque);
zona.addEventListener("touchcancel", terminarToque);
})();
</script>
Omgg, es tan lindooo definitivamente lo pondré en mi blog! Muchas gracias por el tutorial o( ˶^▾^˶ )o
ResponderEliminar