Crear Efecto de Nieve en mi Web [JavaScript] - Trucodigo

Crear Efecto de Nieve en mi Web [JavaScript]



¿Quieres que nieve en nuestra página web para darle un toque más navideño?
Les 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 les voy a explicar cómo funciona uno de ellos.

El primer paso es incluir jQuery y el plugin jquery.snow.min.1.0.js (el link de descarga del archivo esta al final del post) 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>


Debes 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 nuestra página web.


http://www5.zippyshare.com/v/QPQSxAFC/file.html
Tags
Opciones
Estadísticas
Creado 26.12.2013 a las 03:19 hs
Categoría JavaScript
  • 0
    Medallas
  • 0
    Favoritos
  • 1280
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas
Últimos visitantes