Javascript effetto neve

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.

• Pagina di esempio;
• Download

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 */
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('
'+caratterefiocco+'
')
}

//genera un numero di fiocchi pari a numerofiocchi impostato
function generaFiocchi(){
    for(indice=0;indice
Per installarlo è sufficiente caricare lo script sul vostro server e includere, in fondo alla pagina, prima del tag </body>