Aunque estemos en septiembre, voy hacerle como muchos centros comerciales que algunos de este mes comienzan a sacar los productos de navidad; pero en mi caso compartiré con ustedes el código para agreguen el efecto de nieve en su sitio Web o blog.
Cabe destacar que para quienes no tienen conocimientos amplios de HTML, este es uno de los códigos más difíciles de conseguir ya que la mayoría de desarrolladores gusta de complicar la información de los códigos o incluso con información dudosa; pero como ustedes saben con gusto les comparto programas y/o información libre de virus, Spyware o cosas raras, pero sobre todo que funcionan.
El ejemplo de cómo funciona este código lo pueden ver en una de las páginas de mi sitio Web de www.buscate.com.mx, ya que no lo muestro aquí porque se aplicaría el efecto al blog y pues no estamos en época navideña..jeje, para ello pueden ver cómo funciona en el siguiente link: http://www.buscate.com.mx/programasfree/webmasters-codigos-scripts-0008.html
Dicho lo anterior pasemos a lo que nos truje. Este código funciona tanto para Firefox como IExplorer, para aplicar este efecto copia y pega el siguiente código antes de
</head>
<script type="text/javascript">
var speed=20; // A menor numero más rápido
var flakes=20; // Numero de Copos de Nieve
var flake_image="http://Ingresa aquí la URL de la imagen del copo de nieve"; // URL de la imagen de nieve
var swide, shigh;
var dx=new Array();
var xp=new Array();
var yp=new Array();
var am=new Array();
var sty=new Array();
window.onload=function() { if (document.getElementById) {
var k, f, b;
b=document.createElement("div");
b.style.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
for (var i=0; i<flakes; i++) {
dx[i]=0;
am[i]=Math.random()*20;
xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);
yp[i]=Math.random()*shigh;
sty[i]=0.75+1.25*Math.random();
f=document.createElement("div");
f.style.position="absolute";
f.setAttribute("id", "flk"+i);
f.style.zIndex=i;
f.style.top=yp[i]+"px";
f.style.left=xp[i]+"px";
k=document.createElement("img");
k.src=flake_image;
f.appendChild(k);
b.appendChild(f);
}
setInterval("winter_snow()", speed);
}}
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600
}
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
document.getElementById("bod").style.top=sdown+"px";
document.getElementById("bod").style.left=sleft+"px";
}
function winter_snow() {
for (var i=0; i<flakes; i++) {
yp[i]+=sty[i];
if (yp[i]>shigh-30) {
xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);
yp[i]=0;
sty[i]=0.75+1.25*Math.random();
}
dx[i]+=0.02+Math.random()/10;
document.getElementById("flk"+i).style.top=yp[i]+"px";
document.getElementById("flk"+i).style.left=(xp[i]+am[i]*Math.sin(dx[i]))+"px";
}
}
</script>
Recuerda cambiar lo que está en color rojo por tu información.
Saludos
Cocoscuba
www.buscate.com.mx
No hay comentarios:
Publicar un comentario