Making a text mouse trail

[ Studied  ...calculating..., 6 thanks ]

                                                                   

   In this tutorial I will teach you how to make a text mouse trail - A text that it will follow your pointer dynamically, with a great ripple effect on the length of the text. 

 

   This is not an original idea, I just made it work and "adapted it" to fit the newest browsers. I have no clue who was the one who did the original code, as I have it for a loooooooong long time, just sitting there and "rusting" away without purpose, until one day when I discovered it accidentally and made it my new project to bring it to life.

 

    As I said before, I have this code from....somewhere, saved in a ".txt" file back in the days, more precisely from 2001 or 2002; needles to say I never get it to work !  One day, while searching something on my computer, I stumbled upon this text file containing a strange code written in one paragraph and without any particular name - realized it's a javascript from the "<script>" snippet found inside from time to time - and figured it out what it is from the "makesnake()" naming of the main procedure. So, what I did it was to arrange it in an intelligible manner, and try to run it ! Of course, the success was....none !  But after a couple of re-arrangements, a lot of documentation and tries, I made it to work - but only in Internet Explorer because, as I found out later, it was written specially for "Netscape 4".

 

     The next step was putting it on a coding forum, and asking for help - which came, somehow - and, by the way, I like to thank and0rsk, felgall and coothead for pointing me in the right direction -  and so I was able to perfection it for most browsers.

 

    Ok...well...let's get cracking....

 

    At first, a little example:

 

Hover and move the mouse within this iFrame to see the mouse text in action !

 

    The code consists in 3 parts, one part that have to be written in the "<head>" section of the page, one in the "body" section, and one directly into the "<body>" tag.

 

    In the "<head>" section of the page, you will have the declarations and the functions needed for the trail to work:

 

<html>

.......

<head>

.......

<script>
var x,y;

var step=20;
var message="Replace this with your own text and leave a space in the end ! ";
var thisspan='a';
message=message.split("");
var xpos=new Array();
for (i=0;i<=message.length-1;i++) {
 xpos[i]=-50 }
var ypos=new Array();
for (i=0;i<=message.length-1;i++){
 ypos[i]=-50 }
function handlerMM(e){
 x = e.pageX;
 y = e.pageY;
}
function makesnake(){
 for (i=message.length-1;i>=1; i--) {
  xpos[i]=xpos[i-1]+step;
  ypos[i]=ypos[i-1] }
 xpos[0]=x+step;
 ypos[0]=y;
 for (i=0; i<message.length-1; i++) {
  thisspan = "span"+(i);
  posi=ypos[i]+'px';
  document.getElementById(thisspan).style.top=posi;
  posi=xpos[i]+'px';
  document.getElementById(thisspan).style.left=posi
 }
 var timer=setTimeout("makesnake()",30)
}
</script>
.......

</head>

.......

</html>

 

 

    The second part will go into the "<body> section of the page, and it will "tell" the browser what to do:

 

<html>

.......

<body>

.......

<script>
for (i=0;i<=message.length-1;i++) {
 document.write("<span id='span"+i+"' class='spanstyle'>")
 document.write(message[i])
 document.write("</span>") }
if (document.layers){
 document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM
</script>
.......

</body>

.......

</html>

 

 

    And, finally, you need to trigger the creation of the trail - this will be done in the third part, when you will write directly in the "<body> tag:

 

<html>

.......

<body>

<body onload="makesnake()'">
.......

</body>

.......

</html>

 

    Don't forget to replace the text with your own text you want to show !

 

 

  Congratulation making a mouse text trail ! If there is something you didn't understand or anything else, just leave a comment !