Cursor con texto en movimiento

|

Este truco es para que un texto siga el cursor del mouse. El texto puede ser el título de su blog o lo que ustedes elijan. Pueden ver un ejemplo de cómo el texto sigue al cursor aquí.
Para ponerlo en su blog tienen que crear un elemento HTML/Javascript (ver cómo insertar elementos) y ahí pegar el siguiente código:

<script language="JavaScript" type="text/javascript">

mensaje = 'EL TEXTO QUE QUIERAN';
font = 'Verdana,Arial';
size = 2;
color = 'orange';
velocidad = 0.7;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);

mensaje = mensaje.split('');
n = mensaje.length;

a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";

if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

if(n4)
window.captureEvents(Event.MOUSEMOVE);

function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}

if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;

y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();

for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}

function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;

for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}

function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);

for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}

window.onload = ondula;

</script>



Para personalizarlo deben cambiar el mensaje que dice EL TEXTO QUE QUIERAN, si quieren otro tipo de letra cambian donde dice font, para el tamaño de la letra en size, el color donde dice orange, pueden poner el color que quieran (black, red, green, etc) incluso pueden modificar la velocidad.






37 comentarios:

TU NO ERES POP dijo...

Hey potro! gracias por el apoyo para mi blogss se te aprecia y agradece y si quieres algo musical pues nomas me lo haces saber sale. saludos electropoperos!

SpOtT dijo...

no logro poner el texto alado del curso me podrian ayudar

El Potro™ dijo...

Hola SpOtT,
¿Te marca algún error? Si copias y pegas el código tal cual verás que sale el texto sin problemas. Yo lo he probado en tres blogs y funciona a la perfección.

El Potro™ dijo...

Hola Claudio,
Veo que en el código has puesto antes del mensaje el texto "Justificar a ambos lados".
Elimina eso, sólo debes cambiar los datos que están marcados en color rojo.
Saludos.

MyZone-E dijo...

Ayuda... yo no puedo poner el codigo!??

solo modifique "EL TEXTO QUE QUIERAN"

y no me funciona. ¿el codigo va en un elemento HTML? o directo en EDICION HTML??

El Potro™ dijo...

Hola MyZone-E,

El código va dentro de un elemento HTML/Javascript. Revisa que estés copiando y pegando el código completo para que no tengas problemas.

Saludos.

it's notice dijo...

HOLA EL POTRO muchisimas gracias por esta pagina tan interesante la neta tengo poco tiempo con mi blog pero desde que conoci esta pagina hace como 3 dias mis amigos me preguntan q como consegui hacer eto, como consegui hacer aquello y les recomiendo tu pagina en fin el motivo del mensaje es para preguntarte ¿como puedo hacer para que el mensaje quede al lado del mouse? por que ya hize todo lo que dijiste pero las letra quedan muy debajo del cursor espero que puedas ayudarme gracias tengo otra pregunta me permites publicar algunos de tus ingeniosos trucos en mi blog??? gracias espero que me respondas y te des una vueltecita por mi blog www.elblogdesergiodeizamal.blogspot.com

El Potro™ dijo...

Hola It's Notice,

Muchas gracias por tus comentarios, me alegra poder ayudarte con el blog a que construyas el tuyo.
Entré a tu página y al parecer le hiciste una modificación al código del script pues no debería quedar tan abajo, además de que ya no tiene el efecto ondulante en las letras. Si te fijas en el blog de prueba que menciono en el post las letras están debajo del cursor y conservan un efecto ondulante.
Prueba copiar y pegar de nuevo el código para ver los resultados.

Claro que puedes sacar de aquí el material que creas apropiado, sólo te pido que no lo copies textualmente y/o que menciones la fuente.

Cualquier duda que tengas estoy a tus órdenes, y bienvenido a Ciudad Blogger.

Saludos.

it's notice dijo...

gracias por haberme respondido tan pronto el potro pero yo si copie el codigo tal y como aparece lo unico que le cambie fu donde dice
'EL TEXTO QUE QUIERAN' de todas formas volvere a copiarlo y pegarlo de nuevo y gracias por dejarme publicar tu material en mi blog tengo una duda mas me uni a eso del U COMENT I FOLLOW pero no se como poner el boton me lo podrias explicar xq como te dije antes soy nuevo en esto hace apenas 1 mes que tengo el blog GRACIAS!!!

El Potro™ dijo...

Hola It's Notice,

Quizá algún otro script está interfiriendo en el script del cursor.
Para poner una imagen (cualquiera que sea) puedes entrar a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega ahí esto:

<img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/SfI8tyB1obI/AAAAAAAAAvU/muM18Drk_Hc/s400/ifollowwhite.gif"/>

