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:
- Salvare una copia del proprio template in modo da poterlo ripristinare in caso di errore.
- Scegliere tra le immagini che seguono il tipo di fiocco di neve desiderato e salvarlo sul proprio PC
- Caricare l'immagine del tipo di fiocco di neve scelto su un servizio di file hosting.
- 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> - Trovare nello script la variabile "snowsrc" e impostarla con l'URL dell'immagine caricata sul servizio di file hosting.
- 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]
![BlogNews](http://www.blog-news.it/submit.php?url=http://web-login.blogspot.com/2007/12/effetto-neve-sul-blog.html&title=Effetto neve sul blog&text=<div style="text-align: justify;">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.</div><br /><span id="fullpost"><div style="text-align: justify;"><br />Le modifiche da fare al proprio template per ottenere l'effetto neve sul proprio blog o sito sono le seguenti:</div><br /><ol style="text-align: justify;"><li>Salvare una copia del proprio template in modo da poterlo ripristinare in caso di errore.</li><br /><li>Scegliere tra le immagini che seguono il tipo di fiocco di neve desiderato e salvarlo sul proprio PC<br /><br /><img alt="" border="0" id="BLOGGER_PHOTO_ID_5146913383575649474" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWFO9B_BSlsto-SMLjOw7DouPAqMpW_yYyiaul-R6AERyaL2hUNvNkNdtqxiBdWr9UMbskQ4GLjS7t-fKAdOFzpBfmEEOTrrBY2-ONn5MFzk472Xel1kNu-ijZESPEW1FBdoBlbSKxK-u/s400/snow1.gif" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" /><img alt="" border="0" id="BLOGGER_PHOTO_ID_5146913465180028114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWyPifyzz5qwMRE99tf30kBv2q9_mtPZq3gALU7eFwYjHB5jHJLCa7qWMBR_2ZOU-mBKrr70ftZakI737j4xM1FSAGNTADa_NRUPa2CtNjd4spQKN25-ullmNmhG9R0ZfhAqrwsgKiMKg/s400/snow2.gif" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" /><br /><br /></li><br /><li>Caricare l'immagine del tipo di fiocco di neve scelto su un servizio di file hosting.</li><br /><li>Copiare il seguente codice e inserirlo nel template dopo il tag <body><br /><br /><div style="border: 2px dotted rgb(255, 153, 0); background: rgb(240, 240, 240) none repeat scroll 0% 50%; height: 300px; overflow-y: scroll; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><span style="color: rgb(0, 0, 0);font-size:85%;" ><script type="text/javascript"><br /><br />/******************************************<br />* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)<br />* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code<br />* Last updated Nov 9th, 05' by DD. This notice must stay intact for use<br />******************************************/<br /><br />//Configure below to change URL path to the snow image<br />var snowsrc="snow.gif"<br />// Configure below to change number of snow to render<br />var no = 10;<br />// Configure whether snow should disappear after x seconds (0=never):<br />var hidesnowtime = 0;<br />// Configure how much snow should drop down before fading ("windowheight" or "pageheight")<br />var snowdistance = "pageheight";<br /><br />///////////Stop Config//////////////////////////////////<br /><br />var ie4up = (document.all) ? 1 : 0;<br />var ns6up = (document.getElementById&&!document.all) ? 1 : 0;<br /><br />function iecompattest(){<br />return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body<br />}<br /><br />var dx, xp, yp; // coordinate and position variables<br />var am, stx, sty; // amplitude and step variables<br />var i, doc_width = 800, doc_height = 600;<br /><br />if (ns6up) {<br />doc_width = self.innerWidth;<br />doc_height = self.innerHeight;<br />} else if (ie4up) {<br />doc_width = iecompattest().clientWidth;<br />doc_height = iecompattest().clientHeight;<br />}<br /><br />dx = new Array();<br />xp = new Array();<br />yp = new Array();<br />am = new Array();<br />stx = new Array();<br />sty = new Array();<br />snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc<br />for (i = 0; i < no; ++ i) {<br />dx[i] = 0; // set coordinate variables<br />xp[i] = Math.random()*(doc_width-50); // set position variables<br />yp[i] = Math.random()*doc_height;<br />am[i] = Math.random()*20; // set amplitude variables<br />stx[i] = 0.02 + Math.random()/10; // set step variables<br />sty[i] = 0.7 + Math.random(); // set step variables<br /> if (ie4up||ns6up) {<br />if (i == 0) {<br />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>");<br />} else {<br />document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");<br />}<br />}<br />}<br /><br />function snowIE_NS6() { // IE and NS6 main animation function<br />doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;<br /> doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;<br />for (i = 0; i < no; ++ i) { // iterate for every dot<br />yp[i] += sty[i];<br />if (yp[i] > doc_height-50) {<br />xp[i] = Math.random()*(doc_width-am[i]-30);<br />yp[i] = 0;<br />stx[i] = 0.02 + Math.random()/10;<br />sty[i] = 0.7 + Math.random();<br />}<br />dx[i] += stx[i];<br />document.getElementById("dot"+i).style.top=yp[i]+"px";<br />document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";<br />}<br />snowtimer=setTimeout("snowIE_NS6()", 10);<br />}<br /><br />function hidesnow(){<br /> if (window.snowtimer) clearTimeout(snowtimer)<br /> for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"<br />}<br /><br /><br />if (ie4up||ns6up){<br />snowIE_NS6();<br /> if (hidesnowtime>0)<br /> setTimeout("hidesnow()", hidesnowtime*1000)<br /> }<br /><br /></script></span><br /></div><br /><span style="color: rgb(255, 0, 0); font-weight: bold;">Attenzione:</span> Per i blog su piattaforma Blogger è necessario effettuare un'operazione sul precedente codice: il <a href="http://blogcrowds.com/resources/parse_html.php" target="_new">Parse HTLML</a>. Il risultato del Parse HTLML è il codice che va inserito nel template dopo il tag <body></li><br /><li>Trovare nello script la variabile "snowsrc" e impostarla con l'URL dell'immagine caricata sul servizio di file hosting.</li><br /><li>Salvare le modifiche.</li></ol><div style="text-align: justify;"><br />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.</div><br /><span style="font-size:85%;">[via <a href="http://www.dynamicdrive.com/dynamicindex3/snow.htm" target="_new">DynamicDrive.com</a>]</span></span>)
BlogNews
aNobii
GMail
MyBlogLog
Splinder
Technorati
Tumblr
Twitter
24 commenti:
# - 23/12/07, 12:16
Anonimo 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
Anonimo 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
Anonimo ha detto...
Scusa, il mio blog è www.maggietheflower.splinder.com. :)
# - 23/12/07, 22:39
Tanuccio 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
Anonimo 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
Tanuccio ha detto...
Infatti se è troppa, poi si posa e si blocca la circolazione... :D
# - 24/12/07, 11:04
Anonimo ha detto...
non funziona nemmeno il tuo.. forse sbaglio qualcosa.. :(
# - 24/12/07, 16:13
Anonimo 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
Anonimo ha detto...
peccato!! grazie comunque!! XD
bye bye
ale
# - 12/12/08, 03:06
ALESSIA TRANSEX 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 BERGAMO ha detto...
GRAZIE SEI STATO UN TESORO
CIAO
# - 06/01/09, 15:15
Anonimo 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 ;-)