Nieve en el blog usando la propiedad marquee

Se trata de un truco muy sencillo y bastante decorativo, sobre todo si te encuentras en plena Navidad.

Para crear la nieve utilizamos la etiqueta <marquee> y le agregamos varias propiedades, tales como la velocidad, la dirección, la posición o el color.

Sigue los pasos y realiza la sencilla instalación:

Diseño>añadir gadget (elemento de página)>html-javascript

Pega lo siguiente:

<div id="Nievebalcon"/>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 90px; top: 0px; width: 16px; height: 120px;" scrollamount="7">•</marquee>
<marquee direction="down" 110px; behavior="scroll" scrollamount="4" 0px; style="position: absolute; width: 16px; height: 800px;" left: top:>•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 116px; top: 5px; width: 16px; height: 560px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 232px; top: 16px; width: 16px; height: 600px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 150px; top: 4px; width: 16px; height: 610px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 214px; top: 25px; width: 16px; height: 500px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 330px; top: 35px; width: 16px; height: 452px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 246px; top: 15px; width: 16px; height: 530px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 312px; top: 55px; width: 16px; height: 400px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 338px; top: 65px; width: 16px; height: 410px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 354px; top: 35px; width: 16px; height: 460px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 0px; width: 16px; height: 700px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 402px; top: 15px; width: 16px; height: 600px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 115px; top: 0px; width: 16px; height: 70px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 418px; top: 5px; width: 16px; height: 610px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 434px; top: 25px; width: 16px; height: 500px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 450px; top: 25px; width: 16px; height: 450px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 430px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 482px; top: 55px; width: 16px; height: 400px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 386px; top: 5px; width: 16px; height: 570px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 598px; top: 65px; width: 16px; height: 410px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 614px; top: 35px; width: 16px; height: 460px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 894px; top: 15px; width: 16px; height: 260px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 630px; top: 0px; width: 16px; height: 700px;" scrollamount="1">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 646px; top: 5px; width: 16px; height: 570px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 386px; top: 5px; width: 16px; height: 470px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 662px; top: 15px; width: 16px; height: 600px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 678px; top: 5px; width: 16px; height: 610px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 694px; top: 25px; width: 16px; height: 500px;" scrollamount="1">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 710px; top: 25px; width: 16px; height: 450px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 726px; top: 15px; width: 16px; height: 430px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 742px; top: 55px; width: 16px; height: 400px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 758px; top: 65px; width: 16px; height: 410px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 774px; top: 35px; width: 16px; height: 460px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 974px; top: 35px; width: 16px; height: 160px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 790px; top: 0px; width: 16px; height: 700px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 5px; width: 16px; height: 570px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 828px; top: 5px; width: 16px; height: 610px;" scrollamount="1">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 844px; top: 25px; width: 16px; height: 600px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 860px; top: 25px; width: 16px; height: 460px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 880px; top: 22px; width: 16px; height: 460px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 892px; top: 55px; width: 16px; height: 400px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 898px; top: 65px; width: 16px; height: 410px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 900px; top: 35px; width: 16px; height: 460px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 90px; top: 12px; width: 16px; height: 760px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 180px; top: 5px; width: 16px; height: 560px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 206px; top: 15px; width: 16px; height: 600px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 630px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 419px; top: 25px; width: 16px; height: 550px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 520px; top: 25px; width: 16px; height: 420px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 656px; top: 15px; width: 16px; height: 430px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 860px; top: 55px; width: 16px; height: 430px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 870px; top: 65px; width: 16px; height: 410px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 290px; top: 35px; width: 16px; height: 460px;" scrollamount="1">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 625px; top: 0px; width: 16px; height: 700px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 580px; top: 5px; width: 16px; height: 570px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 306px; top: 15px; width: 16px; height: 300px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 549px; top: 5px; width: 16px; height: 610px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 209px; top: 25px; width: 16px; height: 280px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1070px; top: 25px; width: 16px; height: 450px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 950px; top: 15px; width: 16px; height: 430px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 260px; top: 55px; width: 16px; height: 200px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 770px; top: 65px; width: 16px; height: 210px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 35px; width: 16px; height: 360px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 915px; top: 0px; width: 16px; height: 50px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 425px; top: 0px; width: 16px; height: 50px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 380px; top: 5px; width: 16px; height: 70px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 15px; width: 16px; height: 100px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 110px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 919px; top: 25px; width: 16px; height: 280px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 270px; top: 5px; width: 16px; height: 150px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 750px; top: 15px; width: 16px; height: 130px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 660px; top: 5px; width: 16px; height: 100px;" scrollamount="8">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 5px; width: 16px; height: 60px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 965px; top: 0px; width: 16px; height: 50px;" scrollamount="3">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1200px; top: 0px; width: 16px; height: 50px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1010px; top: 0px; width: 16px; height: 150px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 5px; width: 16px; height: 70px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 100px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 259px; top: 5px; width: 16px; height: 110px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 490px; top: 25px; width: 16px; height: 280px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 530px; top: 5px; width: 16px; height: 150px;" scrollamount="8">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 770px; top: 15px; width: 16px; height: 130px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 810px; top: 5px; width: 16px; height: 100px;" scrollamount="2">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 560px; top: 5px; width: 16px; height: 110px;" scrollamount="6">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 620px; top: 5px; width: 16px; height: 160px;" scrollamount="4">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 740px; top: 10px; width: 16px; height: 100px;" scrollamount="5">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 340px; top: 0px; width: 16px; height: 100px;" scrollamount="7">•</marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 890px; top: 0px; width: 16px; height: 200px;" scrollamount="8">•</marquee>
</div>

