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 Notepad and "Paste" this code just before the </body> tag
4) Right click on each of the images below and select "Save Picture As..."
and save the images into the same folder as your web document

<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( 
	"<img src='ghost0.gif'>",
	"<img src='ghost1.gif'>",
	"<img src='ghost2.gif'>",
	"<img src='ghost2.gif'>"
);
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 1 | demo 3 | demo 4

Home | Scripts