Añadir efecto nieve a tu web por Navidad

13/12/202416/06/2026 Andy Garcia

La temporada navideña está aquí, y no hay mejor momento para darle un toque especial a tu sitio web. Añadir un efecto de nieve animado no solo crea un ambiente festivo, sino que también puede captar la atención de tus visitantes y mejorar su experiencia.

A continuación te mostraré cómo incorporar un efecto de nieve ligero y atractivo a tu web utilizando un sencillo fragmento de código JavaScript que puedes seleccionar (haciendo doble clic), copiar y pegar en tu web.

Si tienes WordPress puedes insertar el código en el archivo functions.php o usando el plugin Code Snippets, más abajo se explica paso a paso.

// Añadir efecto nieve a tu web por Navidad
add_action('wp_footer', function() {
  ?>
  <script>
    // Crear copos de nieve
    function createSnowflake() {
      const snowflake = document.createElement('div');
      snowflake.classList.add('snowflake');
      snowflake.innerHTML = '&#10052;'; // Simbolo a mostrar (copo de nieve), se puede cambiar
      document.body.appendChild(snowflake);
      const startPosX = Math.random() * window.innerWidth;
      snowflake.style.left = `${startPosX}px`;
      // Animar el copo de nieve
      const duration = Math.random() * 5 + 5;
      snowflake.style.animation = `fall ${duration}s linear infinite`;
      // Eliminar el copo de nieve una vez caído
      setTimeout(() => {
        snowflake.remove();
      }, duration * 1000);
    }
    // Intervalo entre copo y copo en msg.
    setInterval(createSnowflake, 1000);
    // Estilos CSS dinámicos para la animación
    const style = document.createElement('style');
    style.innerHTML = `
      body {
        margin: 0;
        padding: 0;
        position: relative;
        min-height: 100vh;
      }
      .snowflake {
        position: absolute;
        top: -10px;
        color: #FFF;
        font-size: 20px;
        pointer-events: none;
        z-index: 9999;
        user-select: none;
        opacity: .5;
      }
      @keyframes fall {
        to {
          transform: translateY(calc(100vh + 20px));
        }
      }
    `;
    document.head.appendChild(style);
  </script>
  <?php
});

Instrucciones para insertar el código

Hemos preparado un post con instrucciones detalladas sobre como insertar este o cualquier otro código PHP usando functions.php, el plugin code snippets o creando tu propio plugin, para acceder al mismo pulsa el siguiente enlace: ¿Cómo insertar código PHP en WordPress?

Una vez añadido, el efecto de nieve se mostrará automáticamente en tu sitio web.