2012-12-13T20:02:00+01:00

Efecto nieve en javaScript

Quizás no sea el sitio más adecuado donde ponerlo, un lugar plagado de zombies, vampiros y superguerreros no da lugar a ternuras al estilo "Moe", pero visto que ya estamos inmersos en plenas navidades del 2012, nada mejor que un efecto nieve en javascript para las páginas del blog.
Del baúl de los recuerdos recuperé el código en javascript de unas funciones para simular que esta nevando en una página html y que en su día funcionaba a la perfección con Internet Explorer 5 (sí sí, habéis leído bien jóvenes criaturas, yo ya hacia cosas cuando los dinosaurios llevaban pañales y Microsoft lanzaba su novedad mundial: el maravilloso navegador Internet Explorer versión 5).
No recuerdo de donde saqué este efecto nieve, posiblemente descargado de algún lugar, pero el caso es que con pequeños retoques sigue funcionando para los navegadores actuales y es posible ponerlo en blogger tan solo editando la plantilla o añadiendo uno de los widgets de HTML/Javascript.
Si a alguien le apetece dejo el código, un copiar/pegar bastará, aunque por si acaso, pongo un enlace a descargas en el final del post.

Saludos y a disfrutar de las fiestas y de la nevada que está cayendo por NekoFan...
<script type="text/javascript">
// <![CDATA[
// FUNCIONS DE NADAL. TREURE AL PASSAR LES FESTES.
        
// Inicio Codigo efecto nieve.
// Numero de copos, recomendados entre 30 y 40
var nieve_cantidad=35;
// Colores de los copos se mostraran de forma aleatoria
var nieve_colorr=new Array('#aaaacc','#ddddFF','#ccccDD');
// Tipo de letra de los copos
var nieve_tipo=new Array('Arial Black','Arial Narrow','Times','Comic Sans MS');
// Valor o letra de los copos
var nieve_letra='*';
// velocidad de caida
var nieve_velocidad=0.6;
// tamaño mas grande de los copos
var nieve_cantidadsize=35;
// tamaño mas pequeño de los copos
var nieve_chico=8;
// 1 toda la pagina - 2 zona izquierda - 3 centro de pagina - 4 zona derecha
var nieve_zona=1;

var nieve=new Array();
var marginbottom;
var marginright;
var timer;
var i_nieve=0;
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent;
var ie5=document.all && document.getElementById && !browserinfos.match(/Opera/);
var ns6=document.getElementById && !document.all;
var opera=browserinfos.match(/Opera/);
var browserok=ie5 || ns6 || opera;
function aleatorio(range) 
{ 
   rand=Math.floor(range*Math.random());
   return rand;
}
function initnieve()
{
   if (ie5 || opera)
     {
       marginbottom = document.body.clientHeight;
       marginright = document.body.clientWidth-40;
     } else if (ns6)
        {
          marginbottom = window.innerHeight;
          marginright = window.innerWidth-40;
        }
   var nievesizerange=nieve_cantidadsize-nieve_chico;
   for (i=0;i<=nieve_cantidad;i++)
   {
     crds[i] = 0; 
     lftrght[i] = Math.random()*15; 
     x_mv[i] = 0.03 + Math.random()/10;
     nieve[i]=document.getElementById('s'+i);
     nieve[i].style.fontFamily=nieve_tipo[aleatorio(nieve_tipo.length)];
     nieve[i].size=aleatorio(nievesizerange)+nieve_chico;
     nieve[i].style.fontSize=nieve[i].size;
     nieve[i].style.color=nieve_colorr[aleatorio(nieve_colorr.length)];
     nieve[i].sink=nieve_velocidad*nieve[i].size/5;
     switch (nieve_zona)
     {
      case 1: nieve[i].posx=aleatorio(marginright-nieve[i].size); break;
      case 2: nieve[i].posx=aleatorio(marginright/2-nieve[i].size); break;
      case 3: nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4; break;
      case 4: nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2; break;
     }
     nieve[i].posy=aleatorio(2*marginbottom-marginbottom-2*nieve[i].size);
     nieve[i].style.left=nieve[i].posx+'px';;
     nieve[i].style.top=nieve[i].posy+'px';;
   }
   movenieve();
}
function movenieve() 
{
   for (i=0;i<=nieve_cantidad;i++) 
   {
     crds[i] += x_mv[i];
     nieve[i].posy+=nieve[i].sink
     nieve[i].style.left=(nieve[i].posx+lftrght[i]*Math.sin(crds[i]))+'px';
     nieve[i].style.top=nieve[i].posy+'px';;
     if (nieve[i].posy>=marginbottom-2*nieve[i].size || parseInt(nieve[i].style.left)>(marginright-3*lftrght[i]))
        {
          switch(nieve_zona)
          {
             case 1: nieve[i].posx=aleatorio(marginright-nieve[i].size); break;
             case 2: nieve[i].posx=aleatorio(marginright/2-nieve[i].size); break;
             case 3: nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4; break;
             case 4: nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2; break;
          }
          nieve[i].posy=0;
                    }
        }
        var timer=setTimeout('movenieve()',50);
}
for (i=0;i<=nieve_cantidad;i++)
  document.write('<span id="s'+i+'" style="z-index:9999;position:absolute;top:-'+nieve_cantidadsize+'">'+nieve_letra+'</span>');
// Si no se usa DOJO, sustituir por window.onload=initnieve;
// Inicialitzar la neu quan pagina carregada
require(['dojo/ready', 'dojo/dom'], function(ready, dom){
    ready(function(){initnieve();});
});
// ]]>
</script>

No hay comentarios:

Publicar un comentario

Sobre NekoFan

Dos cuartas partes de "Anime",una de Japón y otra de videojuegos,mezclado con programación y Dojo hacen la receta (im)perfecta de este blog.




Enlaces

Visitas