Roaming Alien
Instructions:
1: Copy and paste the following script in the HEAD section of your page:
Select all...
<script language="javascript"> var maxX=2; // MAX HORIZ PIXEL STEPS var maxY=2; // MAX VERT PIXEL STEPS var ns4=(document.layers)?true:false; var ie4=(document.all && !document.getElementById)?true:false; var ie5=(document.all && document.getElementById)?true:false; var ns6=(document.getElementById&&navigator.appName.indexOf("Netscape")>=0)?true:false; var w3c=(document.getElementById)?true:false; var ww=0; var wh=0; var ydir=true; var xdir=true; var floatobj; var x=0; var y=0; var stepX=1; var stepY=1; function getwindowsize(){ ww=(ie4||ie5)?document.body.clientWidth:window.innerWidth; wh=(ie4||ie5)?document.body.clientHeight:window.innerHeight; } function randomdir(){ if(Math.floor(Math.random()*2))stepX=Math.floor(Math.random()*maxX)+1; if(Math.floor(Math.random()*2))stepY=Math.floor(Math.random()*maxY)+1; if(Math.floor(Math.random()*2))xdir=(Math.floor(Math.random()*2))?false:true; if(Math.floor(Math.random()*2))ydir=(Math.floor(Math.random()*2))?false:true; setTimeout('randomdir()', Math.floor(Math.random()*5000)+600); } function moveid(id,x,y){ if(ns4)id.moveTo(x,y); else{ id.style.left=x+'px'; id.style.top=y+'px'; }} function animate(){ var sx=(ie4||ie5)?document.body.scrollLeft:pageXOffset; var sy=(ie4||ie5)?document.body.scrollTop:pageYOffset; var tp=(ns4)?floatobj.top:parseInt(floatobj.style.top); var lf=(ns4)?floatobj.left:parseInt(floatobj.style.left); var tx,ty; if(ydir){ if(tp+stepY>=wh+sy-floatobj.ih-4){ ydir=false; ty=tp-stepY; }else ty=tp+stepY; }else{ if(tp-stepY<=sy){ ydir=true; ty=tp+stepY; }else ty=tp-stepY; } if(xdir){ if(lf+stepX>=ww+sx-floatobj.iw-3){ xdir=false; tx=lf-stepX; }else tx=lf+stepX; }else{ if(lf-stepX<=sx){ xdir=true; tx=lf+stepX; }else tx=lf-stepX; } moveid(floatobj,tx,ty); } window.onload=function(){ floatobj=(ns4)?document.layers['floatobj']:(ie4)?document.all['floatobj']:document.getElementById('floatobj'); floatobj.iw=(ns4)?floatobj.document.images["float"].width:document.images["float"].width; floatobj.ih=(ns4)?floatobj.document.images["float"].height:document.images["float"].height; if(ns6){ floatobj.iw+=10; floatobj.ih+=10; } getwindowsize(); x=ww/2; y=wh/2; moveid(floatobj,x,y); randomdir(); setInterval('animate()',50); } window.onresize=function(){ if(ns4)setTimeout('history.go(0)',400); else getwindowsize(); } </script>
2: Copy and paste the following style declaration in the HEAD section of your page:
Select all...
<style type="text/css"> body{ background-color:black; background-image:url('backgnd.jpg'); } </style>
3: Copy and paste the following HTML anywhere in the BODY section of your page:
Select all...
4: Adjust the settings in the script to suit your needs