COMET/SHOOTING STAR
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+.
28-Feb-2008
: First Release.
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=20; // how fast - smaller is faster var colours=new Array("#f00", "#f60", "#f93", "#fa5", "#fb6", "#fc7", "#fd8", "#fe9", "#ffa", "#ffb", "#ffc"); // above line lists colours for the comet and its tail (can be as long or short as you like) /**************************** * Shooting Star/Comet Effect* * (c) 2008 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var dx, dy; var xpos=new Array(); var ypos=new Array(); var swide=800; var shigh=600; var tail=colours.length; function write_comet() { var b, t, s; b=document.createElement("div"); b.style.position="absolute"; b.setAttribute("id", "bod"); document.body.appendChild(b); set_scroll(); set_width(); for (i=0; i<tail; i++) { s=1+(i<tail/4)+(!i); t=div("comet"+i, s, s); b.appendChild(t); } } function div(id, w, h) { var d=document.createElement("div"); d.style.position="absolute"; d.style.overflow="hidden"; d.style.width=w+"px"; d.style.height=h+"px"; d.setAttribute("id", id); return (d); } function stepthrough() { var i; if (Math.random()<0.008||ypos[0]+dy<4||xpos[0]+dx<4||xpos[0]+dx>=swide-4||ypos[0]+dy>=shigh-4) { for (i=0; i<tail; i++) setTimeout('document.getElementById("comet'+i+'").style.backgroundColor="transparent"', speed*(tail-i)); setTimeout('launch()', 1000+Math.random()*9000); } else setTimeout('stepthrough()', speed); for (i=tail-1; i>=0; i--) { if (i) { xpos[i]=xpos[i-1]; ypos[i]=ypos[i-1]; } else { xpos[i]+=dx; ypos[i]+=dy; } document.getElementById("comet"+i).style.left=xpos[i]+"px"; document.getElementById("comet"+i).style.top=ypos[i]+"px"; } } function launch() { var i; dx=(Math.random()>0.5?1:-1)*(2+Math.random()*3); dy=(Math.random()>0.5?1:-1)*(2+Math.random()*3); xpos[0]=2*tail*dx+Math.round(Math.random()*(swide-4*tail*dx)); ypos[0]=2*tail*dy+Math.round(Math.random()*(shigh-4*tail*dy)); for (i=0; i<tail; i++) { xpos[i]=xpos[0]; ypos[i]=ypos[0]; document.getElementById("comet"+i).style.backgroundColor=colours[i]; } stepthrough(); } 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"; } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } 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; } } window.onload=function() { if (document.getElementById) { set_width(); write_comet(); launch(); }} // ]]> </script>
CLICK HERE
to select the above script ready to paste it into your clipboard
STEP 2:
If you wish, change the colours at the start of the script you just copied to be the colour of comet and its tail that you require.
THAT'S IT
When your page loads, the comet or shooting star will randomly appear shooting across the screen, just like it is doing on this page. The effect is quite subtle (you have to be watching for it) and works best with a light coloured comet against a dark (or even a twinkling) background.
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!
Interested in learning more about JavaScript, CSS, HTML/XHTML/XML and PHP programming? I would highly recommend the following books...
[ This page viewed 873 times. Last viewed Sun 20 Jul, 2008 at 05:25 ]
