Añadir efecto nieve en tu web

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

La navidad está cada vez más cerca y con ella la oportunidad que tienen muchos webmasters de decorar sus webs para la ocasión, ya sea añadiendo elementos navideños al logo de nuestros sites, como: Papá Noel, trineos, gorros navideños, dulces… y sobre todo nieve, mucha nieve.

Aunque pueda parecer cosa del pasado, añadir el efecto nieve a nuestra web, parece que vuvleve a estar más de moda que nunca este año, después de encontrarse el siguiente huevo de pascua en Google, ‘Let it snow‘ (‘Deja que nieve’)

Para conseguir un efecto tipo tipo nieve en nuestro site tendremos que copiar el siguiente código Javascript justo después de la etiqueta <body> de nuestro site.

<script language=”JavaScript1.2″>

//Configurar la ruta de la imagen
var snowsrc=”nieve1.gif”
// Configurar el tipo de nieve
var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
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
if (ns4up) { // set layers
if (i == 0) {
document.write(“<layer name=”dot”+ i +”” left=”15″ top=”15″ visibility=”show”><a href=”http://dynamicdrive.com/”><img src='”+snowsrc+”‘ border=”0″></a></layer>”);
} else {
document.write(“<layer name=”dot”+ i +”” left=”15″ top=”15″ visibility=”show”><img src='”+snowsrc+”‘ border=”0″></layer>”);
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write(“<div id=”dot”+ i +”” style=”POSITION: absolute; Z-INDEX: “+ i +”; VISIBILITY: visible; TOP: 15px; LEFT: 15px;”><a href=”http://dynamicdrive.com”><img src='”+snowsrc+”‘ border=”0″></a></div>”);
} else {
document.write(“<div id=”dot”+ i +”” style=”POSITION: absolute; Z-INDEX: “+ i +”; VISIBILITY: visible; TOP: 15px; LEFT: 15px;”><img src='”+snowsrc+”‘ border=”0″></div>”);
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers[“dot”+i].top = yp[i];
document.layers[“dot”+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout(“snowNS()”, 10);
}

function snowIE_NS6() { // IE and NS6 main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all[“dot”+i].style.pixelTop = yp[i];
document.all[“dot”+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById(“dot”+i).style.top=yp[i];
document.getElementById(“dot”+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout(“snowIE_NS6()”, 10);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}

</script>

Recordar configurar la ruta de la imagen de los copos de nieve. Estos son algunos ejemplos que puedes utilizar.

nieve1 nieve3nieve2

Para terminar, recuerda que con esta misma técnica y código podrás realizar que caigan de tu web: estrellas, dinero… cualquier imagen que tenga que ver c on la temáticas de website.

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.