Cómo crear una mascota interactiva para Blogger con animación y partículas

 

En este tutorial vamos a crear una pequeña mascota interactiva para tu blog.

La mascota permanecerá en un rincón de la página y reaccionará cuando el lector interactúe con ella:

• Al pasar el cursor aparecerán pequeñas estrellas.
• Al hacer clic cambiará a una expresión diferente.
• Después de unos segundos volverá a su estado original.

Este gadget convierte una imagen sencilla en un pequeño compañero dentro de tu espacio digital.

Dificultad: Intermedia
Tiempo aproximado: 15 minutos
Necesitas: Un blog en Blogger + dos imágenes de tu personaje o mascota

Antes de empezar

Este gadget está creado utilizando HTML, CSS y JavaScript.

Cada parte tiene una función diferente:

• HTML → crea el espacio donde vive la mascota.
• CSS → controla el tamaño, posición, transición y partículas.
• JavaScript → permite que la mascota reaccione al movimiento y al clic.

La idea principal es transformar una imagen estática en un pequeño elemento interactivo que haga que el blog se sienta más personal.

Paso 1: Preparar las imágenes de la mascota

La mascota utiliza dos imágenes diferentes:

• 🐾 Imagen normal → aparece cuando nadie interactúa con ella.
• ✨ Imagen feliz → aparece al hacer clic.

El proceso de la imagen es igual al de la carta, si no lo recuerdas, te invito a revisar esa entrada.

En el código encontrarás:

const normalImg = "URL-DE-TU-IMAGEN";

const happyImg  = "URL-DE-TU-IMAGEN";

La primera dirección corresponde a la imagen inicial.

La segunda corresponde a la imagen que aparecerá cuando la mascota reaccione.

Puedes usar:

• un dibujo propio
• un personaje
• un animal
• un avatar
• una ilustración decorativa

Lo recomendable es que ambas imágenes tengan:

• el mismo tamaño
• fondo transparente PNG
• una posición similar

Así el cambio se verá más natural.

Paso 2: Ajustar el tamaño de la mascota

El tamaño se controla aquí:

#pet-img{

  width:200px;

  height:200px;

}

Puedes cambiar estos valores.

Mascota más pequeña:

width:150px;

height:150px;

Mascota más grande:

width:250px;

height:250px;

La propiedad:

object-fit:contain;

es importante porque mantiene la imagen completa dentro del espacio asignado sin deformarla.

Paso 3: Crear el espacio de la mascota

Esta parte define el lugar donde aparecerá:

#pet-widget{

  width:100%;

  height:180px;

}

Puedes cambiar la altura si necesitas que ocupe más o menos espacio.

Por ejemplo:

Más compacto:

height:120px;

Más amplio:

height:250px;

Paso 4: Crear las partículas de estrellas

Cuando el usuario mueve el cursor sobre la mascota aparecen pequeñas estrellas.

La función encargada de esto es:

