Shooting Star Comet Effect :: RV's free DHTML and JavaScript text and graphic scripts

COMET/SHOOTING STAR EFFECT

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

20-Jun-2013: New onload event handler added. 19-Dec-2011: Updated for multiple simultaneous comets. 24-Aug-2011: Added option to select how often comets appear. 28-Feb-2008: First released.
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=25; // how fast - smaller is faster var how_often=10; // average time between re-appearances of a comet (in seconds) var how_many=10; // maximum number of comets in flight var colours=new Array("#ff0", "#f93", "#f60", "#e93", "#e94", "#da5", "#da6", "#cb7", "#cb8", "#cc9", "#dcb", "#ddd"); // 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-13 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var dx=new Array(); var dy=new Array(); var xpos=new Array(); var ypos=new Array(); var comets=new Array(); var swide=800; var shigh=600; var tail=colours.length; var boddie=false; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(whooosh); function whooosh() { if (document.getElementById) { var i; boddie=document.createElement("div"); boddie.style.position="fixed"; boddie.style.top="0px"; boddie.style.left="0px"; boddie.style.overflow="visible"; boddie.style.width="1px"; boddie.style.height="1px"; boddie.style.backgroundColor="transparent"; document.body.appendChild(boddie); set_width(); for (i=0; i<how_many; i++) { write_comet(itail); setTimeout('launch('+(itail)+')', Math.max(1000i)); } }} function write_comet(a) { var i, s; for (i=0; i<tail; i++) { s=2+(i<tail/4)+2!i; comets[i+a]=div(s, s); comets[i+a].style.backgroundColor=colours[i]; boddie.appendChild(comets[i+a]); } } function div(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"; return (d); } function stepthrough(a) { var i; if (Math.random()<0.008\|\|ypos[a]+dy[a]<5\|\|xpos[a]+dx[a]<5\|\|xpos[a]+dx[a]>=swide-5\|\|ypos[a]+dy[a]>=shigh-5) { for (i=0; i<tail; i++) setTimeout('comets['+(i+a)+'].style.visibility="hidden"', speed(tail-i)); setTimeout('launch('+a+')', Math.max(1000, 2000Math.random()how_often)); } else setTimeout('stepthrough('+a+')', speed); for (i=tail-1; i>=0; i--) { if (i) { xpos[i+a]=xpos[i+a-1]; ypos[i+a]=ypos[i+a-1]; } else { xpos[i+a]+=dx[a]; ypos[i+a]+=dy[a]; } comets[i+a].style.left=xpos[i+a]+"px"; comets[i+a].style.top=ypos[i+a]+"px"; } } function launch(a) { var i; dx[a]=(Math.random()>0.5?1:-1)(1+Math.random()3); dy[a]=(Math.random()>0.5?1:-1)((7-dx[a])/3+Math.random()(dx[a]+5)/3); xpos[a]=2taildx[a]+Math.round(Math.random()(swide-4taildx[a])); ypos[a]=2taildy[a]+Math.round(Math.random()(shigh-4taildy[a])); for (i=0; i<tail; i++) { xpos[i+a]=xpos[a]; ypos[i+a]=ypos[a]; comets[i+a].style.visibility="visible"; } stepthrough(a); } 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: 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, one (or more) 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.

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/dhtmlshootingstar.php.

This page has been viewed 69 times. It was last viewed on Fri 22 Nov, 2024 at 23:32