Inside Technique : Cursor Trails : Creating Cursor Trails

Forgetting about the fade for the moment the code to achieve a simple trail runs like this:

1. Initialize variables, events and fill the queue with the sprite names, which is done with the init function.

   function init() {
   	// fill the queue array with the layer names	
   	for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
   		// which are numbered dot1, dot2 .. in sequence
   		queue[x] = "trailSprite" + (x+1) ;
   	// Tell the browser what events we want to capture (Netscape)
   	if (isNS) { document.captureEvents(Event.MOUSEMOVE); } 
   	document.onmousemove = processMouse;  // And where there to go.
   }	
   

2. When the mouse moves, get the last sprite ID reference from the queue array and position this sprite closest to the mouse. This is accomplished by the processMouse function:

   		
   function processMouse(e) {
   			
   	//	Get the last sprite reference of the 'queue'.
   		currentObj = shuffleQueue();
   	
   	//	Depending on the browser, position this trail part near the mouse 
   	//	co-ordinates offsetting by 10 pixels so it dosn't get in the way of 
   	//	links etc.
   	if (isNS) {
   		eval("document." + currentObj + ".left = e.pageX - 10 ;");
   		eval("document." + currentObj + ".top = e.pageY + 10;");
   	} else {
   		eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft - 10 ;");
   		eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop - 10;");
   	}
   }
   

3. Move the rest of the queue's references back an element and put the last element at the front. The 'shuffle' function does this:

   		
   function shuffleQueue() {
   	lastItemPos = queue.length - 1;	 // get the position of the last item of the que
   	lastItem = queue[lastItemPos];	 // get the actual item
   	for (i = lastItemPos; i>0; i--)  // Now move the rest of the que back one 
   		queue[i] = queue[i-1];
   	queue[0] = lastItem;		 // Replace the last item at the front
   	return 	queue[0];		 // and then return it
   }
   

4. repeat step 2 when the mouse moves.

This this is a basic trail, but it kind of gets in the way of whats on the page. Next we improve the trail to constantly fade. The fade consists of a five frame animation of a trail part getting gradually smaller before dissapearing completely. The animation for a sprite is started when it's moved closest to the mouse. This gives the effect of the trail graduating away as the mouse is moved and disappearing completely when mouse movement is stopped.

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