Efecto de nieve con jQuery

Efecto de nieve con jQuery
viernes 21 de diciembre 2012 a las 23:00   Sergi Ruiz   Workshop   Recursos  
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

Este sitio web utiliza cookies. Puede obtener más información acerca de las cookies leyendo nuestra Política de privacidad