Cómo implementar una tormenta de nieve (efecto nieve) en tu sitio web con JavaScript

El espíritu navideño nunca debería morir, especialmente con esas sabrosas promociones en sitios web de comercio electrónico donde la Navidad es una buena razón para comprar cosas geniales realmente más baratas de lo habitual. En algunos sitios web, verá un efecto de nieve fría cuando ingrese en la estación específica del año.

Como desarrollador, esto suele ser innecesario teniendo en cuenta que como se mencionó el gasto innecesario de recursos del navegador web, sin embargo, no es usted quien decide si la nieve debe aparecer o no en el sitio web sino el cliente y si el cliente lo desea. característica, lo único que puede hacer es implementar lo más optimizado posible. Afortunadamente, gracias a un complemento de código abierto que se preocupa por la optimización y otros efectos que todo usuario desearía, podrá implementarlo en segundos en su proyecto utilizando el script snowstorm. En este artículo, compartiremos contigo este increíble complemento y cómo implementarlo en tu sitio web.

1. Descarga e incluye Snowstorm.js

Snowstorm es un efecto de nieve impulsado por JavaScript que se puede agregar fácilmente a las páginas web. Es de uso gratuito y fácil de configurar. Un solo archivo JavaScript proporciona la funcionalidad requerida. No se utilizan imágenes para el efecto nieve. Para incluir Snowstorm.js en su proyecto, descargue una copia del script del repositorio y guárdelo en un archivo. Alternativamente, puede usar rawgit cdn para entregar el archivo en producción:

<!-- De una copia local -->
<script src="snowstorm-min.js"></script>

<!--Usando una CDN gratuita -->
<script src="https://cdn.rawgit.com/scottschiller/Snowstorm/master/snowstorm-min.js"></script>

Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí  o el sitio web oficial para ver la demostración .

2. Inicializar Snowstorm

Después de incluir el script de tormenta de nieve, solo necesita inicializarlo. El script expone globalmente la variable snowStorm en la ventana, un objeto que ofrece una gran cantidad de métodos y propiedades personalizables (para conocerlos todos, lea los documentos en el sitio web oficial aquí ):

// 1. Define un color para la nieve
snowStorm.snowColor = '#fff';
// 2. Para optimizar, defina el número máximo de copos que pueden
// aparecer en la pantalla a la vez
snowStorm.flakesMaxActive = 96;
// 3. Deje que la nieve entre y salga de la vista
snowStorm.useTwinkleEffect = true; 
// 4. ¡Empieza la tormenta de nieve!
snowStorm.start();

El método de inicio mostrará en la parte superior de la página el efecto de nieve animado. Snowstorm puede consumir una gran cantidad de CPU, incluso en las computadoras modernas, debido a la cantidad de elementos que se mueven por la pantalla a la vez. El ejemplo básico puede tener un uso de CPU notablemente menor, ya que no incluye las luces de Navidad y el diseño de la página es mucho más simple. Considere aumentar el intervalo de animación y reducir la cantidad de copos de nieve (activos y máximos) para ayudar a reducir el uso de la CPU.

Que te diviertas ❤️!