| El script | Como funciona |
| <!-- Mas en: http://javascript.espaciolatino.com/
-->
<script language="JavaScript"> |
Este es un sencillo script para añadir un efecto de nevada en una página o en una zona de una página. En este ejemplo se usa el carácter * (asterisco) blanco para representar los copos (la página debe tener un fondo oscuro para que se vea), lo que ahorra tiempo, pero puedes sustituirlo por una imagen de un copo de nieve si te apetece. Para ello en lugar de document.write('<font size="+'+tama+'" color = "#FFFFFF" >*</font>'); Debes poner document.write('<img src="copo.gif">'); donde copo.gif será la dirección de imagen que hayas elegido. Si quieres cambiar el color del copo modifica el código #FFFFFF (blanco) por otro color en la línea document.write('<font size="+'+tama+'" color = "#FFFFFF" >*</font>'); El funcionamiento es muy simple: la función iniCopos() se encarga de situar sendos bloques DIV con los copos. A esta función se la llama con 6 argumentos: número de copos, ancho y alto de la zona nevada, origen x e y de la zona nevada y tiempo de caida. La función iniNevada() construye un array con los objetos DIV de los copos. La función nevar() se llama a intervalos, mediante un temporizador, y se encarga de ir haciendo bajar los copos. Partiendo de este código básico seguro que puedes lograr efectos interesantes ¿y si en lugar de nevar lloviera?
|
| La página | Como se usa |
| <body onload="iniNevada()"> < script language="JavaScript"> iniCopos(50, 400, 300, 100); < /script> < /body> |
El código de la
página es bien simple: una llamada a la función iniCopos()
en el cuerpo de la página dibujará los bloques DIV con
los copos, mientras que un evento onload vinculado a la función
iniNevada() hara que los copos comienzen a caer por el paisaje nevado. iniCopos lleva cinco argumentos: número de copos, ancho y alto del área nevada, y el tiempo que tardan en caer. Como siempre las funciones descritas en la página del código debes situarlas en la sección HEAD de la página. |
| El script en funcionamiento |
| Prueba aquí como se ve este script en funcionamiento |