viernes, 16 de diciembre de 2011

Nieve en el blog mediante jQuery Snowfall

En Somethinghitme presentan un script basado en jQuery para añadir nieve en algún sitio, o bien para incluirla en algún elemento en particular.

La novedad de este script es su sencillez de uso, además de la gran capacidad de personalización que contiene. Es posible definir la cantidad, color, tamaño mínimo/máximo, velocidad máxima/mínima de la nieve, etc.



Puedes ver el resultado del script mediante el siguiente ejemplo:



En el ejemplo el script está aplicado a un contenedor con un identificador, pero también puede hacerse directamente al documento.

El tutorial:
Recuerda que para poder usar el script es necesario jQuery.

Paso 1: Añadiendo el script:

En "Diseño | Edición HTML" deberás buscar la siguiente línea:
</head>
Arriba de ésta pega el siguiente código:

<script src="http://dl.dropbox.com/u/28164309/ADEV/Libraries/snowfall.jquery/snowfall.jquery.js" type="text/javascript"></script>

Paso 2: Configurando el script:

También arriba de </head>, deberás pegar el siguiente código:
<script type="text/javascript">
$('#nombre-contenedor').snowfall({
flakeCount : 50,
flakeColor : '#ffffff',
flakeIndex: 999999,
minSize : 1,
maxSize : 4,
minSpeed : 2,
maxSpeed : 5
});
</script>

En donde deberás reemplazar #nombre-contenedor por el ID al que deseas aplicar el efecto.

Si quieres que la nieve cubra todo el blog, en lugar del código anterior, utiliza el siguiente:
<script type="text/javascript">
$(document).snowfall ({ flakeCount : 50,
flakeColor : '#ffffff',
flakeIndex: 999999,
minSize : 4,
maxSize : 8,
minSpeed : 2,
maxSpeed : 5
});
</script>
 Explicación de los valores:
  • flakeCount: Corresponde a la cantidad de nieve que caerá.
  • flakeColor: Color de la nieve.
  • flakeIndex: Corresponde al z-index, dejar en valor por defecto si no entiendes cual es la función.
  • minSize: Tamaño mínimo de la nieve.
  • maxSize: Tamaño máximo de la nieve.
  • minSpeed: Velocidad mínima de la nieve.
  • maxSpeed: Valocidad máxima de la nieve.

Nota: Si al usar el script en algún contenedor la nieve no se alinea al contenido, es necesario utilizar el atributo "position:absolute;".

Si este script no te gusta o bien quieres optar por otras alternativas, puedes visitar este post de Oloblogger.com el cual incluye 5 formas diferentes de incluir nieve en el blog.

No hay comentarios:

Publicar un comentario