Texto que sigue al cursor

Este es un truco muy divertido, se trata de un texto (la frase que quieras poner) que se mueve junto al cursor. Ponerlo en el blog es sencillísimo. Mira cómo funciona en este Demo.

Para ponerlo en el blog solo entra en Diseño, Edición Html, y con los artilugios expandidos, antes de </head> pega 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 = "Pon aquí el texto que quieras"

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>

 

Pon el texto que tu quieras reemplazándo lo que está con rojo, en f5632c es el color del texto (yo le puse el naranja) que puedes cambiar a tu gusto. Y listo, ya tienes un texto que sigue al cursor.