Snake Effect In Text String

[Total: 0    Average: 0/5]

This examples sets up a string that acts like a snake to track the mouse.

Head Code:

<STYLE>
.spanstyle {
    position:absolute;
    visibility:visible;
    top:-50px;
    font-size:12pt;
    font-family:Verdana;
    font-weight:bold;
    color:steelblue;
}
</STYLE>

<script>
var message="JS-Examples.com".split("");
var x;
var y;
var step=15;
var xpos=new Array();
var ypos=new Array();

function mouseMoved(e){
    x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
    y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
}

function makesnake() {
  var thisspan;
    for (var i=message.length-1; i>=0; i--) {
            xpos[i]=xpos[i-1]+step;
            ypos[i]=ypos[i-1];
    }
        xpos[0]=x+step;
        ypos[0]=y;
    
        for (var i in message) {
		  if (document.all) {
        thisspan = eval("span"+(i)+".style");
        thisspan.posLeft=xpos[i];
        thisspan.posTop=ypos[i];
		  } else if (document.layers) {
		thisspan = eval("document.span"+i);
        thisspan.left=xpos[i];
        thisspan.top=ypos[i];
		  }
    }

}
var timer = null;
function startSnake() {
  for (var i in message) {
      xpos[i]=-50;
      ypos[i]=-50;
  }
  setTimeout('timer=setInterval("makesnake()",30);',1000);
}
startSnake();
for (var i in message) {
  document.write("<span id='span"+i+"' class='spanstyle'>")
  document.write(message[i]);
  document.write("</span>");
}

if (document.layers) { document.captureEvents(Event.MOUSEMOVE); }
document.onmousemove = mouseMoved;

</script>

Body Code:


Times Viewed: 4

Leave a Reply

Your email address will not be published. Required fields are marked *