Si quieres cambiarlo por otra imagen, sólo cambia la URL por otra.

Saludos.

it's notice dijo...

hola el potro gracias por resolverme la duda la verdad es que no se que seria mi blog sin ti pero queria preguntarte ¿como puedo saber cual es el script que esta interfiriendo con el texto?? por que la neta me encanta que un texto siga al cursor y tambien quisiera saber ¿como puedo hacer que mi bog cargue mas rapido?? me podrias ayudar saludos

El Potro™ dijo...

Hola It's Notice,

Al parecer es la plantilla que usas la que impide que funcione correctamente el script. Te digo porque acabo de instalar esa plantilla en un blog de pruebas y también me aparecía hasta abajo las letras, sin embargo con las demás plantillas no aparece ese problema.

Para que tu blog cargue más rápido procura sólo usar los gadgets y script que creas realmente necesarios. De igual forma procura no mostrar muchas entradas en la portada, entre más entradas haya al inicio, más demorará en cargarse la página. Aunque por el momento las veces que he entrado a tu blog ha cargado a buena velocidad.

Saludos.

Policlínica Modelo dijo...

Hola, en mi blog si funciona, no me da error y si se despliega, pero, solo se desplaza por la orilla izquierda de la página, modifiqué color y velocidad, lo hice dos veces por si las dudas pero salió igual ¿que puse mal?
Gracias.

Policlínica Modelo dijo...

perdón, como referencia, mi blog es www.gentemexico.blogspot.com
:)

El Potro dijo...

Hola Policlínica Modelo,

No veo el código en tu página, de todos modos este script ha presentado problemas en algunas plantillas, por lo que en algunas funciona muy bien pero en otras no se ve como debería.

Esta semana publico otro código para lograr el mismo efecto y quizá ese te funcione mejor.

Saludos.

Jazmine Dguez. [bajo el pseudónimo de Lilith†La†Enemiga†d†Eva] dijo...

Ya lo puse y ¡me encantó! está en 'La Mansión Encantada'... hahaha, ejem, ejem... quise decir: MUAHAHA!

¡Gracias!, tus aportes se han convertido en parte fundamental de mis espacios.

Un beso,

El Potro dijo...

Jajaja, me encanta el nombre que le has puesto a tu blog y me alegra que encuentres aquí lo que necesitas para tu blog.
Besos.

El Potro dijo...

Al inicio está en color rojo donde dice EL TEXTO QUE QUIERAN
Saludos.

david dijo...

ERES EL MEJOR!!!!!!!!!!!!!!! GRACIAS LO PROBE Y ME SALIO FANTASTICO ERES EL MEJOR!!!!!!!!!!!!!!!!!!!! GRACIAS BESOS Y ABRAZOS!!!!!!!!!!!!!!!!!!!!

KarMa dijo...

gracias por los codes esta muy sencillo y digerible


* shanti

El Potro dijo...

Hola KarMa,

Me da mucho gusto que ta haya sido útil este artículo.
Saludos!

Agustina! dijo...

me encantan tus tutoriales, son muy claros
muchas gracias!!!

El Potro dijo...

Gracias, me alegra que te sean útiles y entendibles.

soco dijo...

está muy muy bueno tu blog, muchas gracias por todos tus aportes

CL dijo...

Hola te agradezco mucho las explicaciones son muy claras pero tengo un problemita al agregar letras al cursor éstas no siguen al mouse sino se desplazan por una columna hacia abajo,probé esta otra:http://ciudadblogger.com/2009/10/texto-que-sigue-al-cursor.html
y al ir al Blog solo logro verlo por unos segundos y desaparece. Espero tu respuesta para buscarle una solución.Mil gracias

El Potro dijo...

Hola CL,

Algunos de estos script suelen no funcionar adecuadamente dependiendo de la plantilla y de los scripts que haya en ella y no hay forma de echarlos a andar.
Te sugiero que mires la sección Cursores, quizá haya alguna otra opción que pueda interesarte.

Saludos.

CL dijo...

Gracias kpo,probé el cursor con destellos y quedó impecable. Agradezco tu gran ayuda para mis trabajos.

Carolina dijo...

oye ..grax..pero el texto me sale muyyyy alejado del cursor..que hago??

El Potro dijo...

Quizá tu plantilla no lo muestra como debería, te sugiero que visites la sección Cursores, ahí hay un par de opciones más para tener texto en el cursor.

CL dijo...

Hola te agradecería que puedas ayudarme en esto: tengo un blog de blogger y no quiero que debajo de cada entrada me aparezca el pie de entrada que dice: "publicado por.... la hora...etc", cómo puedo hacer?? gracias

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo