Nieve en el blog

Un lindo efecto de nieve en el blog que conseguiremos usando la etiqueta "marquee".

El código se construye a partir de una simple línea:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee>

Esta línea de código hace que se forme un copo de nieve. Para mostrar el copo usamos un asterisco (*).
Cada vez que repetimos esta línea se forma un nuevo copo de nieve, eso si, tendremos en cuenta que si la copiamos tal cual, el copo saldrá encima del anterior. Para evitar esto y conseguir el efecto de nevada, tendremos que copiar esa línea tantas veces como copos queramos conseguir, pero modificando algunos valores:

  • left: La distancia desde la izquierda de la pantalla, hasta donde se verá el copo caer. Aquí tendremos en cuenta ir colocando en cada línea distintos valores, por ejemplo, sumando 20 al valor anterior.
  • top: La distancia desde la cabecera del blog, hasta el lugar donde aparecerá el copo. Si ponemos cero en todas las líneas de código, todos los copos saldrán desde arriba del todo de la pantalla.
  • width: La anchura que ocupará el copo de nieve, en el caso de que usemos el asterisco no necesitaremos modificarla, si usamos una imagen en lugar del asterisco, tendremos que poner en todas las líneas la anchura que tenga la imagen.
  • height: La distancia desde donde aparece el copo hasta donde se oculta. Si ponemos distintos valores quedará más bonito, pero puede dejarse el mismo para todos los copos (en todas las líneas).
  • scrollamount: La velocidad de bajada del copo, cuanto menor sea este valor, más lento se desplazará el copo.
  • color: El color del copo. En el ejemplo lo he puesto de color blanco, pero para un blog con fondo blanco tendremos que colocar un color más oscuro, un azul claro estaría bien (#66CCFF).
Como puedes apreciar en mi blog de ejemplo, he usado ademas de los asteriscos, alguna imagen (estrellas y copos de nieve).He tenido la precaución de buscarlas del mismo tamaño, para que resulte más sencillo armar el código.

La línea para un copo con imagen o la estrella, o la imagen que sea, sería esta:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 675px; top: 0px; width: 16px; height: 90px;" scrollamount="1"><img src="URL_DE_LA_IMAGEN"/></marquee>

En cuanto al letrero de "FELIZ NAVIDAD" lo he conseguido añadiendo en el código esta línea:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 500px; top: 0px; height: 200px;" scrollamount="1"><span >FELIZ NAVIDAD</span></marquee>

Una vez explicadas las modificaciones que podemos hacer, les dejo el código para mostrar la nieve con los asteriscos, que pegaremos en un elemento HTML-Javascript.

Si no quieres usar imágenes, con copiar y pegar este código, tenda la nieve en el blog.
Si quieres usar alguna de las imágenes (las estrellas o el copo) estas son las urls:

Estrella azul: http://img206.imageshack.us/img206/4751/16starcoldxh2.png
Copo: http://img153.imageshack.us/img153/1231/stockweathersnowrk3.png
Puedes ver como queda en el blog.

Descargar codigo:

Fuente: elescaparatederosa

0 comentarios:

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika