Inside Technique : Cursor Trails : Trails Demonstration

This page includes a cursor trail. The trail consists of 5 CSS layers each consisting of an image that makes up the trail. I'll call this combination of an image in its own layer a 'sprite'. As shown here:

	
<DIV id="trailSprite1" style="position: absolute; height:28px; width:36px;">
  <img src="trailgif1.gif" height=28 width=36 border=0>
</DIV>

References to these sprites ID are stored in an array as a string. The ID's are named trailsprite1, trailsprite2, trailsprite3, etc. This array is treated like a kind of 'queue'. When the mouse moves, the last sprite ID in the array is positioned closest to the mouse's current position (there's a slight offset so the trail doesn't cover up anything clickable). The array is then shifted by 1 element so this last reference becomes the first. This process continues so the queue is 'looped' around on its self and therefore there's alway's a sprite available for the trail.

Next we will show you step by step how we created this effect.

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