• Programmazione » HTML » Dhtml - Tutorial e lezioni per imparare il Dynamic HTML

Con questo script DHTML è possibile creare un effetto"cielo stellato" in una pagina web, ovvero verrannovisualizzate delle stelle che si avvicinano.

Lo script, compatibile con tutti i browser, è moltosemplice da utilizzare. Per prima cosa dobbiamo farel'upload, nella cartella dove è presente la paginacon lo script, di tutte le immagini contenute in questo archivio zip.

Adesso sarà sufficiente inserire questo codiceall'interno del tag body nella pagina incui vogliamo che venga visualizzato l'effetto:

<script language="JavaScript1.2">//3D Starfield - by Mikhail Ansolis, based on Flying planes - by John Ely//Modified from: Autumn leaves script- by Kurt Grigg (kurt.grigg@virgin.net)//Visit http://www.dynamicdrive.com for this script//Pre-load your image below!//CHANGE 5 to the number of images listed belowgrphcs=new Array(5) //PRELOAD the involved images (extend or contract variables according to # of images used)Image0=new Image();Image0.src=grphcs[0]="Star0.gif"Image1=new Image();Image1.src=grphcs[1]="Star1.gif"Image2=new Image();Image2.src=grphcs[2]="Star2.gif"Image3=new Image();Image3.src=grphcs[3]="Star3.gif"Image4=new Image();Image4.src=grphcs[4]="Star4.gif"//SPECIFY number of images to randomly display concurrently from list above. Less the more efficientAmount=20; Ypos=new Array();Xpos=new Array();Zpos=new Array();//SpeedX=new Array();//SpeedY=new Array();ScrXpos=new Array();ScrYpos=new Array();Speed=new Array();Size=new Array();Step=new Array();ns=(document.layers)?1:0;ie=document.all&&navigator.userAgent.indexOf("Opera")==-1if (ns){for (i = 0; i < Amount; i++){var P=Math.floor(Math.random()*grphcs.length);rndPic=grphcs[P];document.write("<LAYER NAME='sn" +i+ "' LEFT=0 TOP=0><img src=" +rndPic+ "></LAYER>");} //end for} //end ifelse if (ie){ //IEdocument.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i = 0; i < Amount; i++){document.write('<img id="si'+i+ '" src="'+grphcs[Math.round((i+1)*(grphcs.length-1)/Amount)]+ '"style="position:absolute;top:0px;left:0px">');}document.write('</div></div>');}//initialize star propertiesif (ie||ns){WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;for (i=0; i < Amount; i++){Speed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;}}function fly(){var WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;var WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;var hscrll=(ns)?window.pageYOffset:document.body.scrollTop;for (i=0; i < Amount; i++){Zpos[i]-=Speed[i];if (ScrXpos[i]>WinWidth || ScrXpos[i]<0 || ScrYpos[i]>WinHeight || ScrYpos[i]<0 || Zpos[i]<=0) { //generate new starsSpeed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;}ScrXpos[i]=Xpos[i]/Zpos[i]*100 + WinWidth/2;ScrYpos[i]=Ypos[i]/Zpos[i]*100 + WinHeight/2;if (ns){document.layers['sn'+i].left=ScrXpos[i];document.layers['sn'+i].top=ScrYpos[i]+hscrll;}else{ //IEeval("document.all.si" +i).style.left=ScrXpos[i];eval("document.all.si" +i).style.top=ScrYpos[i]+hscrll;}} //end forsetTimeout('fly()',20);} //end flyif (ie||ns)window.onload=fly//--></SCRIPT>