function createStar(x, y){

Cada estrella recibe una posición aleatoria:

const angle = Math.random() * Math.PI * 2;

y una distancia diferente:

const dist = Math.random() * 30 + 8;

Esto evita que todas las partículas salgan exactamente del mismo lugar.

Paso 5: Cambiar el símbolo de las partículas

Actualmente utiliza:

star.innerHTML = "✨";

Puedes reemplazarlo por otros símbolos.

Paso 6: Efecto al hacer clic

Cuando el lector hace clic:

pet.addEventListener("click", ()=>{

la mascota aumenta ligeramente de tamaño:

pet.style.transform="scale(1.15)";

Después cambia de imagen:

pet.src = happyImg;

y aparecen varias estrellas alrededor.

La cantidad está aquí:

for(let i=0;i<10;i++)

Si quieres más partículas:

for(let i=0;i<20;i++)

Si quieres un efecto más delicado:

for(let i=0;i<5;i++)


Cambiar cuánto dura la reacción
La mascota vuelve a su estado normal después de:
1200
Ese número representa milisegundos.
Más tiempo:
2000
La expresión feliz durará dos segundos.
Más rápido:
700
Volverá antes a su imagen original.

Paso 8: Instalarlo en Blogger
Entra al panel de Blogger.

Ve a Diseño.

Selecciona Añadir un gadget.

Elige HTML/Javascript.

Pega el código completo.

Guarda los cambios.
La mascota aparecerá en la zona donde colocaste el gadget.

Personalizaciones bonitas
Cambiar la velocidad del movimiento:
Busca:
transition:transform 0.15s ease;
Puedes hacerlo más suave:
transition:transform 0.4s ease;

Cambiar la animación de las estrellas
Busca:
@keyframes floatStar
Puedes modificar:
cuánto flotan

cuánto tardan en desaparecer

cuánto se reducen
Cambiar la zona donde aparece
Busca:
height:180px;
Ajusta ese espacio según dónde quieras colocar tu mascota.

Ideas para usar este gadget
Puedes convertirlo en:
🐱 una mascota del blog

📚 un pequeño personaje lector

☕ un compañero para una sección de recomendaciones

🌱 una planta que reacciona al tocarla

✉️ un personaje que da mensajes de bienvenida

🌙 un pequeño espíritu de tu mundo creativo

También podrías crear diferentes estados:
feliz

dormido

sorprendido

celebrando

leyendo

La historia detrás del gadget

Los blogs siempre han tenido algo especial: la sensación de que detrás de una pantalla existe una persona creando un pequeño mundo propio.

Esta mascota nació con la idea de agregar un pequeño compañero al blog, algo que no solo esté ahí para decorar, sino que pueda reaccionar y acompañar a quienes visitan el espacio. Un simple clic puede convertirse en un pequeño momento de sorpresa: una expresión diferente, unas estrellas apareciendo y la sensación de que el blog está un poco más vivo.

Porque a veces los detalles más pequeños son los que hacen que un lugar digital se sienta más cercano.

Código

<div id="pet-widget">

  <img id="pet-img" src="URL-DE-TU-IMAGEN" />

</div>

<style>

#pet-widget{

  width:100%;

  height:180px;

  display:flex;

  justify-content:center;

  align-items:center;

  position:relative;

  overflow:hidden;

}

/* 🐾 MARCO FIJO PARA AMBAS IMÁGENES */

#pet-img{

  width:200px;

  height:200px;

  object-fit:contain; /* 🔥 clave: mismo encaje visual */

  cursor:pointer;

  transition:transform 0.15s ease;

}

/* ✨ partículas */

.star{

  position:absolute;

  font-size:14px;

  pointer-events:none;

  animation:floatStar 0.8s ease-out forwards;

}

@keyframes floatStar{

  0%{opacity:1; transform:translate(0,0) scale(1);}

  100%{opacity:0; transform:translate(var(--x),var(--y)) scale(0.5);}

}

</style>

<script>

window.addEventListener("load", function(){

  const pet = document.getElementById("pet-img");

  const widget = document.getElementById("pet-widget");

  const normalImg = "URL-DE-TU-IMAGEN";

  const happyImg  = "URL-DE-TU-IMAGEN";

  // ✨ partículas

  function createStar(x, y){

    const star = document.createElement("div");

    star.className = "star";

    star.innerHTML = "✨";

    const angle = Math.random() * Math.PI * 2;

    const dist = Math.random() * 30 + 8;

    star.style.left = x + "px";

    star.style.top = y + "px";

    star.style.setProperty("--x", Math.cos(angle) * dist + "px");

    star.style.setProperty("--y", Math.sin(angle) * dist + "px");

    widget.appendChild(star);

    setTimeout(() => star.remove(), 800);

  }

  // 🖱️ rastro

  pet.addEventListener("mousemove", (e)=>{

    const rect = widget.getBoundingClientRect();

    createStar(e.clientX - rect.left, e.clientY - rect.top);

  });

  // 👆 click = cambio de imagen

  pet.addEventListener("click", ()=>{

    pet.style.transform="scale(1.15)";

    pet.src = happyImg;

    const rect = widget.getBoundingClientRect();

    for(let i=0;i<10;i++){

      setTimeout(()=>{

        createStar(

          Math.random()*rect.width,

          Math.random()*rect.height

        );

      }, i*40);

    }

    setTimeout(()=>{

      pet.src = normalImg;

      pet.style.transform="scale(1)";

    }, 1200);

  });

});

</script>

Hasta el próximo rincón creativo.
— Mañanas Lentas