Huy, me acuerdo de ese código, estuvimos hablando de él por aqui:
http://www.forosdelweb.com/f13/scrip...10/index2.html
Pero es muy antiguo. Incluso plantee la
mejora de que los copos se quedasen abajo acumulados... me pareció mas atractivo (habría que ir borrandolos alguna vez porque se acumulan demasiados...). Había que quitarle la detección del browser, que ya no sirve para nada, y reducir líneas.
Es normal que no te funcione pegando, no se puede pegar por pegar: ese código contiene funciones y demás elementos. Es más complicado.
Bueno, te dejo aquí el código modificado, y con la secuencia de botones. Como ves en vez del
alert() hay que poner
snow() para que nieve, y listo. Los copos inicialmente los dibujo ocultos, y luego a la hora de hacer llover los muestro:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
body { height: 100%; }
</style>
</head>
<body onkeypress="tecla(event)">
<script type="text/javascript">
<!--
/******************************************
* Snow Effect Script- By Altan d.o.o. ([email protected], http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
(modificado por derkeNuke, también ;-) )
******************************************/
//Configure below to change URL path to the snow image
// por ejemplo: http://fresh.t-systems-sfr.com/unix/src/privat2/mweather-0.6.0.tar.gz:a/mweather/images/snow.gif
var snowsrc="http://www.ahiva.info/public/galeria/santa09.gif";
var imgWidth = 50, imgHeight = 50; // dimensiones de snowsrc
// Configure below to change number of snow to render
var no = 10;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var abajoN = 0;
var doc_width = document.body.clientWidth || window.innerWidth;
var doc_height = document.body.clientHeight || window.innerHeight;
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
scrollY = new Array();
for (var i=0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-imgWidth); // set position variables
yp[i] = Math.random()*(doc_height-imgHeight);
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
scrollY[i] = 0; // scrollY para cada punto
document.write('<div id="dot'+i+'" style="POSITION: absolute; Z-INDEX: '+i+'; width:'+imgWidth+'px; height:'+imgHeight+'px; background: url('+snowsrc+') no-repeat; display:none;"> </div>');
}
function snow() {
for (var i=0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i]; // un paso más en la coordenada Y
if (yp[i] > doc_height-50) { // Si nos salimos de la pantalla por abajo con el copo
// Que el copo vuelva a su nueva regeneración, sí, pero dejaremos una copia allí donde estuviera cuando llegue abajo
var copia = document.getElementById("dot"+i).cloneNode(true);
copia.setAttribute("id", "abajo"+abajoN++);
document.body.appendChild( copia );
// generamos la nueva posición y las nuevas variables para este copo
xp[i] = Math.random()*(doc_width-am[i]-imgHeight); // Generamos una X aleatoria
yp[i] = 0; // Reseteamos la posición Y
stx[i] = 0.02 + Math.random()/10; // Inicializamos de nuevo los stepX e stepY
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i]; // Un paso más en la coordenada X
document.getElementById("dot"+i).style.top = (yp[i] + scrollY[i]) + "px";
document.getElementById("dot"+i).style.left = (xp[i] + am[i]*Math.sin(dx[i])) + "px";
}
setTimeout("snow()", 10);
}
window.onscroll = function() {
var scrTop = window.document.documentElement.scrollTop;
for (var i=0; i < no; ++ i) {
scrollY[i] = scrTop;
}
for(var i=0; i<abajoN; i++) {
document.getElementById("abajo"+i).style.top = (scrTop+doc_height-imgHeight) + "px";
}
}
var keyCode, i=0;
function tecla(e){
if(window.event)
keyCode=window.event.keyCode;
else if(e)
keyCode=e.which;
if( i===0 && keyCode===49 )
i = 1;
else if( i===1 && keyCode===50 )
i = 2;
else if( i===2 && keyCode===51 )
i = 3;
else if( i===3 && keyCode===52 )
i = 4;
else if( i===4 && keyCode===53 ) {
i = 0;
// hay que poner que los copos sean visibles:
for (var x=0; x < no; ++ x) {
document.getElementById("dot"+x).style.display = "block";
}
// nevar
snow();
}
else
i = 0;
}
// -->
</script>
</body>
</html>
Bueno, espero que así quedes satisfecho.
Saludos
