Comet effect on the blog - Ash Princess Kawaii
Breaking News
Loading...
13 November 2014

Comet effect on the blog

November 13, 2014
Ash Princess Kawaii

I have a script comet effect on the blog.
Copy and paste the code below so that it sits between the <head> and </head> tags

<script type="text/javascript">
function addLoadEvent(e){var t=window.onload;if(typeof t!="function")window.onload=e;else window.onload=function(){if(t)t();e()}}function whooosh(){if(document.getElementById){var e;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(e=0;e<how_many;e++){write_comet(e*tail);setTimeout("launch("+e*tail+")",Math.max(1e3*e))}}}function write_comet(e){var t,n;for(t=0;t<tail;t++){n=2+(t<tail/4)+2*!t;comets[t+e]=div(n,n);comets[t+e].style.backgroundColor=colours[t];boddie.appendChild(comets[t+e])}}function div(e,t){var n=document.createElement("div");n.style.position="absolute";n.style.overflow="hidden";n.style.width=e+"px";n.style.height=t+"px";return n}function stepthrough(e){var t;if(Math.random()<.008||ypos[e]+dy[e]<5||xpos[e]+dx[e]<5||xpos[e]+dx[e]>=swide-5||ypos[e]+dy[e]>=shigh-5){for(t=0;t<tail;t++)setTimeout("comets["+(t+e)+'].style.visibility="hidden"',speed*(tail-t));setTimeout("launch("+e+")",Math.max(1e3,2e3*Math.random()*how_often))}else setTimeout("stepthrough("+e+")",speed);for(t=tail-1;t>=0;t--){if(t){xpos[t+e]=xpos[t+e-1];ypos[t+e]=ypos[t+e-1]}else{xpos[t+e]+=dx[e];ypos[t+e]+=dy[e]}comets[t+e].style.left=xpos[t+e]+"px";comets[t+e].style.top=ypos[t+e]+"px"}}function launch(e){var t;dx[e]=(Math.random()>.5?1:-1)*(1+Math.random()*3);dy[e]=(Math.random()>.5?1:-1)*((7-dx[e])/3+Math.random()*(dx[e]+5)/3);xpos[e]=2*tail*dx[e]+Math.round(Math.random()*(swide-4*tail*dx[e]));ypos[e]=2*tail*dy[e]+Math.round(Math.random()*(shigh-4*tail*dy[e]));for(t=0;t<tail;t++){xpos[t+e]=xpos[e];ypos[t+e]=ypos[e];comets[t+e].style.visibility="visible"}stepthrough(e)}function set_width(){var e=999999;var t=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)e=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)t=document.documentElement.clientHeight}if(typeof self.innerWidth!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<e)e=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<t)t=self.innerHeight}if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<e)e=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<t)t=document.body.clientHeight}if(e==999999||t==999999){e=800;t=600}swide=e;shigh=t}var speed=25;var how_often=10;var how_many=10;var colours=new Array("#ff0","#f93","#f60","#e93","#e94","#da5","#da6","#cb7","#cb8","#cc9","#dcb","#ddd");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;addLoadEvent(whooosh);window.onresize=set_width
</script>
Change the colours as you wish.

Live demo of comet effect on the blog

See the Pen OPJXza by ash nareswari (@ashavenger) on CodePen.

1 Comments: