Inside Technique : Cursor Trails : Improving the Trail

First, five GIF's needed to be created for the animation. All are the same dimensions but with an increasing amount of transparent area and the dot (in this case) gets smaller. These sprites will need to be preloaded. The filenames of the sprites are trailgif1.gif, trailgif2.gif, trailgif3.gif, etc. A name attribute also needs to be added to each sprite img tag so the scripting can reference it.

Compared to the basic trail, the scripting becomes a more complicated when it comes to the adding the fade. The queue now has to track not just a string reference to each sprites ID, but also its current frame and, if its in an active state, look after the animation.

This is ideal scenario for using a basic Javascript Object. Rather than filling the queue array with just strings that reference layers, we'll fill the array with objects that reference not only the sprites ID, but also a reference to the sprites image and the sprites current frame of fade animation. This simple object will also have one method which performs and looks after the animation process. Here is the trail object:

function trailSpriteObj(anID) {
	this.trailSpriteID = "trailSprite" + anID; //as before 
	this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image name
	this.currentFrame = 1; //the varible for looking after the frame
	this.animateTrailSprite = animateTrailSprite; //declare the objects method cycle
}
	
function animateTrailSprite() {
	if (this.currentFrame <6 ) { //if there are animation frames left, the change sprites the current frame
		if (isNS) { 
			eval("document." + this.trailSpriteID +".document['"+ this.imgRef + "'].src  =  trailSpriteFrame" + this.currentFrame + ".src");
		} else {
			eval("document['" + this.imgRef + "'].src  =  trailSpriteFrame" + this.currentFrame + ".src");
		}
		this.currentFrame ++; //and increase the objects current frame 
	} else { //the current frame has reached its limit so hide the sprite
		eval(layerRef + '.' + this.trailSpriteID +  styleRef + '.visibility = "hidden"');
	}	
}

The queue array is now filled with instances of this object:

for(x=0; x< NUM_OF_TRAIL_PARTS; x++)
	queue[x] = new trailSpriteObj(x+1) ;

The Object is constructed with just 1 parameter, a number related to the sprites ID in the HTML.

Another function is also introduced which fires off each objects 'animateTrailSprite' function. The processAnim fuction shown below simply calls each objects cycle function. 'processAnim' is added to a 'setinterval' function so it is called regularly.

function processAnim() {
	for(x=0; x<5; x++)
		queue[x].animateTrailSprite();
}

Now if this code is run, the mouse trail will just simply disappear and not reappear. To fix this, a couple of extra lines need to be added to the queue shufferling function. Now the sprite its getting from the back of the queue and moving closest to the mouse has its animation reset, by making it visible and setting its curent frame to 1 . The lines are:

	
queue[0].currentFrame = 1; //reset the objects frame number
eval(layerRef + '.' + queue[0].trailSpriteID +  styleRef + '.visibility = "visible"'); //make the sprite visible again

And thats it - now the trail now quite happily fades away.

Now the final thing to do is to make it work with older, less dynamic, browsers. Because in the script tag we've told the browser its version 1.2 Javascript older browsers will ignore it. The simplest way to avoid the images between the div tag appearing in older browsers is to put the tags at the very bottom of your page and replace the dot images with a blank transparent gif, with the same dimensions as a trail part. Using a <span> tag rather than a <div> will also stop the page from trailing off to long (A div causes a line break, whilst a span doesn't).

About the Author

Matthew Allum is a 23 year old programmer from the UK. He works on the websites for a large consumer magazine publisher located at www.erack.com. Apart from coding in various Internet technologies, he also enjoys cruising in his Karmann Ghia, collecting obscure records and just hanging out. His home page is located at http://hopskotch.eimages.co.uk.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.