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
});

Para añadir el efecto de nieve a tu sitio WordPress, puedes hacerlo de dos maneras:

Usando un plugin como Code Snippets:

  1. Accede al panel de administración de WordPress.
  2. Ve a Plugins > Añadir nuevo y busca el plugin Code Snippets (si no lo tienes instalado). Instálalo y actívalo.
  3. Una vez instalado, ve a «Fragmentos de código» > Añadir nuevo.
  4. Ponle un título al snippet, como por ejemplo «Añadir efecto nieve a tu web por Navidad«.
  5. Copia y pega el código que encontrarás más arriba en el campo de código.
  6. Configura el snippet para que se ejecute en todas partes y guarda los cambios.

Añadiendo el código al archivo functions.php de tu tema:

  1. Ve a Apariencia > Editor de temas (o accede al archivo directamente desde tu servidor mediante FTP).
  2. Abre el archivo functions.php del tema activo.
  3. Desplázate hasta el final del archivo y pega el código que te proporcionamos.
  4. Guarda los cambios.

Ambas opciones son válidas, aunque recomendamos usar Code Snippets para evitar que pierdas los cambios al actualizar tu tema. 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