domenica 23 dicembre 2007

Effetto neve sul blog

Con l'arrivo del Natale le case, i negozi e le strade vengono addobbate con le decorazioni e questo avviene anche su Internet per i blog e i siti web. Lo script che vi sto per presentare è un classico del periodo natalizio: è l'effetto neve. Attraverso questo script potrete vedere scendere la neve dalle pagine del vostro blog o sito.


Le modifiche da fare al proprio template per ottenere l'effetto neve sul proprio blog o sito sono le seguenti:

  1. Salvare una copia del proprio template in modo da poterlo ripristinare in caso di errore.

  2. Scegliere tra le immagini che seguono il tipo di fiocco di neve desiderato e salvarlo sul proprio PC




  3. Caricare l'immagine del tipo di fiocco di neve scelto su un servizio di file hosting.

  4. Copiare il seguente codice e inserirlo nel template dopo il tag <body>

    <script type="text/javascript">

    /******************************************
    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
    * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
    * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
    ******************************************/

    //Configure below to change URL path to the snow image
    var snowsrc="snow.gif"
    // Configure below to change number of snow to render
    var no = 10;
    // Configure whether snow should disappear after x seconds (0=never):
    var hidesnowtime = 0;
    // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
    var snowdistance = "pageheight";

    ///////////Stop Config//////////////////////////////////

    var ie4up = (document.all) ? 1 : 0;
    var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    var dx, xp, yp; // coordinate and position variables
    var am, stx, sty; // amplitude and step variables
    var i, doc_width = 800, doc_height = 600;

    if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
    }

    dx = new Array();
    xp = new Array();
    yp = new Array();
    am = new Array();
    stx = new Array();
    sty = new Array();
    snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
    for (i = 0; i < no; ++ i) {
    dx[i] = 0; // set coordinate variables
    xp[i] = Math.random()*(doc_width-50); // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20; // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random(); // set step variables
    if (ie4up||ns6up) {
    if (i == 0) {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
    } else {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
    }
    }
    }

    function snowIE_NS6() { // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
    doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) { // iterate for every dot
    yp[i] += sty[i];
    if (yp[i] > doc_height-50) {
    xp[i] = Math.random()*(doc_width-am[i]-30);
    yp[i] = 0;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    }
    dx[i] += stx[i];
    document.getElementById("dot"+i).style.top=yp[i]+"px";
    document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
    }

    function hidesnow(){
    if (window.snowtimer) clearTimeout(snowtimer)
    for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }


    if (ie4up||ns6up){
    snowIE_NS6();
    if (hidesnowtime>0)
    setTimeout("hidesnow()", hidesnowtime*1000)
    }

    </script>


    Attenzione: Per i blog su piattaforma Blogger è necessario effettuare un'operazione sul precedente codice: il Parse HTLML. Il risultato del Parse HTLML è il codice che va inserito nel template dopo il tag <body>

  5. Trovare nello script la variabile "snowsrc" e impostarla con l'URL dell'immagine caricata sul servizio di file hosting.

  6. Salvare le modifiche.

Lo script permette di personalizzare ulteriormente l'effetto della neve, ad esempio è possibile indicare il numero di fiocchi di neve da visualizzare (variabile "no"). Infine, creando delle piccole immagini è possibile far scendere con lo stesso effetto: foglie, stelline, palloncini e qualsiasi altra cosa desideriate.

[via DynamicDrive.com]

24 commenti:

# - 23/12/07, 12:16

Comicomix ha detto...

Non lo metterò, per evitare di fare qualche confusione...
Però, come ho già detto, è davvero carino.
UN sorriso dal gelo
Mister X di Comicomix

# - 23/12/07, 21:23

maggietheflower ha detto...

Ciao Giuseppe, complimenti per il blog, spieghi chiaramente e ti occupi di diverse cose. Io ho provato molte volte ad inserire lo script della neve sul mio blog, ma senza risultato. E' come se il codice non riuscisse a "prendere" l'immagine del fiocco dall'url che gli indico. Sono riuscita a mettere lo script dell'effetto neve senza immagine, quello che usa l'asterisco, e funzionava. Solo che ho cambiato recentemente il template e adesso non funziona più nemmeno quello.. Tu ci capisci qualcosa? Se puoi aiutarmi te ne sarei davvero grata. Altrimenti grazie lo stesso, mi arrangerò da sola. Buona serata, ciao.

# - 23/12/07, 21:28

maggietheflower ha detto...

Scusa, il mio blog è www.maggietheflower.splinder.com. :)

# - 23/12/07, 22:39

Lupo Sordo ha detto...

mmmm... Posso fare una critica?
Trovo odiosa la neve sul blog...

# - 24/12/07, 01:22

Giuseppe ha detto...

@Comicomix, ok, cmq se hai bisogno di aiuto non esitare a contattarmi. Avrei voluto scriverlo prima questo post, ma non ho avuto tempo :-(

@Maggietheflower, grazie :-)
Ho visto lo script che hai inserito, è leggermente diverso da quello che ho segnalato io. Prova lo script che ho inserito in questo post, vedrai che funziona. Fammi sapere.

@Lupo Sordo, avrei voluto stupirvi con effetti speciali, ma non ho avuto tempo e ho riproposto anche quest'anno la neve ;-P
Cmq secondo me è davvero odiosa se è troppa.

# - 24/12/07, 03:17

Lou Mogghe ha detto...

Grazie per la dritta...
era da qualche giorno che lo avevo visto e che mi era venuto lo schiribizzo di metterlo...;-)
Auguri!

# - 24/12/07, 10:30

Lupo Sordo ha detto...

Infatti se è troppa, poi si posa e si blocca la circolazione... :D

# - 24/12/07, 11:04

maggietheflower ha detto...

non funziona nemmeno il tuo.. forse sbaglio qualcosa.. :(

# - 24/12/07, 16:13

Unblogindue ha detto...

Ciao, purtroppo non riesco in nessun modo a farlo funzionare mannaggia....

# - 26/12/07, 18:19

Giuseppe ha detto...

@Lou Mogghe, mi fa piacere :-) Grazie, ricambio gli auguri.

@Lupo Sordo, :-D

@Maggietheflower, ho fatto la prova anche con Splinder e hai ragione. Purtroppo non ho avuto tempo per capire come mai il codice originale non funziona anche su Splinder, mi dispiace :-(
PS: Spero cmq di aggiornare il post con la soluzione al problema.

@Unblogindue, purtroppo non c'è stato il tempo per risolvere i "problemi di compatibilità".

# - 31/12/07, 15:25

artistale ha detto...

ciao!! è davvero carina la neve sul blog e sto provando a metterla sul mio come da tue indicazioni!! ma non mi è chiaro anocra qualcosa!!^^
il mio blog è su blogger.com, e seguendo le istruzioni mi dice sempre che il tamplate è errato!! mi puoi aiutare?non riesco a capire, soprattutto, se devo inserire tutti e 2 i codici (ovvero quello che hai messo nella spiegazione e il parse html) oppure no!!
grazieeee XD XD XD
ciao ciao a tutti

# - 31/12/07, 16:24

Giuseppe ha detto...

@Artistale, per Blogger bisogna inserire nel proprio template solo il risultato del Parse HTLML. Quindi devi andare sul sito che ho indicato e inserire il codice riportato nel mio post, ed è solo il risultato il codice che dovrai inserire nel tuo template. Fammi sapere ;-)

# - 01/01/08, 20:17

artistale ha detto...

huu graziee!! ^^ ok,dopo aver fatto questo devo solo inserire l'url del fiocco di neve? e in che modo devo inserirlo? a me risulta questo: " Configure below to change URL path to the snow image
var snowsrc="snow.gif" " , al posto di cosa devo inserire l'url del fiocco di neve? devo inserirlo tra delle virgolette " o dei tag <> o qualcos'altro del genere?
grazie miiilleee per la pazienzaa!! ^^
ciao ciao XD

# - 02/01/08, 09:19

Giuseppe ha detto...

@Artistale, sì, devi solo inserire l'URL del fiocco di neve. Carica l'immagine del fiocco di neve su un servizio di file hosting (Flickr, ImageShack, Splinder, ecc. ecc.) e copia il suo URL. Dopo l'URL dell'immagine lo devi assegnare a "snowsrc" ottenendo:

var snowsrc="http://.../snow.gif";

Fammi sapere ;-)

# - 02/01/08, 12:42

artistale ha detto...

graziee mille!! ce l'ho fatta, non mi sembra vero!! hehe XD
davvero davvero graziee!!
ciaoooo XD XD XD

# - 03/01/08, 09:18

Giuseppe ha detto...

@Artistale, :-)

Ciao e buona giornata

# - 03/01/08, 12:13

artistale ha detto...

ciao!! grazie, anche a te!!
lo so che ti ho fatto un sacco di domande e non ti lascio in pace una attimo ^^, ma volevo chiederti se sapevi come si inseriscono immagini diverse al posto della neve!ovvero fare in modo che più immagini scendano a mo' di neve! si può fare?
graziee ciao ciao
ale XD

# - 04/01/08, 12:41

Giuseppe ha detto...

@Artistale, con questo script puoi cambiare l'immagine ma non è possibile utilizzare più immagini contemporaneamente.

# - 04/01/08, 13:22

Alessandra ha detto...

peccato!! grazie comunque!! XD
bye bye
ale

# - 12/12/08, 03:06

ALESSIA TRANSEX ESCORT A BERGAMO ha detto...

ho inserito il codice sul mio blogspot la neve c'è ma ci sono solo 10 fiocchi. come faccio per aumentarli
grazie

# - 13/12/08, 09:32

Giuseppe ha detto...

@Alessia, devi modificare la variabile "no" (è sotto alla variabile "snowsrc").

# - 13/12/08, 13:05

ALESSIA TRANSEX ESCORT A BERGAMO ha detto...

GRAZIE SEI STATO UN TESORO
CIAO

# - 06/01/09, 15:15

Fioredicollina ha detto...

onde non fare tentativi a vuoto e leggendo i commenti mi è parso di capire che su splinder non funziona, mi confermi? grazie!!! Fioredicollina

# - 08/01/09, 06:16

Giuseppe ha detto...

@Fiore, ho fatto una prova, funziona se carichi lo script su un servizio di web hosting. Se la neve sul tuo blog ti interessa ancora, allora contattami tramite email ;-)


Ti è piaciuto questo post? Allora cosa aspetti, iscriviti al feed RSS
Scopri cosa sono i feed RSS e migliora il tuo modo di navigare.

Posta un commento