En el código encontrarás varias líneas como esta:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 20px; width: 18px; height: 120px;" scrollamount="5">•</marquee>

Cada una tiene valores únicos, en cuanto a la posición del copo y la velocidad a la que cae.

El círculo resaltado en verde (•) es el copo de nieve. Afortunadamente, puede sustituirse por cualquier otro símbolo (por ejemplo, un asterísco: *) o frase (como: Feliz Navidad!), además de una imagen.

En caso de querer usar un icono, necesitas usar esta línea:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 20px; width: 18px; height: 120px;" scrollamount="5"><img src="URL DE LA IMAGEN"/></marquee>

Y sustituir URL DE LA IMAGEN por la dirección de la imagen escogida ^[+].

Por otro lado, si quieres añadir una frase personal y que ésta caiga al igual que los copos de nieve, sustituye el "copo" (•) del primer código por el texto.

Ahora veamos la función de cada valor:

direction="down" La dirección a la que se dirige el copo de nieve (en este caso, hacia abajo).

left: 100px; Esta es la distancia desde la izquierda de la pantalla hasta la posición desde la cual el copo caerá. Será importante que cambiemos el valor (100) por otro diferente en cada caso, sumando 10 - 20 para que los copos no se junten demasiado.

top: 20px; El lugar en el que aparece el copo, empezando desde arriba. El valor (20) puede cambiarse, para que cada copo caiga a una distancia diferente.

width: 18px; y height: 120px; Representan la anchura (18) y altura (120) del copo. Si usas una imagen, tendrás que adaptar la anchura y la altura al tamaño de ésta.

scrollamount="5" Indican la velocidad a la que caerá el copo. Puedes incrementar o disminuir el valor (5) para hacer que el copo caiga a mayor velocidad o a menor velocidad.

Una vez hayas editado los valores necesarios, guarda el gadget.

Héctor dice...: ¡JA! "truco muy sencillo"

¡JA! "fácil instalación"

Copy-Paste... eso sí es fácil.

Agradezcamos al dios de los blogs por traer al mundo a gente como usted, porque yo ese código no lo hago ni aunque me paguen...

Gracias. Tantas como copos de nieve caen en su blog durante dos días. Multiplicadas por el número de gatos que han aparecido aquí.; 15/12/09
Helena dice...: Me ha encantado! ya lo he puesto ;-); 15/12/09
Sanchete dice...: Gracias por este truco, enseguida he querido instalarlo en mi blog! La pena que ahora te voy a comentar es que, a pesar de este truco me funciona perfectamente, cuando lo tengo instalado tengo como "bloqueado" el menú desplegable, es decir, no se despliegan las opciones que tendrían que aparecer al pasar el ratón por encima. Es como si este truco formara una especie de "muro" entre el ratón y el menú, ¿tienes idea de como solucionarlo?

Mil gracias :); 15/12/09
Jaime Trujillo Escobedo dice...: Héctor Gutiérrez, en efecto, es sencillísimo. Muchísimas gracias a tí por comentar, jajajaja me encantó tu forma de dar las gracias (Tantas como copos de nieve caen en su blog durante dos días. Multiplicadas por el número de gatos que han aparecido aquí) :P.; 15/12/09
Jaime Trujillo Escobedo dice...: ¡Ya veo Helena, Te ha quedado divino!

Veo que has cambiado el color de los copos de nieve, los has dejado preciosos ;).; 15/12/09
Jaime Trujillo Escobedo dice...: Es cierto todo lo que dices Sanchete. Te comento que acabo de entrar a tu blog y veo que conseguiste implementar la nieve en el blog sin que le afectase al menú (con un script).

Aún así, si en otra ocasión quieres implementar este truco avísame y encontraremos una solución ;).

¡Abrazos y muchísimas felicidades por la entrada número 100!; 20/12/09

Pages