Efecto de nieve con jQuery
Efecto de nieve con jQuery

¿Queréis que nieve en vuestra página web para darle un toque más navideño?
Os voy a mostrar cómo conseguir este efecto de nieve con jQuery. Es muy sencillo.

Rebuscando un poco por Google encontraremos rápidamente varios plugins que nos permiten crear este efecto. Yo os voy a explicar cómo funciona uno de ellos.

Ivan Lazarevic ha desarrollado un plugin muy sencillo de integrar y configurar. En su blog WORKSHOP podemos ver una demo, leer las instrucciones y descargarlo gratuitamente.

DEMO DESCARGAR

A continuación os dejo la traducción de las instrucciones, que en su blog podéis leer en inglés:

El primer paso es incluir jQuery y el plugin jquery.snow.js (o jquery.snow.min.js) en la sección head del documento:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="jquery.snow.js"></script>

Ahora, colocamos el código que inicializa el plugin:

<script>
$(document).ready( function(){
 $.fn.snow();
});
</script>

El plugin se puede configurar con algunas opciones, para ajustar el comportamiento de la nieve a tu gusto. Aquí tenéis un ejemplo de inicialización con las direfentes opciones para configurarlo:

<script>
$(document).ready( function(){
 $.fn.snow({
 minSize: 10, //Tamaño mínimo del copo de nieve, 10 por defecto
 maxSize: 20, //Tamaño máximo del copo de nieve, 10 por defecto
 newOn: 1250, //Frecuencia (en milisegundos) con la que aparecen los copos de nieve, 500 por defecto
 flakeColor: '#FFFFFF' //Color del copo de nieve, #FFFFFF por defecto
 });
}); 
</script>

Debéis tener especial cuidado con el parámetro newOn, pues una frecuencia demasiado alta puede afectar al rendimiento de la página web.

Y hasta aquí el tutorial para añadir un efecto de nieve con jQuery en vuestra página web.

Muchas gracias a Ivan Lazarevic por su trabajo desarrollando este plugin. Podéis leer la entrada original aquí.

comments powered by Disqus