Diseño Web, Registro de dominio y Hospedaje Web

sábado, 17 de octubre de 2009

¿Como hacer un texto que siga el cursor?

Hacé que un texto cualquiera siga al mouse del visitante en tu página. Es un efecto fabuloso y fácil de incluir en las páginas

Incluye el siguiente código en tu página HTML:





<style>

.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()

</script>




No hay comentarios: