Javascript efecto de neve

Escrito por Claudio Matarrelli na categoría Solucións de 27 novembro de 2009 | 2 comentarios

Nos primeiros anos, cando empecei a traballar na web non son moitos os trucos técnicos que sorprende os visitantes.
efectos DHTML eran o único elemento a enriquecer as páxinas.

Neste contexto, un clásico utilizado por miles de sitios foi a neve nos meses de inverno.

Foi o script de varias decenas de KB, o efecto certamente agradable, pero moitas veces crash do navegador debido a unha superposición continua de capas, unha para cada folerpa de neve nova xerada.

Aínda navegando na web eu só atopei estes scripts de idade, ou algún reavivamento antiquado sempre moi pesado.

Por que non crear algo leve que non abrandar carga da páxina que non envia saturado os recursos do navegador e como non pode irritar o lector?

E 'o que eu tente facer.

O guión foi probada en versións máis recentes dos navegadores máis populares (IE, Firefox, Chrome, Opera, etc.) Pero eu non garanten a compatibilidade con navegadores máis vellos 3-4 anos, nese caso, non funciona se o problema non é o script pero a falta de actualización é hora de facer ... :-)

Se quere usar o script ou escribilo la ben para aqueles que precisan. A cortesía só para deixar intacta a parte que indica a fonte.

As opcións son ben documentados, simplemente modificar as variables no principio do script.

  • Número de escamas;
  • Velocidade con que se moven;
  • O tamaño máximo dos flocos;
  • Tamaño mínimo dos flocos;
  • Carácter xeral, en flocos, ou, alternativamente, de imaxe;
  • flocos de cor;
  • Opacidade; 
 numerofiocchi = 100 ; var tempo = 300 ; //millisecondi dimensionemassimafiocco = 40 ; //px dimensioneminimafiocco = 8 ; //px caratterefiocco = "*" ; /*consigliati * o punto. / * Script que xera unha caída de neve na páxina web creada por Matarrelli claudio.matarrelli Claudio@gmail.com (C) 2009 www.matarrelli.com usadas libremente, sempre que a licenza de copyright visible * / / / Configuración de variables var = numerofiocchi 100; var tempo = 300 / = 40 milissegundos dimensionemassimafiocco / px dimensioneminimafiocco / = 8 / px caratterefiocco / = "*", / * recomendado ou punto.  "#F00" ; trasparenza = 0.5 ; //inizializzazione altre variabili var indice = 0 ; // funzione che genera un fiocco, cioè un * in un div posizionato assolutamente function fiocco ( idfiocco ) { document . write ( '<div id="neve' + idfiocco + '" style="filter:alpha(opacity=' + trasparenza * 100 + ');-moz-opacity:' + trasparenza + ';-khtml-opacity:' + trasparenza + ';opacity: ' + trasparenza + ';color:' + colorefiocco + ';font-size:' + Math . floor ( Math . random ( ) * ( dimensionemassimafiocco - dimensioneminimafiocco + 1 ) + dimensioneminimafiocco ) + 'px; position:fixed; top:' + Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px; left:' + Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px">' + caratterefiocco + '</div>' ) } //genera un numero di fiocchi pari a numerofiocchi impostato function generaFiocchi ( ) { for ( indice = 0 ; indice < numerofiocchi ; indice ++ ) { fiocco ( indice ) } } //sposta i fiocchi in modo random ogni volta che passa il tempo impostato function spostaFiocchi ( ) { for ( indice = 0 ; indice < numerofiocchi ; indice ++ ) { document . getElementById ( 'neve' + indice ) . style . top = Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px' ; document . getElementById ( 'neve' + indice ) . style . left = Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px' ; } setTimeout ( "spostaFiocchi()" , tempo ) ; } // avvia la generazione dei fiocchi generaFiocchi ( ) ; //esegue lo spostamento continuato spostaFiocchi ( ) ; Ou pode ser encerado cunha etiqueta de imaxe <img * src="http://indirizzo/immagine.jpg"> / colorefiocco = "# F00 transparencia" = 0.5 / / inicializar variables índice var = 0; / / función que xera un grampo, que é unha función * dunha div grapa posicionado absolutamente (idfiocco) (document. write ('<div id = "neve" idfiocco + + "style =" filtro: alpha (opacity =' + * 100 + ");-moz: opacidade" transparencia + + ",-KHTML: opacidade '+ + transparencia, opacidade Transparencia:' + + transparencia", de cor: "+ + colorefiocco; tamaño da fonte: ' + Math. andar (Math. random () * (dimensionemassimafiocco - dimensioneminimafiocco + 1) + dimensioneminimafiocco) "px +; position: fixa; top: '+ Math. andar (Math. random () * pantalla. altura * 0.7) + "px; esquerda: '+ Math. andar (Math. random () * pantalla. ancho - 40)" px + "" + + caratterefiocco>' </ div> ')) / / xera un número de flocos de igual numerofiocchi ) (function (for (index = 0; índice <conxunto generaFiocchi numerofiocchi; index + +) (arco (index))) / / move os flocos aleatoriamente cada vez que pasar o tempo spostaFiocchi definir a función () (para (índice = 0;; numerofiocchi índice +) (document. getElementById ('+' + neve index <index) estilo .. top = Math. andar (Math. random () * pantalla. altura * 0.7) "px + '; documento. getElementById ("neve" index +). estilo. left = Math. andar (Math. random () * pantalla. ancho - 40) "px + ';) setTimeout (" spostaFiocchi () ", tempo);) / / start flocos xerando generaFiocchi () / / executa o desprazamento continuo spostaFiocchi ();

Para instalar, simplemente facer a carga do script no seu servidor e inclúen a parte inferior da páxina antes de que o </ body> 

  src = "http://indirizzo/neve.js" <script language="javascript"> </ script>


2 Respostas a "Javascript efecto de neve"

  1. Flavio di:
    27/11/2009 ás 20:05

    Ten finalmente comezou a planear?

  2. Claudio Matarrelli escribe:
    27/11/2009 ás 20:07

    En realidade, fago hai anos cando eu teño dereito a estímulos .. Como unha tarde na casa con febre :-)

Deixe un comentario