Nevando en tu página

El script Como funciona
<!-- Mas en: https://javascript.espaciolatino.com/ -->

<script language="JavaScript">
function iniCopos(num, anc, alto, veloc)
{
var i, x, y;
for (i = 0; i<num; i++)
    {
    x = parseInt(Math.random()*anc);
    y = parseInt(Math.random()*alto);
    dibujaCopo(i,x,y);
    }
window.copos = new Array(num);
window.coposAlto = alto;
window.coposAncho = anc;
window.coposVeloc = veloc;
}

function dibujaCopo(num, x, y)
{
var tama = Math.round(Math.random())+ 3
document.write('<div id="c'+num+'" style="position:absolute; width:1px;');
document.write('height:1px; z-index:0; left:'+x+'px; top:'+y+'px; ');
document.write(' background-color: #FFFFFF">');
document.write('<font size="+'+tama+'" color = "#FFFFFF" >*</font>');
document.write('</div>');
}
function iniNevada()
{
for (i = 0; i < window.copos.length; i++)
if (document.all)
    window.copos[i] = document.all["c"+i]
else
    window.copos[i] = document.getElementById("c"+i);
nevar();
}

function nevar()
{
var x, y;
for (i = 0; i < copos.length; i++)
    {
    y = parseInt(window.copos[i].style.top);
    x = parseInt(window.copos[i].style.left);
    if (Math.random() > 0.5)
        y += parseInt(Math.random()+1);
    y += parseInt(Math.random()+2);
    window.copos[i].style.top = y;
    if (y > document.body.scrollTop + coposAlto)
        {
        window.copos[i].style.top = document.body.scrollTop-
        Math.round(Math.random()*10);
        window.copos[i].style.left =                 parseInt(Math.random()*coposAncho-1);
        }
    }
setTimeout("nevar()", coposVeloc);
}
< /script>

 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
 
     
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio