Nieve en tu blog | Oloblogger Aprovechando que estamos en época navideña, os presento un Javascript que bien puede simular una especie de nieve que se genera al mover el ...

13 de diciembre de 2007

Nieve en tu blog

Aprovechando que estamos en época navideña, os presento un Javascript que bien puede simular una especie de nieve que se genera al mover el ratón. Cuanto más lo muevas, más nieve.

Hay que colocar todo el código justo antes de </body>. La variable COLOUR permite especificar el color de cada copo y SPARKLES define la cantidad de copos máxima. No poner demasiados porque relentizará mucho. Nada más.

¡FELIZ NEVADA NAVIDEÑA!


Ver/Ocultar código [+/-]
<script type="text/javascript">
// <![CDATA[
var colour="#f0f";
var sparkles=50;

/****************************
* Tinkerbell Magic Sparkle *
* http://www.mf2fm.com/rv *
* NO EDITAR TEXTO MAS ABAJO *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}

function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}

function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}

function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}

function set_scroll() {
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;
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

20 comentarios :

  1. Ya prove la escarcha, muy bacano este post. oloman, ya se que te ido muchas cosas pero cuando tengas tiempo que tal si nos das un html para crear tablas para organizar imagenes o datos, saludos

    ResponderEliminar
  2. GRACIAS POR TAN BONITA NIEVE SE VE ROSADA ME ENCANTA ERES UN GENIO BESOS

    ResponderEliminar
  3. Gracias Oloman! me ha gustado mucho este truquito, le he puesto varios colores, pero al final se queda el mismo que tu has puesto, es el que mas resalta! ;)
    Un saludo!

    ResponderEliminar
  4. Hola gracias es muy bonito pero como le cambio los colores? me puedes responder?

    ResponderEliminar
  5. Claro...

    En la línea var colour="#f0f"; cambia el código hexadecimal por el que prefieras.

    ResponderEliminar
  6. No me sale absolutamente nada =(

    ResponderEliminar
  7. Jeisy, lo acabo de comprobar y sigue funcionando en FF y en IE. Asegúrate de copiar y pegar bien todo. Felices Fiestas.

    ResponderEliminar
  8. No me sale nada. No sé por qué

    ResponderEliminar
  9. Prueba si quieres con esta otra forma de simular nieve, ¡aunque ya casi se está acabando la Navidad! :D

    ResponderEliminar
  10. Gracias amigo por tu consejo, quedó muy chévere en mi blog y lo más importante es que no hizo lenta a mi página... no te dejo mi link pq no quiero que lo borres, pero te agradezcon un mundo.

    ResponderEliminar
  11. Sólo borro los enlaces injusticados Areka y en tu caso, tus blogs se pueden ver desde tu perfil ;)

    ResponderEliminar
  12. necesito Agua de la alta montaña andina amazonica putumayense pulmon del mundo para generar energia electrica y para consumo humano

    ResponderEliminar
  13. Hola necesito un poco de ayuda. Ahora no sé como quitar la nieve de mi blog, ¿ me podrían ayudar ? Mi blog es.. http://viajarvolando.blogspot.com SALUDOS!

    ResponderEliminar
  14. Lalo, sólo tienes que localizar el código que aquí se reproduce y borrarlo completamente.

    ResponderEliminar
  15. Super genial :)... me encanto :P graacias...

    ResponderEliminar
  16. Me resulto perfecto..sin embargo porque al aplicar el efecto mi blog se extiende mucho (es decir la barra lateral derecha se aalarga bastante y no hay más después de la plantilla que hice mal?
    para que cheques el problema mi blog es:http://qukumatz.blogspot.com/ como hago para que sólo sea proporcional a la plantilla?

    ResponderEliminar
  17. Gracias, lo acabo de instalar en mi blog y quedó súper de lujo! Aprovecho para informarte que he cambiado el diseño y que estoy lanzando grandes colecciones de portaretratos navideños para colocar tus fotos en esta Navidad y Año Nuevo. Saludos en la distancia.

    ResponderEliminar
  18. No sé Abraham, pero supongo que afectará alguno de los otros gadgets que tienes en el blog. De todas formas ahora no lo veo.

    Ok Banco de imágenes

    ResponderEliminar
  19. Hola Oloman
    Muchas gracias por "TU" nieve, que aunque uno no celebre este tipo fiestas paganas, si es bueno y educado mantener un respeto por las costumbres de los demas.
    Excelente aportación.

    ResponderEliminar