| Re: scripts navideños
Bueno, es la primera vez que posteo en este hilo... aunque lo veo siempre! jeje.
Unas mejoras para un script de lo más anticuado (incluso con browser sniffing): 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>
<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="snow.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; "> </div>');
}
function snow() { // IE and NS6 main animation function
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";
}
}
snow();
// -->
</script>
<p>Nulla quis arcu quis turpis molestie ultricies. Praesent vel nibh. Morbi neque arcu, varius vel, iaculis vel, hendrerit sed, libero. Integer lacinia tortor ut tellus. Aenean vulputate justo quis neque. Nam lacus. Suspendisse quam nulla, aliquam quis, sollicitudin ut, euismod et, dui. Vestibulum eros justo, euismod ut, volutpat quis, tincidunt et, ipsum. Vivamus in nulla. Mauris pellentesque.</p>
<p>Nunc cursus eros in mi. In fermentum, nulla in vulputate hendrerit, lorem lectus scelerisque tortor, eget tempor lectus orci ac velit. Nullam luctus, dolor a dapibus pulvinar, ligula eros porta est, ut sed.</p>
<p>Nulla quis arcu quis turpis molestie ultricies. Praesent vel nibh. Morbi neque arcu, varius vel, iaculis vel, hendrerit sed, libero. Integer lacinia tortor ut tellus. Aenean vulputate justo quis neque. Nam lacus. Suspendisse quam nulla, aliquam quis, sollicitudin ut, euismod et, dui. Vestibulum eros justo, euismod ut, volutpat quis, tincidunt et, ipsum. Vivamus in nulla. Mauris pellentesque.</p>
<p>Nunc cursus eros in mi. In fermentum, nulla in vulputate hendrerit, lorem lectus scelerisque tortor, eget tempor lectus orci ac velit. Nullam luctus, dolor a dapibus pulvinar, ligula eros porta est, ut sed.</p>
<p>Nulla quis arcu quis turpis molestie ultricies. Praesent vel nibh. Morbi neque arcu, varius vel, iaculis vel, hendrerit sed, libero. Integer lacinia tortor ut tellus. Aenean vulputate justo quis neque. Nam lacus. Suspendisse quam nulla, aliquam quis, sollicitudin ut, euismod et, dui. Vestibulum eros justo, euismod ut, volutpat quis, tincidunt et, ipsum. Vivamus in nulla. Mauris pellentesque.</p>
<p>Nunc cursus eros in mi. In fermentum, nulla in vulputate hendrerit, lorem lectus scelerisque tortor, eget tempor lectus orci ac velit. Nullam luctus, dolor a dapibus pulvinar, ligula eros porta est, ut sed.</p>
<p>Nulla quis arcu quis turpis molestie ultricies. Praesent vel nibh. Morbi neque arcu, varius vel, iaculis vel, hendrerit sed, libero. Integer lacinia tortor ut tellus. Aenean vulputate justo quis neque. Nam lacus. Suspendisse quam nulla, aliquam quis, sollicitudin ut, euismod et, dui. Vestibulum eros justo, euismod ut, volutpat quis, tincidunt et, ipsum. Vivamus in nulla. Mauris pellentesque.</p>
<p>Nunc cursus eros in mi. In fermentum, nulla in vulputate hendrerit, lorem lectus scelerisque tortor, eget tempor lectus orci ac velit. Nullam luctus, dolor a dapibus pulvinar, ligula eros porta est, ut sed.</p>
<p>Nulla quis arcu quis turpis molestie ultricies. Praesent vel nibh. Morbi neque arcu, varius vel, iaculis vel, hendrerit sed, libero. Integer lacinia tortor ut tellus. Aenean vulputate justo quis neque. Nam lacus. Suspendisse quam nulla, aliquam quis, sollicitudin ut, euismod et, dui. Vestibulum eros justo, euismod ut, volutpat quis, tincidunt et, ipsum. Vivamus in nulla. Mauris pellentesque.</p>
<p>Nunc cursus eros in mi. In fermentum, nulla in vulputate hendrerit, lorem lectus scelerisque tortor, eget tempor lectus orci ac velit. Nullam luctus, dolor a dapibus pulvinar, ligula eros porta est, ut sed.</p>
</body>
</html>
Se acumula la nieve abajo y además permite el scrolleo... (para tocar un poco más las narices).
Que se sepa que yo no apoyo el uso de estos scripts en páginas web que no se dediquen a ésto de manera docente o experimental... por eso avanzo en ello (por eso, y porque en navidad la gente postea menos que nunca... snif  ).
Y cabría hacer uno con clases y objetos, un poco menos dependiente de las variables globales... al fin y al cabo, sólo son ondas creadas con senos. Si me veo con ganas quizás lo implemente... de momento que alguien proponga algún que otro retillo.. muy bueno éste, seoista.
Un saludo navideño 
PD: Que nadie pida que los copos se vayan apilando en la parte inferior 
__________________ - Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes. |