Efecto Nieve con JavaScript

Publicar una respuesta

Página 1 de 1 [ 6 mensajes ]

Imprimir vista

Tema previo | Siguiente tema

Autor Mensaje

administrator

Asunto: Efecto Nieve con JavaScript

Publicado: Vie Dic 17, 2010 9:35 am

Zungo Rey

Registrado: Lun Jun 08, 2009 4:34 pm
Mensajes: 46

Hola a todos, este post es sencillamente un adorno navideño que quiero compartir con todo mundo que tenga una pagina sea blog, foro, CMS, etc.
es muy simple y hay dos formas de hacerlo con el simbolo * o con una imagen aunque os recomiendo que uses simbolo font hace menos lento el portal. sin mas novedad aqui les dejo el codigo.

Código: Seleccionar todo

<script type="text/javascript">

  var snowsrc="snow3.gif"
  var nieve_colorr=new Array("#aaaacc","#ddddFF","#ccccDD")
  var nieve_tipo=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
  var nieve_letra="*"
  
  var no = 100;
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

  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 (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().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()*10;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
        if (ie4up||ns6up) {
    //Este es el ejemplo con font osease con simbolo *
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><font size="+Math.floor(Math.random()*7)+" color=\""+ nieve_colorr[Math.floor(Math.random()*3)] +"\" face=\""+nieve_tipo[Math.floor(Math.random()*3)]+"\">"+nieve_letra+"<\/font><\/div>");
//Este es el ejemplo con imagen osea con una imagen de nieve snowsrc es la ruta de la imagen.
//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 snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    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();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
        

if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }

</script>

jachinchilla

Asunto: Re: Efecto Nieve con JavaScript

Publicado: Mié Feb 09, 2011 11:32 pm

Registrado: Dom Dic 20, 2009 12:25 am
Mensajes: 3

Trate de usar la imagen y no la pude hacer trabajar, la instruccion esta clara pero por algun motivo no trabaja. Agradeceria si lo pueder revisar el script o me explicas con mas detalle.
Gracias

administrator

Asunto: Re: Efecto Nieve con JavaScript

Publicado: Jue Feb 10, 2011 9:08 am

Zungo Rey

Registrado: Lun Jun 08, 2009 4:34 pm
Mensajes: 46

Hola,

Bienvenido a Telezunga espero que sirva mi explicacion.

Código: Seleccionar todo

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><font size="+Math.floor(Math.random()*7)+" color=\""+ nieve_colorr[Math.floor(Math.random()*3)] +"\" face=\""+nieve_tipo[Math.floor(Math.random()*3)]+"\">"+nieve_letra+"<\/font><\/div>");

Código: Seleccionar todo

//Este es el ejemplo con imagen osea con una imagen de nieve snowsrc es la ruta de la imagen.
//document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>"); 

Primero que todo mi queridisimo jachinchilla debes colocar este codigo javascript dentro de un documento html.
Segundo debes borrar o comentar las lienas de document.write que no vas a usar. o si es con imagen snow descomentar el segundo bloque de codigo quitando el doble // que antecede el codigo document.write.

Si es con el simbolo * dejas el codigo como esta.

Si es con el snow(imagen) debes tener el archivo de nieve que puedes tenerlo dando click derecho guardar imagen cualquiera de los tres pero recuerda cambiarle el nombre a "snow3.gif":

Adjunto:

snow1.gif [ 256 Bytes | Visto 645 veces ]

Adjunto:

snow2.gif [ 286 Bytes | Visto 645 veces ]

Adjunto:

snow3.gif [ 425 Bytes | Visto 645 veces ]

Recuerda copiar la imagen de la nieve en el mismo directorio que tienes el archivo html que contiene este codigo js.
Listo debe funcionar si no te funciona no dudes en preguntar a mi en lo que respecta me funciono perfectamente en Navidad.

jachinchilla

Asunto: Re: Efecto Nieve con JavaScript

Publicado: Jue Feb 10, 2011 11:43 pm

Registrado: Dom Dic 20, 2009 12:25 am
Mensajes: 3

Todos los pasos que tu me dices ya los habia hecho, es mas; en Diciembre use el script y no tuve ningun problema usando solamente el font "*", pues fue muy facil copiar el script pero nunca use la imagen. Las // solo se usan para anular una instruccion o para comentar. Quite las // del document.write para la imagen, pero ahora mi pregunta es: necesito poner // al comienzo de document.write para el font que usa "*"?, de todas maneras no me trabaja. La imagen esta en mi pagina html. Si pongo // al comienzo de document.write para la imagen de inmediato empieza a trabajar la nieve usando el font "*". Bueno la idea es cambiar la imagen de "nieve" por la de un "corazon" para este 14 de febrero.

Seguire probando el script haber si encuentro lo que estoy haciendo equivocado.

Gracias

administrator

Asunto: Re: Efecto Nieve con JavaScript

Publicado: Vie Feb 11, 2011 8:55 am

Zungo Rey

Registrado: Lun Jun 08, 2009 4:34 pm
Mensajes: 46

Mira hay un error con las "" en las lineas de nieve con imagen y resulta ser asi con correccion:

Código: Seleccionar todo

document.write('<div id="dot'+ i +'" style="POSITION: absolute; Z-INDEX: '+ i +'; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src="'+snowsrc+'" border="0"></div>');

Remplazalas por las lineas de nieve imagen en el codigo y recuerda comentar las lineas de font "*".
por que no funciona con las dos al tiempo.

jachinchilla

Asunto: Re: Efecto Nieve con JavaScript

Publicado: Sab Feb 12, 2011 12:12 am

Registrado: Dom Dic 20, 2009 12:25 am
Mensajes: 3

Todo trabaja muy bien. Gracias por tu ayuda.

Publicar una respuesta

Página 1 de 1 [ 6 mensajes ]

Efecto Nieve con JavaScript

¿Quién está conectado?