Javascript effetto neve

Scritto da Claudio Matarrelli nella categoria Soluzioni il 27 nov 2009 | 2 commenti

Nei primi anni in cui cominciavo ad occuparmi di web non erano molti gli espedienti tecnici con cui stupire i visitatori.
Gli effetti DHTML erano l’unico elemento per arricchire le pagine.

In tale contesto, un classico usato da migliaia di siti era l’effetto neve nei mesi invernali.

Si trattava di script di diverse decine di KB, con un effetto certamente gradevole, ma che spesso mandavano in crash il browser a causa di un continuo sovrapporsi di livelli, uno per ogni nuovo fiocco di neve generato.

Tutt’ora girando per il web ho trovato solo di questi vecchi script, o qualche riedizione in vecchio stile sempre e comunque molto pesante.

Perché non creare qualcosa di leggero che non rallenti il caricamento della pagina, che non mandi in saturazione le risorse del browser e per quanto possibile non dia fastidio al lettore?

E’ quello che ho appena provato a fare.

Lo script è testato sulle versioni più nuove dei browser più diffusi (Explorer, Firefox, Chrome, Opera, ecc.) però non garantisco retrocompatibilità con browser vecchi di 3-4 anni, in quel caso se qualcosa non funzionasse il problema non è lo script ma il mancato aggiornamento che è ora di fare… :-)

Se volete usate pure lo script o segnalatelo a chi ne avesse bisogno. Unica cortesia: lasciare intatta la parte che indica la fonte.

Le opzioni disponibili sono tutte ben documentate, basta modificare le variabili presenti nella parte superiore dello script.

  • Numero di fiocchi;
  • Velocità con cui si spostano;
  • Dimensione massima dei fiocchi;
  • Dimensione minima dei fiocchi;
  • Carattere che genere i fiocchi, o in alternativa immagine;
  • Colore dei fiocchi;
  • Grado di opacità;
/*    Script che genera una nevicata nella pagina web
    creato da Claudio Matarrelli
    claudio.matarrelli@gmail.com
    (C) 2009 www.matarrelli.com
 
    Utilizzabile liberamente, a patto di lasciare visibile il copyright
*/
 
//variabili di configurazione
var numerofiocchi = 100;
var tempo = 300; //millisecondi
dimensionemassimafiocco = 40; //px
dimensioneminimafiocco = 8; //px
caratterefiocco = "*"; /*consigliati * o punto. In alternativa può essere incerita
                              un'immagine con  un tag <img src="http://indirizzo/immagine.jpg">*/
colorefiocco = "#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();

Per installarlo è sufficiente caricare lo script sul vostro server e includere, in fondo alla pagina, prima del tag </body>

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


2 Responses to “Javascript effetto neve”

  1. Flavio scrive:
    27/11/2009 alle 20:05

    Hai iniziato a programmare finalmente?

  2. Claudio Matarrelli scrive:
    27/11/2009 alle 20:07

    In verità lo faccio da anni quando ho gli giusti stimoli.. Come un pomeriggio a casa con la febbre :-)

Lascia un commento