DHTML Starfield Effect

This javascript code allows you to travel in a space odyssey type effect by having stars come towards you like Star Trek!

Cut & Paste in between tags <head> here </head>
<script language="JavaScript1.2" type="text/javascript"> // // This Code Free To Use - Providing This Notice Remains // JavaScript Code Effect Found At: Development Resource & JavaScript Code & Generator Public Archive Center // Located: http://www.DesignerWiz.com // Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply // //3D Starfield - by Mikhail Ansolis, based on Flying planes - by John Ely //Modified from: Autumn leaves script- by Kurt Grigg (kurt.grigg@virgin.net) // // Modify to work Netscape NS6up by: Roberto de Jesus Asyn Diaz // Web Site: http://www.asynco.net // email : rasyn@asynco.net // //Pre-load your image below! //CHANGE 5 to the number of images listed below grphcs=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 efficient Amount=10; 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(); ns6 = (document.getElementById&&!document.all)? true:false ns=(document.layers)?1:0; ie=document.all&&navigator.userAgent.indexOf("Opera")==-1 var leftcorner; var topcorner; if (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 if else if (ie||ns6){ //IE document.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 properties if (ie||ns||ns6){ WinHeight=(ns||ns6)?window.innerHeight+pageYOffset-80:window.document.body.clientHeight+document.body.scrollTop; WinWidth= (ns||ns6)?window.innerWidth +pageXOffset-80:window.document.body.clientWidth +document.body.scrollLeft; for (i=0; i < Amount; i++){ Speed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10 Xpos[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||ns6)?window.innerHeight+pageYOffset-80:window.document.body.clientHeight+document.body.scrollTop; var WinWidth=(ns||ns6)? window.innerWidth +pageXOffset-80:window.document.body.clientWidth +document.body.scrollLeft; var hscrll=(ns||ns6)?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 stars Speed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10 Xpos[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 if(ie) { //IE eval("document.all.si"+i).style.left=ScrXpos[i]; eval("document.all.si"+i).style.top=ScrYpos[i]+hscrll; } else { document.getElementById('si'+i).style.left=ScrXpos[i]; document.getElementById('si'+i).style.top=ScrYpos[i]+pageYOffset; } } //end for setTimeout('fly()',20); } //end fly window.onload=fly //--> </script>

Place this code in the Body section
<SCRIPT> var ns6=document.getElementById&&!document.all if (document.layers||ns6){ H =window.innerHeight; W =window.innerWidth; if (document.layers) window.captureEvents(Event.MOUSEMOVE); } if (document.all){ H =window.document.body.offsetHeight; W =window.document.body.offsetWidth; } y= W*0.5 - 296 x= H*0.5 + 30 document.write('<div style="position: absolute; left:'+y+'px; top: '+x+'px; text-align: center; color: #ffffff">') </script>
DHTML Starfield Effect

Simply Cut and Paste Script code
Be sure to properly place script position in Head and Body section of html
If you would like to use these images, simply right click and save all 5 stars

Credit: Roberto de Jesus Asyn Diaz Homepage

This script has been in the DesignerWiz.com Public Library.