RV's free DHTML and JavaScript effects :: Star/Space Warp through Hyperspace

STAR WARP
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0+ and Opera 7+
21-Nov-2005: Improved to run much more smoothly.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var speed=33; // lower number for faster var warp=3; // from 1 to 10 var stars=100; // number of stars var colour="#000"; // colour of stars var position=0; // set to '-1' for stars to appear behind text on page /**************************** * Star Warp Effect * * (c) 2005 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var i; var strs=new Array(); var strx=new Array(); var stry=new Array(); var stdx=new Array(); var stdy=new Array(); var swide=800; var shigh=600; warp/=100; window.onload=function() { if (document.getElementById) { var b, s, temp; set_width(); b=document.createElement("div"); s=b.style; s.position="absolute"; s.zIndex=position; b.setAttribute("id", "bod"); document.body.appendChild(b); set_scroll(); for (i=0; i<stars; i++) { strs[i]=document.createElement("div"); strs[i].style.backgroundColor=colour; strs[i].style.overflow="hidden"; strs[i].style.position="absolute"; stdy[i]=Math.random()4-2; stdx[i]=Math.random()6-3; temp=Math.random()100; strx[i]=swide/2+tempstdx[i]; stry[i]=shigh/2+tempstdy[i]; if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) { strs[i].style.width="2px"; strs[i].style.height="2px"; } else { strs[i].style.width="1px"; strs[i].style.height="1px"; } b.appendChild(strs[i]); } setInterval("warp_drive()", speed); }} function warp_drive() { for (i=0; i<stars; i++) { stry[i]+=stdy[i]; strx[i]+=stdx[i]; stdx[i]=1+warp; stdy[i]=1+warp; if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) { strs[i].style.left=Math.floor(strx[i])+"px"; strs[i].style.top=Math.floor(stry[i])+"px" } else { strx[i]=swide/2; stry[i]=shigh/2; stry[i]+=stdy[i]=Math.random()4-2; strx[i]+=stdx[i]=Math.random()6-3; if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) { strs[i].style.width="2px"; strs[i].style.height="2px"; } else { strs[i].style.width="1px"; strs[i].style.height="1px"; } } } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth-13; shigh=self.innerHeight-13; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } swide-=2; shigh-=2; } 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"; } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Change the colour (and other parameters) at the start of the script you just copied to the settings you require.
THAT'S IT When your page loads, it should warp through space, just like this page.
No menu on the left? Click here for a full list of all the free DHTML and Javascript effects you could be using on your web-site!

[ This page viewed 97 times. Last viewed Fri 30 Jul, 2010 at 16:14 ]