Per Natale: effetto neve che cade nel blog e che si muove col mouse!

Per me, l’effetto della neve che cade nel blog è decisamente il più azzeccato, e anche il più coccoloso, per addobbarlo in arrivo del Natale. Certo, anche un effetto “Babbo Natale che esce dallo schermo e da i numeri vincenti del superenalotto” non sarebbe male: ci sto lavorando. Quando avrò finito, probabilmente non sentirete più parlare di me.

Ma mi sa che non ci arrivo per la settimana prossima, quindi per adesso accontentiamoci (mi includo anch’io visto che ho deciso di inserirlo nel blog per il 25 dicembre) di questo nuovo effetto, simile a quanto già visto ma con la particolarità che la bufera si muoverà reagendo col mouse. Inoltre, ad ogni caricamento del blog la velocità e l’angolazione di caduta della neve sarà sempre diversa.

Il colore della neve e altri dettagli saranno personalizzabili, quindi potrete adattarlo come volete al vostro blog.

Faccio riferimento a Blogger nelle istruzioni, ma l’effetto può essere inserito in qualsiasi blog che permetta di inserire codice HTML o in una qualsiasi pagina web.

Inseriamo l’effetto nel blog

Da Layout->Elementi pagina, aggiungiamo un nuovo elemento di tipo HTML/Javascript e incolliamo il seguente codice:

<script src="http://sites.google.com/site/creareblog/script-blog/natale/snowstorm.js?attredirects=0&d=1" type="text/javascript"></script>

<script type="text/javascript">
snowStorm.flakesMaxActive = 80; 
snowStorm.animationInterval = 20;
snowStorm.followMouse = true;
snowStorm.snowColor = '#fff';
</script>

Salviamo, prendiamo il cappotto e guardiamo la neve cadere nel blog.

Personalizzare il colore dei fiocchi di neve

Il codice che ho fornito farà cadere neve bianca, non farà quindi un grande effetto nei blog a sfondo chiaro. E’ possibile personalizzare però il colore dei fiocchi di neve intervenendo su questa riga:

snowStorm.snowColor = '#fff';

Il valore che ho evidenziato in rosso è il colore bianco secondo la codifica RGB, e potete personalizzarlo come volete. Per uno sfondo chiaro, consiglio questo:

snowStorm.snowColor = '#639';

Che è un violetto neutro, dovrebbe andar bene nella maggior parte dei casi.

Altre personalizzazioni

1. snowStorm.flakesMaxActive = 80: indica il numero di fiocchi di neve contemporaneamente visibili nello schermo. Io ho messo 80, potete aumentarlo o diminuirlo a vostro piacimento. Se mettete un numero troppo alto, potrebbero esserci rallentamenti nel blog.

2. snowStorm.animationInterval = 20: permette di indicare la velocità dell’animazione. Un numero basso accelera l’animazione, uno alto la rallenta.

3. snowStorm.followMouse = true: se messo a true la neve reagirà al mouse, se messo a false cadrà dritta.

Avvertenze e modalità d’uso

Se nel blog avete già molti script in azione, o animazioni flash e così via, è probabile che comincerà a rallentare tutto. In questo caso, prima ancora di mettere la neve, sarebbe bene alleggerire un po’ il blog, per la felicità di chi vi legge.

Ricordo che altre decorazioni natalizie per il blog sono state segnalate in questo post.

Lo script è stato preso da Schillmania, a cui si può fare riferimento per maggiori informazioni.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!