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

STAR WARP

This script has been tested on and shown to work with the following browsers: Internet Explorer version 7 and above Google Chrome version 4 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 9 and above (including Opera mobile) Android Browser version 3 and above

07-Mar-2014: Stars can be multi-coloured. 20-Dec-2011: Many more stars and more whizzy effect. 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=40; // lower number for faster var warp=3; // from 1 to 10 var stars=150; // number of stars var colours=new Array("#60f", "#0f6", "#39f"); // colours of stars var position=0; // set to '0' for foreground and '-1' for stars to appear in the background, behind text on the page /**************************** * Star Warp Effect * (c)2005-14 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var strs=new Array(); var strx=new Array(); var stry=new Array(); var stdx=new Array(); var stdy=new Array(); var strz=new Array(); var swide=800; var shigh=600; warp=1+warp/125; if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addRVLoadEvent(initiate_hyperjump); function initiate_hyperjump() { if (document.getElementById) { var i, temp; boddie=document.createElement("div"); boddie.style.position="fixed"; boddie.style.top="0px"; boddie.style.left="0px"; boddie.style.width="1px"; boddie.style.height="1px"; boddie.style.overflow="visible"; boddie.style.backgroundColor="transparent"; boddie.style.zIndex=position; i=document.body.style.backgroundColor; if (document.body.parentNode) { if (i) document.body.parentNode.style.backgroundColor=i; document.body.style.backgroundColor="transparent"; } document.body.insertBefore(boddie, document.body.firstChild); set_width(); for (i=0; i<stars; i++) { strs[i]=document.createElement("div"); strs[i].style.color=colours[i%colours.length]; strs[i].style.backgroundColor="transparent"; strs[i].style.position="absolute"; strs[i].appendChild(document.createTextNode("")); strs[i].style.font="13px monospace"; stdy[i]=Math.random()6-3; stdx[i]=Math.random()8-4; 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])>5) strz[i]=13; else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7; else strz[i]=2; strs[i].style.fontSize=strz[i]+"px"; boddie.appendChild(strs[i]); } setInterval("warp_drive()", speed); }} function warp_drive() { var i; for (i=0; i<stars; i++) { stry[i]+=stdy[i]; strx[i]+=stdx[i]; stdx[i]=warp; stdy[i]=warp; if (stry[i]>0 && stry[i]<shigh && strx[i]>0 && strx[i]<swide) { if (Math.abs(stdx[i])+Math.abs(stdy[i])>strz[i]) strs[i].style.fontSize=++strz[i]+"px"; strs[i].style.left=strx[i]+"px"; strs[i].style.top=stry[i]+"px" } else { strx[i]=swide/2; stry[i]=shigh/2; strx[i]+=3(stdx[i]=Math.random()8-4); stry[i]+=3(stdy[i]=Math.random()*6-3); if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13; else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7; else strz[i]=2; strs[i].style.fontSize=strz[i]+"px"; } } } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)!="undefined" && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 \|\| sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min; shigh=sh_min; } // ]]> </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.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlspacewarp.php.

This page has been viewed 61 times. It was last viewed on Thu 21 Nov, 2024 at 06:22