Retro html hacks

Vistas a la página totales

Cómo agregar efecto nieve, lluvia o corazones en tu blog


Si quieres que tu blog tenga vibra Y2K real, necesitas efectos animados cayendo por la pantalla. En este tutorial te enseño cómo agregar efecto nieve, lluvia o corazones en Blogger.

Yo los estoy creando y programando para que se publiquen automáticamente según la temporada 


Paso 1 — Ir a Editar HTML

  1. Ve a Tema
  2. Haz clic en Editar HTML

Busca la etiqueta </body> y pega el código justo antes.


Efecto Nieve

<script>
let snowflakes = 50;

for (let i = 0; i < snowflakes; i++) {
  let snow = document.createElement("div");
  snow.innerHTML = "❄";
  snow.style.position = "fixed";
  snow.style.top = "-10px";
  snow.style.left = Math.random() * window.innerWidth + "px";
  snow.style.fontSize = Math.random() * 20 + 10 + "px";
  snow.style.opacity = Math.random();
  snow.style.animation = "fall " + (Math.random() * 5 + 5) + "s linear infinite";
  document.body.appendChild(snow);
}

let style = document.createElement("style");
style.innerHTML = `
@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}`;
document.head.appendChild(style);
</script>

Efecto Corazones

Solo cambia el símbolo:

snow.innerHTML = "💖";

Efecto Lluvia

<script>
for (let i = 0; i < 60; i++) {
  let rain = document.createElement("div");
  rain.style.position = "fixed";
  rain.style.width = "2px";
  rain.style.height = "15px";
  rain.style.background = "#66ccff";
  rain.style.top = "-20px";
  rain.style.left = Math.random() * window.innerWidth + "px";
  rain.style.animation = "rainfall " + (Math.random() * 2 + 2) + "s linear infinite";
  document.body.appendChild(rain);
}

let style = document.createElement("style");
style.innerHTML = `
@keyframes rainfall {
  to {
    transform: translateY(100vh);
  }
}`;
document.head.appendChild(style);
</script>

Publicarlo automático por temporada

Puedes envolver el código en una condición por fecha:

let month = new Date().getMonth();

if (month == 11 || month == 0) {
  // Activar nieve en diciembre y enero
}

Así tu blog cambia solo según el mes 


⚠️ Consejos

  • No uses más de 60 elementos si tu blog es pesado.
  • Prueba siempre en móvil.
  • Si algo se rompe, revisa que el código esté antes de </body>.

 RetroHTMLHacks