Truco de Texto que sigue al cursor

Truco de Texto que sigue al cursor 

Me acaban de preguntar cómo hacer el truco para que un texto siga al cursor, al puntero del mouse. Es muy sencillo de hacer y lo voy a explicar. Para ver una prueba de lo que estoy hablando simplemente vayan a este blog de pruebas.

Para agregarlo vamos a nuestra plantilla y buscamos la siguiente etiqueta: </head> y antes de ella pegamos lo siguiente:

----------------------------------------------------------------

<script language='javascript' type='text/javascript'>

//Cursor con texto en movimiento

//<![CDATA[

var x,y

var tempo = 10

var espera = 0

var texto = "Texto que quieran para que siga al mouse"

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){

//si no es NS4, usa objeto window.event

if (!e) var e = window.event

//NS4

if (e.pageX || e.pageY) {

x = e.pageX

y = e.pageY

window.status = x + ' : ' + y

//IE y compatibles con DOM

} else if (e.clientX || e.clientY) {

x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft

y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop

window.status = x + ' : ' + y

//no soportado, no hace nada

} else {

return

}

espera = 1

}

function animar_cursor() {

if ( espera == 1 ) {

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

}

//para el IE 4.x

if ( espera==1 && document.all ) {

for (i = 0; i <= texto.length - 1; i++) {

var letra = eval("span" + i + ".style")

letra.posLeft = xpos[i]

letra.posTop = ypos[i]

}

}

//para el Netscape 4.x

else if ( espera==1 && document.layers ) {

for (i = 0; i <= texto.length - 1; i++) {

var letra = eval("document.span" + i)

letra.left = xpos[i]

letra.top = ypos[i]

}

}

//para navegadores compatibles DOM

else if ( espera==1 && document.getElementById ) {

for (i = 0; i <= texto.length - 1; i++) {

var letra = document.getElementById( "span" + i)

letra.style.left = xpos[i] + 'px'

letra.style.top = ypos[i] + 'px'

}

}

var timer = setTimeout("animar_cursor()", 30)

}

if (document.layers)

document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = seguir

//]]>

</script>

<style type='text/css'>

.cursoranimado {

position:absolute;

visibility:visible;

top:-50px;

font-size:11pt;

font-family:Arial;

font-weight:bold;

color:#f5632c;

}

</style>

<script language='javascript' type='text/javascript'>

//<![CDATA[

if (document.layers) {

for (i=0;i<=texto.length-1;i++) {

document.write('<span id="span' + i + '" class="cursoranimado">')

document.write(texto[i])

document.write('</span>')

}

} else if (document.all || document.getElementById) {

for (i=0;i<=texto.length-1;i++) {

document.write('<div id="span' + i + '" class="cursoranimado">')

document.write(texto[i])

document.write('</div>')

}

}

animar_cursor()

//]]>

</script>

----------------------------------------------------

Ahora reemplacen lo que está en rojo por el texto que ustedes quieren que siga al mouse y lo que está en azul por el color de ese texto. Sencillo, ¿no?. ¡Saludos!