Efecto nieve por Navidad

Añadir efecto nieve a tu web por Navidad

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 de copo de nieve
      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.

Si quieres ver un ejemplo de este código funcionando en una web, además de Andy21, puedes visitar la tienda online de Sector112 haciendo clic en el enlace anterior (sólo durante las Fiestas Navideñas).

image_pdfVer en formato PDFimage_printFormato para IMPRIMIR