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.

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>

5 pensieri su “Javascript effetto neve

  1. Neda Maria

    After reading your blog post I browsed your website a bit and noticed you aren’t ranking nearly as well in Google as you could be. I possess a handful of blogs myself and I think you should use speed rank seo, just search it on google. You’ll find it’s a very nice service that can bring you a lot more visitors. Keep up the quality posts!

  2. Latina Ryan

    After reading your post, you have a great website with interesting content. But I think you can improve your current google ranks by using SEO website traffic net. My friend uses it and it works great. Just google it, it’s very nice tool to bring you a lot of new readers on a daily basis. Keep up the quality work!

  3. Raye Ashlea

    After reading your post, you have a great website with interesting content. But I think you can improve your current google ranks by using SEO website traffic net. My friend uses it and it works great. Just google it, it’s very nice tool to bring you a lot of new readers on a daily basis. Keep up the quality work!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *