Kurt Hamilton

Kurt,

> I was wondering if I could get your
> help on understanding how that script works

Mouse trails are an often annoying, but very simple-seeming script, that
have to step around quite a few incompatibilities. It is probably best to
get the basic understanding of how a simple mouse trail is created, rather
than trying to decipher my entire script from scratch.

The idea is as follows:
1. create a div that is positioned absolutely
2. detect the mousemove event over the document
3. when the event fires, get the coordinates of the mouse
4. get a reference to the div
5. reposition the div so that its position matches the mouse position, plus
whatever offset you want

All of these concepts are discussed at various points throughout my
tutorial:
Step 1;
http://www.howtocreate.co.uk/tutorials/javascript/dhtml#dhtmlHTML
Step 2 and 3 (by far the hardest part);
http://www.howtocreate.co.uk/tutorials/javascript/eventinfo
Step 4;
http://www.howtocreate.co.uk/tutorials/javascript/dhtml#dhtmlREF
Step 5;
http://www.howtocreate.co.uk/tutorials/javascript/dhtml#dhtmlPOS

My trail script is quite a lot more complicated than that, since it manages
more than one trail with different effects, but the concept is quite
similar.

1. create several divs that are positioned absolutely
2. detect the mousemove event over the document
3. when the event fires, get the coordinates of the mouse, and store them in
a global variable
4. create an interval timer that fires every few hundred milliseconds
5. when it fires, get a reference to each div in turn
6. reposition the div so that its position matches the mouse position, plus
whatever offset you want, plus an additional amount relating to the position
of the div preceding it

Step 3, the difference between global and local variables is discussed here:
http://www.howtocreate.co.uk/tutorials/javascript/functions#varscope
Step 4;
http://www.howtocreate.co.uk/tutorials/javascript/timers

Step 6 gives several possibilities:

For variable speed, it tries to move the trail divs to their new position,
which is calculated as being a fraction of the distance between their
current position, and the position of the preceding div (ignoring any
offsets).

For elastic, it does the same as variable speed, but it also stores the
distance that it moves them. Next time the interval fires, it adds on a
fraction of that last distance as well, so they jump beyond the point they
were supposed to be at, then over-correct it next interval, etc.

For fixed speed, it simply moves each div to the position that the preceding
div had last time the interval fired, plus the relevant offsets.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/