jun
14
2011

Hacer que un texto siga al mouse

An article by kino

Insertar un texto que siga el movimiento del mouse es fácil y sencillo.

Este efecto es bastante vistoso para las páginas web. Aunnque algunas personas podrian considerarlo molesto, hay quienes lo usan para fijar un mensaje en la mente del visitante. Te recomendamos que no sea un texto muy largo.

El codigo es el siguiente:

.animado {position:absolute;visibility:visible;top:-50px;font-size:10pt;font-family:Arial;font-weight:bold;color:black;}
</style>
<script language=JavaScript>
var x,y
var tempo=10
var espera=0
 
var texto="www.CheNico.com"
texto=texto.split("")
 
var xpos=new Array()
for (i=0;i<=texto.length-1;i++) {
xpos[i]=-50
}
 
var ypos=new Array()
for (i=0;i<=texto.length-1;i++) {
ypos[i]=-50
}
 
function seguir(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
espera=1
}
 
function animar_cursor() {
if (espera==1 && document.all) {
for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y
 
for (i=0; i<texto.length-1; i++) {
var camada = eval("span"+(i)+".style")
camada.posLeft=xpos[i]
camada.posTop=ypos[i]
}
}
 
else if (espera==1 && document.layers) {
for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y
 
for (i=0; i<texto.length-1; i++) {
var camada = eval("document.span"+i)
camada.left=xpos[i]
camada.top=ypos[i]
}
}
var timer=setTimeout("animar_cursor()",30)
}
 
</script>
<script Language=JavaScript>
for (i=0;i<=texto.length-1;i++) {
document.write("<span id='span"+i+"' class='animado'>")
document.write(texto[i])
document.write("</span>")
}
 
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = seguir;
animar_cursor()