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.
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:
The queue array is now filled with instances of this object:
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.
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:
And thats it - now the trail now quite happily fades away.
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.