Fiocchi di neve all'interno della pagina

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: snow.gif
Visualizza la demo
Scarica la demo

Questo è un numero speciale della mailing list "Una demo Dhtml a settimana" e sfruttiamo questo canale per augurare un buon Natale a tutti gli iscritti ai servizi di Risorse.net. Purtroppo quest'anno non abbiamo realizzato una versione natalizia ad hoc del sito e non siamo riusciti neanche ad offrire archivi di files e servizi a tema. Stiamo infatti lavorando alacremente per la nuova versione di Risorse.net, che oltre ad avere una grafica completamente rivista, vedrà rinnovati e moltiplicati anche i servizi rivolti all'utente. Anche il codice per la gestione del Web site verrà completamente rivisto. Questo per essere più vicino alle esigenze dei nostri visitatori. Tornando comunque alla mailing list, la speciale demo di oggi inserisce l'effetto neve in una pagina Web. Ringraziamo Fabiano Andreotta, Aka (As know as, conosciuto anche come) Atipower di www.jsdir.com per la realizzazione di questo script. Analizzando la sintassi dell'esempio, diamo un'occhiata all'<HEAD>, il quale contiene il Javascript per il movimento dei fiocchi di neve con i relativi tempi:

<script language="javascript">
// --andreotta@atipower.it--
// --http://www.jsdir.com-
// ---------------------------
Image1=new Image();
Image1.src="snow.gif"
var ll=0;
var aa=0;
var hhb=-100;
var variab=-200;
var hh=-100;
var varia=-200;
var hhc=0;
var variac=-200;

// -------------------------
function quando(){
setTimeout('scende("snow1")',100)
setTimeout('scendec("snow3")',9000)
setTimeout('scendeb("snow2")',19000)
}
// ---------------------------------
function scende(id){
if(navigator.appName=="Netscape"){
ll=window.innerWidth;
aa=window.innerHeight;
}
else if(navigator.appName=="Microsoft Internet Explorer") {
ll=document.body.clientWidth;
aa=document.body.clientHeight;
}
// ---------------------------------------------
if(varia if(document.all){
document.all[id].style.visibility="visible"
document.all[id].style.pixelTop=varia;
document.all[id].style.pixelLeft=hh
}
else if(document.layers){
document.layers[id].visibility="visible"
document.layers[id].top=varia;
document.layers[id].left=hh;
}
else if(document.getElementById){
document.getElementById(id).style.visibility="visible"
document.getElementById(id).style.top=varia;
document.getElementById(id).style.left=hh;
}

// ------------------------------------------

hh=hh+Math.round(Math.random()*0.8)
varia++
(varia==(aa-50))?(varia=-200):varia;
(varia==-200)?(hh=0):hh;
}
setTimeout('scende("snow1")',20);
}
// ----------------------------------
function scendeb(){
if(variab<aa){
if(document.all){
document.all["snow2"].style.visibility="visible"
document.all["snow2"].style.pixelTop=variab;
document.all["snow2"].style.pixelLeft=hhb
}
else if(document.layers){
document.layers["snow2"].visibility="visible"
document.layers["snow2"].top=variab;
document.layers["snow2"].left=hhb;
}
else if(document.getElementById){
document.getElementById("snow2").style.visibility="visible"
document.getElementById("snow2").style.top=variab;
document.getElementById("snow2").style.left=hhb;
}
// ------------------------------------------

hhb=hhb+Math.round(Math.random()*0.8)
variab++
(variab==(aa-50))?(variab=-200):variab;
(variab==-200)?(hhb=0):hhb;
}
setTimeout('scendeb("snow2")',20);
}
// ------------------------------------
function scendec(){
hhc=ll/4
if(variac if(document.all){
document.all["snow3"].style.visibility="visible"
document.all["snow3"].style.pixelTop=variac;
document.all["snow3"].style.pixelLeft=hhc
}
else if(document.layers){
document.layers["snow3"].visibility="visible"
document.layers["snow3"].top=variac;
document.layers["snow3"].left=hhc;
}
else if(document.getElementById){
document.getElementById("snow3").style.visibility="visible"
document.getElementById("snow3").style.top=variac;
document.getElementById("snow3").style.left=hhc;
}
// ------------------------------------------

hhc=hhc-Math.round(Math.random()*1)
variac++
(variac==(aa-50))?(variac=-200):variac;
(variac==-200)?(hhc=ll/4):hhc;
}
setTimeout('scendec("snow3")',20);
}
</script>


In questa porzione di codice, ti consigliamo di non modificare nulla, al massimo i tempi per l'inizio dell'animazione: function quando(){
setTimeout('scende("snow1")',100)
setTimeout('scendec("snow3")',9000)
setTimeout('scendeb("snow2")',19000)


Nel <BODY> invece, è presenta la sintassi per l'inserimento di ogni singolo fiocco di neve:

<body onLoad="quando()">
<div id="snow1" style="position: absolute; top: 20; left: 10; height: 187;
width: 652; visibility: hidden"><img border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; <img border="0" src="snow.gif">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; <img border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&
nbsp;&nbsp;&nbsp;<img border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="snow.gif">&nbsp;&nbsp;&nbsp; <img border="0"
src="snow.gif"> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img
border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;

<img border="0" src="snow.gif"></div> <div id="auguri" style="position: absolute; top: 200; left: 214; width: 471; height: 28; z-index:-4;"><b><font size="5" face="Book Antiqua" color="#0000FF"><CENTER>AUGURI DI BUON NATALE !</font></b><BR>da <A HREF=http://www.risorse.net TARGET=_BLANK>Risorse.net</A></CENTER></div>
<p>&nbsp;</p>
</body>


Anche in questa porzione di codice ti consigliamo di non modificare il sorgente.

N.B.: Vuoi provare ad apparire in testa ai motori di ricerca? Risorse.net ti offre gratuitamente una guida sui principali search engine e validi consigli per apparire in buona posizione. Clicca www.risorse.net/motori

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/dicembre/62.asp?print=ok