Aiuto per effetto neve
Autore: Marco P.
Visite 4423,
Followers 1,
Condiviso 0
Salve a tutti, ho seguito altre discussioni sull'argomento ma proprio non riesco ad inserire la neve nel sito. Andrebbe benissimo uno degli effetti evidenziati da KolAsim in particolar modo il n°9 visibile sul sito http://www.zspace.it/kolasim/wsx5_v8/neveJS1/neve_9.html
Chi mi può aiutare passo passo? Grazie mille
Marco
Postato il
ciao, ...è semplicissimo, ...copia il codice che segue così com'è ed incollalo nel pannello Esperto sezione HEAD delle Proprietà della pagina in cui vuoi vedere la neve, o, se la vuoi vedere in tutto il sito, allora la incolli al passo_1 panello Esperto sezione HEAD:
var flakes=100; // number of flakes
var colour="#FFFFFF"; // colour of flakes
var slush=20; // set to '0' for no slush or otherwise set to height at which slush melts
/***************************\
* Let It Snow Effect *
*(c) 2004-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh;
window.onload=function() { if (document.getElementById) {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
for (var i=0; i<flakes; i++) {
flks[i]=createDiv(3,3);
flkx[i]=3*Math.floor(Math.random()*swide/3);
flky[i]=Math.floor(Math.random()*shigh);
fldy[i]=2+Math.floor(Math.random()*4);
flks[i].style.left=flkx[i]+"px";
flks[i].style.top=flky[i]+"px";
b.appendChild(flks[i]);
}
setInterval("let_it_snow()", speed);
}}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
swide-=3;
if (slush) {
if (swide/3>slss.length) for (var i=slss.length; i<swide/3; i++) {
slss[i]=createDiv(3, 3);
slss[i].style.left=3*i+"px";
document.getElementById("bod").appendChild(slss[i]);
slsh[i]=3;
}
for (var i=0; i<swide/3; i++) slss[i].style.top=shigh-slsh[i]+"px";
}
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
function let_it_snow(c) {
var i, x, o=0;
for (i=0; i<flakes; i++) {
flky[i]+=fldy[i];
x=flkx[i]/3;
if (slush) o+=slsh[x];
if (flky[i]>=shigh-(slush?slsh[x]:0)) {
if (slush) {
if (x<swide && slsh[x]>slsh[x+1]+3) x++;
else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
slss[x].style.top=shigh-(slsh[x]+=3)+"px";
slss[x].style.height=slsh[x]+"px";
}
flky[i]=0;
fldy[i]=2+Math.floor(Math.random()*4);
flkx[i]=3*Math.floor(Math.random()*swide/3);
flks[i].style.left=flkx[i]+"px";
}
flks[i].style.top=flky[i]+"px";
}
if (o>flakes*slush) {
for (i=0; i<swide/3; i++) if (slsh[i]>1) slsh[i]--;
set_width();
}
}
</script>
.
bye, KolAsim
Autore
Perfetto molto bene e ti ringrazio. Altre 2 domande.
Se volessi farli andare + veloci dove devo intervenire?
Se volessi cabiare genere di neve con un altro tipo sempre come gli esempi del sito sopracitato come devo fare?
Grazie ancora
1) ... per personalizzare devi agire sulle variabili dichiarate all'inizio dello script...
2) ... per cambiare il fiocco di veve con uno tuo, per esempio quello della pagina 2, basta che indichi la tua immagine per realizzarlo, dichiarandolo nel codice alla voce var snowsrc
... oppure guarda dentro a quest'altro esempio: http://www.zspace.it/kolasim/wsx5_v8/neveok_K/
...
bye
Autore
Ma la voce var snowsrc non c'è nel codice...mi puoi fare un esempi ?
Molte grazie
L'argomento torna di attualità ad ogni stagione invernale.
Qui la discussione dell'anno scorso
http://answers.websitex5.com/post/21341
All'nterno dei file js, vi sono le istruzioni per personalizzare lo script, in particolare la variabile snowsrc ricordata da KolAsim per l'immagine del fiocco di neve.
... esempi...?... ... altri...? ...potrei farti vedere quelli fatti con SwishMax, i migliori...
http://www.zspace.it/kolasim/wsx5_v8/neveswish/index.html
http://www.zspace.it/kolasim/miei_files/neveKolAsim/neveKolAsimEvol50.html
http://www.zspace.it/kolasim/miei_files/neveKolAsim/neve_script1_K_1.html
http://www.zspace.it/kolasim/miei_files/neveKolAsim/scriptneveK1.html
http://www.zspace.it/kolasim/miei_files/neveKolAsim/neveKolAsimEvol10vento1.html
ecc., ecc., ... ... ... .. .. .. . . . ....
... comunque, var snowsrc c'è sia nello SCRIPT dell'esempio del precedente post che in quello di NEVE_2
.
bye, KolAsim
__________________________
...urca, sono rimasto bloccato con questo PC e collegamento, e vedo che siete andati avanti...
Solo a titolo di curiosità (visto che l'autore ha abbandonato la discussione): neanche io sono riuscito a trovare "var snowsrc" nello script inserito nella tua prima risposta.
ciao, ...nell'esempio NEVE_2 c'è indicata la posizione del J.S. ed un LINK
[>> SCARICA J.S.]
...cliccando sul quale si troverà come prima variabile dichiarata "var snowsrc" che preleva il fiocco GIF nel sito dell'autore...
... basta sostituire l'URL con uno relativo alla propria immagine, per esempio files/MioFiocco.gif
.
bye, KolAsim
Come al solito mi sono spiegato male.
Questo mi era chiaro, al punto da averlo anche scritto
Sono più di due anni che utilizzo il tuo script, con la variabile snowsrc modificata.
Basta visitare in questo periodo il mio sito di test
http://www.essedi.altervista.org/_sito/
Forse ho scaricato l'originale, ma comunque ci sono arrivato tramite il tuo sito.
Quello che non avevo capito è questo dialogo
... comunque, var snowsrc c'è sia nello SCRIPT dell'esempio del precedente post ....
Ribadisco che conosco gli script e la possibilità di adattarli e che la mia era pura curiosità, nel caso che il riferimento ci fosse e che fosse sfuggito sia a Marco sia a me.
Ciao
EsseDi