Halloween Ghosts

Brought to you by
JavaScript-FX

Directions:
1) Open up your webpage document in Notepad
2) Right click in the text area below and select "copy"
3) Right click in Note pad and "Paste" this code just before the </body> tag

<SCRIPT TYPE="text/javascript">
 /**
  * You may use this code for free on any web page provided that 
  * these comment lines and the following credit remain in the code.
  * Compact Cross Browser Ghosts effect by http://www.JavaScript-fx.com
  */
if(!window.JSFX) JSFX=new Object();
JSFX.ghostImages = new Array( 
	"(\\^^/)",
	"<font size='3' color='yellow'>(\\^^/)</font>",
	"<font size='3' color='red'>(\\^^/)</font>",
	"<font size='3' color='lime'>(\\^^/)</font>",
	"/)v(\\",
	"<font size='4' color='yellow'>/)v(\\</font>",
	"<font size='4' color='red'>/)v(\\</font>",
	"<font size='4' color='lime'>/)v(\\</font>",
	"(\\-^^-/)",
	"<font size='5' color='yellow'>(\\-^^-/)</font>",
	"<font size='5' color='red'>(\\-^^-/)</font>",
	"<font size='5' color='lime'>(\\-^^-/)</font>",
	"(o,o)",
	"(*.*)"
);
var ns4 = document.layers;
var ie4 = document.all;
JSFX.makeLayer = function(id)
{
	var el = 	document.getElementById	? document.getElementById(id) :
			document.all 		? document.all[id] :
							  document.layers[id];
	if(ns4) el.style=el;
	el.sP=function(x,y){this.style.left = x;this.style.top=y;};
	el.show=function(){ this.style.visibility = "visible"; } 
	el.hide=function(){ this.style.visibility = "hidden"; } 
	if(ns4 || window.opera) 
		el.sO = function(pc){return 0;};
	else if(ie4)
		el.sO = function(pc)
		{
			if(this.style.filter=="")
				this.style.filter="alpha(opacity=100);";
			this.filters.alpha.opacity=pc;
		}
	else
		el.sO = function(pc){this.style.MozOpacity=pc/100;}

return el;
}

if(window.innerWidth)
{
	gX=function(){return innerWidth;};
	gY=function(){return innerHeight;};
}
else
{
	gX=function(){return document.body.clientWidth-30;};
	gY=function(){return document.body.clientHeight-30;};
}
JSFX.ghostOutput=function()
{
	for(var i=0 ; i<JSFX.ghostImages.length ; i++)
		document.write(ns4 ? "<LAYER  NAME='gh"+i+"'>"+JSFX.ghostImages[i]+"</LAYER>" : 
					   "<DIV id='gh"+i+"' style='position:absolute'>"+JSFX.ghostImages[i]+"</DIV>" );
	
}
JSFX.ghostSprites = new Array();
JSFX.ghostStartAni = function()
{
	for(var i=0 ;i<JSFX.ghostImages.length;i++)
	{
		var el=JSFX.makeLayer("gh"+i);
		el.x=Math.random()*gX();
		el.y=Math.random()*gY();
		el.tx=Math.random()*gX();
		el.ty=Math.random()*gY();
		el.dx=-5+Math.random()*10;
		el.dy=-5+Math.random()*10;
		el.state="off";
		el.op=0;
		el.sO(el.op);
		el.hide();
		JSFX.ghostSprites[i] = el;
	}
	setInterval("JSFX.ghostAni()", 40);
}
JSFX.ghostAni = function()
{
	for(var i=0 ;i<JSFX.ghostSprites.length;i++)
	{
		el=JSFX.ghostSprites[i];

if(el.state == "off")
		{
			if(Math.random() > .99)
			{
				el.state="up";
				el.show();
			}
		}
		else if(el.state == "on")
		{
			if(Math.random() > .98)
				el.state="down";
		}
		else if(el.state == "up")
		{
			el.op += 2;
			el.sO(el.op);
			if(el.op==100)
				el.state = "on";
		}
		else if(el.state == "down")
		{
			el.op -= 2;
			if(el.op==0)
			{
				el.hide();
				el.state = "off";
			}
			else
				el.sO(el.op);
		}

var X = (el.tx - el.x);
		var Y = (el.ty - el.y);
		var len = Math.sqrt(X*X+Y*Y);
		if(len < 1) len = 1;
		var dx = 20 * (X/len);
		var dy = 20 * (Y/len);
		var ddx = (dx - el.dx)/10;
		var ddy = (dy - el.dy)/10;
		el.dx += ddx;
		el.dy += ddy;
		el.sP(el.x+=el.dx,el.y+=el.dy);

if(Math.random() >.95 )
		{
			el.tx = Math.random()*gX();
			el.ty = Math.random()*gY();
		}

}
}
JSFX.ghostStart = function()
{
	if(JSFX.ghostLoad)JSFX.ghostLoad();
	JSFX.ghostStartAni();
}
JSFX.ghostOutput();
JSFX.ghostLoad=window.onload;
window.onload=JSFX.ghostStart;

</SCRIPT>

Demo with Images | demo 3 | demo 4

Home | Scripts