Texto que sigue al cursor en forma giratoria

2 de febrero de 2010 81 comentarios ,
Ya hemos visto dos formas de poner un texto que sigue al cursor pero este en especial me gusta mucho por el efecto que tiene.
Se trata de un script de Tim Tilton que hace que el texto persiga al cursor pero en forma giratoria; cuando el cursor se mueve el texto lo sigue en forma ondulante y al detenerse gira alrededor del cursor. Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sólo basta entrar en Plantilla | Edición de HTML y antes de </head> pegar lo siguiente:
<style type='text/css'>
/* Texto giratorio que sigue al cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Tipo de letra */
color: #000; /* Color del texto */

/* No editar esta area */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Mensaje
var msg = "Bienvenido a Ciudad Blogger";

// Tamaño de la letra
var size = 22;

// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;

// Espacio entre cada letra
var letter_spacing = 5;

// Diametro del circulo
var diameter = 10;

// Velocidad de rotacion
var rotation = 0.4;

// Velocidad de reaccion
var speed = 0.3;

////////////////////// No editar nada mas //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>

Cambia lo que está en color rojo por el mensaje que quieres mostrar. Puedes modificar el tamaño del texto, tipo de letra, color, velocidad, etc. He traducido al español las anotaciones (color verde) para que puedas personalizarlo a tu gusto, sólo localiza el área correspondiente para hacer el cambio.
Recuerda que para que este tipo de "monerías" funcionen no debes tener muchos scripts en tu página, sino es posible que alguno deje de funcionar.


81 comentarios en:

" Texto que sigue al cursor en forma giratoria "

  1. Que lindo efecto Bro! Y como si fuera poco en las primeras lineas de cod, se pueden personalizar casi todas las variables!

    Sólo te falta un truco de cursor... se llama "cursor indomable". Lo que hace es no permitirte que lo manejes hasta que no haces algún clic en los anuncios (eso si, no se como harás el clic ya que no deja que lo manejes, eso te lo dejo a ti XD) jajajajajajajajajja...

    Un abrazo!!!

    ResponderEliminar
  2. Muy bueno Potro!!!
    El maestro del HTML sos!!!
    Abrazo grande!!!

    ResponderEliminar
  3. Holaa!
    Bueno, aqui Potro siempre sorprendiendonos con sus trucos!

    Y te confieso que he pasado mas de 5 minutos jugando con las letras en el blog de pruebas, asi que veo buena forma de aumentar el tiempo que se quedan las visitas en nuestros blogs xDxD

    Saludos!!

    ResponderEliminar
  4. Jajajajajajajjajajaja...eso que dice Dj Nestor es verdad... yo también me puse a jugar un buen rato con las letras, de modo que su teoría de mantener a los usuarios en el sitio si que parece válida XD...

    ResponderEliminar
  5. bro, "cursor indomable" jajajajajajajajaja, ¿no la indomable le dicen a Katty?

    Pozo+10, para nada, yo sólo me encontré el script de Tim Tilton y se los muestro a ustedes ;)

    Dj Nestor, la verdad es que sí, y entre más mueves el cursor de un lado a otro más interesante se pone :D

    ResponderEliminar
  6. Jajajajajajjajajajaja...esa es indomable, hasta que le dejas tocar el "cursor" XD jajajajajjajajajaja....

    Creo que me estoy enamorando jajajajajajajajajajjajajajaja


    Un abrazo!!!

    ResponderEliminar
  7. jajajajajajajajajajajajaja
    jajajajajajajajajajajajaja

    Eso no es amor brother, es lujuria pura.

    ResponderEliminar
  8. Upppsss...tienes razón, a veces me confundo :(

    jejejejejejejje....Muhahahahahahahaha!!!! (risa de depravado sexual) XD

    Un abrazo!!!

    ResponderEliminar
  9. ¿Qué será peor que un depravado?
    Ah sí, un depravado con un rifle!
    Jajajaja.

    Un abrazo!

    ResponderEliminar
  10. Muy buno.

    estuve jugando con las letras un rato a ver si me seguian jaja.

    saludos.

    ResponderEliminar
  11. JAjajajajajajajajajajajajjajajajaj... no puedo para de reirme!!!!! XD

    creo que ya no tengo remedio.....

    Muchas gracias por el gran humor!

    ResponderEliminar
  12. El Venado, si crees que las letras te siguen a todos lados eso ya es paranoia, jajaja.

    bro, definitivamente no tienes remedio :P

    ResponderEliminar
  13. Queda muy bien el efecto, es genial!
    Me gusta como gira, jajaja, de seguro veré millones de blogs utilizando este efecto... Aunque... ya vi millones utilizando el anterior...

    Bueno, nos vemos!

    ResponderEliminar
  14. Pues a quienes les guste poner textos en el cursor seguro les encantará :)
    Saludos!

    ResponderEliminar
  15. He!!!!, esta muy bueno el efectito giratorio, solamente, que ese texto me esta callendo mal por que cuando muevo el mouse quiero llegar a la ultima letra y no puedo XD,(paresco un perro queriendo atrapar su cola xD).
    Pero bueno en fin, me gusto mucho.
    Ah y te comento me tope con esta cancion de la fifa en youtube. esta muy buena!:

    http://www.youtube.com/watch?v=16rprAAOT2g

    mmm tambien te dejo mi lista de kienes seran los que llegaran a las finales xD en la Fifa:

    Brasil
    Argentina
    mexico
    españa
    alemania
    italia

    Bueno esa es mi conclusion. Talvez ahora te estes preguntando:
    Pero que rayos me interesa saber quienes llegaran a la finales de la Fifa?, jajajaja bueno mmm solo se lo kise contar a alguien.
    xD
    Saludos!
    Porcierto, me encanto el efecto.

    ResponderEliminar
  16. JAJAJAJAJAJAJAJAJAJA, algo así me estaba preguntando, JAJAJAJJAJAJAJA. No te creas :P

    Ya te he imaginado tratando de alcanzar la última letra, JAJAJAJAJAJAJAJAJAJAJA.

    Ya me sacaste la sonrisa de la tarde :D

    Un abrazo!

    ResponderEliminar
  17. Hola. muy buen script, pero tengo un problema.
    Me sale esto al ponerlo:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "head" must be terminated by the matching end-tag "".

    Si pudieras ayudarme me harias un gran favor, esta muy bien...

    Gracias y Salu2

    ResponderEliminar
  18. Es un efecto bonito.
    Pero al final tanto script tanto script te ralentizan mucho la pagina.
    Gracias y un saludo

    ResponderEliminar
  19. Fran, ese mensaje indica que estás poniendo mal el código, intenta hacerlo de nuevo poniéndolo justo antes de la etiqueda < /head >

    Gildo Kaldorana, completamente de acuerdo, supongo que quienes no tienen tantas cosas pueden usarlo sin ningún problema, saludos!

    ResponderEliminar
  20. OoOoOoRale esta Buenisimo, me quede jugando un rato xD
    muy bueno ehh!

    ResponderEliminar
  21. Jajaja, sí está bastante entretenido :)

    ResponderEliminar
  22. Potro nesecito tu ayuda.

    Este blog tiene los enlaces de la sidebar a la derecha que hay que hacer para alinearlos

    http://pruebasltp.blogspot.com/

    ResponderEliminar
  23. ¿Qué cambio hiciste antes de que se moviera la sidebar?

    ResponderEliminar
  24. Esto está genial, es como las animaciones con flash.
    He estado probando con insertar prediseñados .swf en las Entradas y es bien interesante, claro, toca enredarse con flash pero vale la pena.
    ¿Tienes alguna recomendación para esto?

    ResponderEliminar
  25. Hola
    ¿cómo se hace lo del gadget días de vida, entradas y comentarios? Lo de la ciudad tiene...
    Muchas gracias.

    ResponderEliminar
  26. Genial efecto el potro lo implemente en el Blog pero no podia clikear sobre los links asi que lo quite si hay alguna forma de que esto no suceda por favor hazmela saber por que en serio me gusta el efecto ok

    ResponderEliminar
  27. ABRIL, de flash no sé nada, pero seguro PepeX podrá orientarte sobre cómo usar el programa.

    MN, en este enlace puedes ver cómo poner el gadget de estadísticas.

    Clan Russo, pues sólo es procurar que el texto del cursor no se encime sobre un link al hacer click sobre él.

    ResponderEliminar
  28. Muy buenos tutoriales, los acabo de ver.
    Mil gracias por la sugerencia.

    ResponderEliminar
  29. Muy buen truco me encanta, genial, eres grande y todo lo que le sigue y por eso te queria pedir permiso para poder utilizar los codigos de tus entradas ya que quiero crear una nueva seccion en mi blog que se llama Diseño Web Facil ok me avisas al blog por favor http://clanrusso.blogspot.com

    ResponderEliminar
  30. una duda ms ¿como puedo crear una direccion de correo electronico como la que tienes? que sea por ejemplo admin@clanrusso.com; gracias se agradece la ayuda

    ResponderEliminar
  31. Hola Clan Russo,

    No hay problema si son sólo los códigos.
    Para tener tu correo de esa forma necesitas tener tu dominio propio (de pago).

    Saludos.

    ResponderEliminar
  32. Lo conseguí, estoy que ni me lo creo!!! por fin me funciona!! gracias!!! :)

    ResponderEliminar
  33. Qué bueno que ya funciona a la perfección ;)

    ResponderEliminar
  34. Hola El potro yo soy nuevo en esto de los blogs, gracias por el truquito, es muy adictivo jugar con el cursor.
    Por otro lado; me gustaría saber si se puede acomodar mi blog en tres columnas o cómo se pueden ensanchar las columnas de los gadgets, es que tengo un reproductor en mi página pero no hay espacio para que salga completo
    De antemano muchas gracias.
    Si quieres darte una vuelta por mi blog:
    metalmetalrovazcas.blogspot.com

    ResponderEliminar
  35. Hola Rovazcas,

    Busca donde dice:
    #outer-wrapper {
    width: 660px;

    Cambia los 660px por 770px

    Luego busca un poco más abajo esto:
    #sidebar-wrapper {
    width: 220px;

    Cambia donde dice 220px por 330px.
    Dale vista previa y fíjate que todo esté bien.
    Con eso tendrás una sidebar más ancha, lo cual es mucho más sencillo que agregar otra sidebar.

    Saludos.

    ResponderEliminar
  36. Muchísimas gracias, ya me ayudaste a que se vea mejor la sidebar y también me resolvise otras dudillas.
    No sé si lo que dicen arriba de tí es verdad pero de que me ayudaste, me ayudaste bastante
    Gracias de nuevo

    ResponderEliminar
  37. Por nada, en lo que pueda te echaré la mano.
    Saludos.

    ResponderEliminar
  38. hola no puedo poner niuna de las cosas como las flechitas y el cursor de letras me ayudan ??

    ResponderEliminar
  39. Si lo quieres poner en el blog donde el título está en movimiento lo más seguro es que no funcione, generalmente no son compatibles.
    Inténtalo en otro blog.

    Saludos.

    ResponderEliminar
  40. Muchas gracias me ha gustado mucho, pasen a mi blog para ver como me quedo

    Http://themad6k.blogspot.com

    ResponderEliminar
  41. Lo acabo de poner y me gusta muchisimas gracias por todo lo que nos enseñas a los nuevos en esto.
    si desean dar un vistazo a mi blog:

    http://brujo5-iphone.blogspot.com/

    ResponderEliminar
  42. Voy a empezar a creer que es SPAM... ¬¬

    ResponderEliminar
  43. ¡Gracias por toda la ayuda que brindas en este blog! Me gusta mucho como funciona este efecto con el cursor.

    ResponderEliminar
  44. Gracias a ti por tu visita, un saludo!

    ResponderEliminar
  45. H0Oola yo tengo muchisima informacion de todo y dond
    pueden conseguir cosas gratis q se los dejan en la puerta de sus casas asi como el disko d ubuntu

    http://djlockerz.blogspot.com

    ResponderEliminar
  46. No quiero pensar que es SPAM así que sólo por esta vez no eliminaré el comentario...

    ResponderEliminar
  47. Hola un saludo..me encanta esta pagina y el truco del cursor es estupendo pero no puedo colocarlo me da error como al compañero Fran.Vale para todo tipo de plantillas,lo comento porque tengo una plantilla de Blogger Templattes y aun colocando "antes" de
    quiero mirar la vista previa y no me deja...¡¡que hago mal¡¡...gracias por tu ayuda y un saludo.

    ResponderEliminar
  48. No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type "style" must be followed by either attribute specifications, ">" or "/>"....este es el error que me da en pantalla....el problema es mio por que no lo "instalo" bien o es cosa de la plantilla.Gracias por yu ayuda y un saludo.

    ResponderEliminar
  49. Pues el error indica que no estás poniendo el código completo, repite el paso de nuevo y verifica que esté donde se indica en la entrada.

    Saludos.

    ResponderEliminar
  50. AHHHHHHH¡¡¡¡¡¡...no hay manera...llevo media mañana y nada....probare mas tarde...gracias y un saludo

    ResponderEliminar
  51. Seguro debe ser un pequeño detalle que estás omitiendo :\

    ResponderEliminar
  52. Hola volvi a intentarlo y salio a la primera,el herror anterior era mio.Ahora queda genial muchas gracias por tu ayuda y pro tus consejos.Un saludo.

    ResponderEliminar
  53. Qué gusto que ya lo hayas podido aplicar con éxito :)

    ResponderEliminar
  54. Mira aquí:
    http://ciudadblogger.com/2010/03/codigos-de-colores-hexadecimales.html

    ResponderEliminar
  55. Hola me podrian ayudar la vdd no le entendi jaja xD

    qkiero qke diga
    By peqke
    letra
    Century Gothic 22
    qkolor
    CD0074
    OVLADO O CIRCULA ¿?
    ovalado
    espacio entre cada letra
    .5
    diametro del circulo
    10
    velocidad de rotacion
    0.4
    velociada de reaccion
    0.3


    porfa me ayudan ¿?

    ResponderEliminar
  56. Hola peqke_alvarez,

    Lo único que tienes que hacer es poner tu mensaje en la parte de color rojo, ahí pones lo que quieras que diga el texto que seguirá al cursor.

    ResponderEliminar
  57. Espectacular, Potro!!! MUCHAS GRACIAS!!! Después de probar dos de los códigos que publicaste, éste funcionó de maravillas. te dejo mi link para que lo veas:

    http://decantarosycantares.blogspot.com/

    ResponderEliminar
  58. Excelente Monipal, me alegro que te haya resultado bien :)

    ResponderEliminar
  59. Sí, se cambia donde se indica:
    color: #000; /* Color del texto */

    ResponderEliminar
  60. estoy hace rato buscando el head y no lo encuentro ¬ en qe parte está? graciaas!

    ResponderEliminar
    Respuestas
    1. Usa las teclas CTRL + F, así te será más fácil localizar el código. Saludos.

      Eliminar
  61. y si lo quiero eliminar que debo eliminar o sustituir? para que aparezca normal.
    Estoy buscando el codigo que puse, pero ahora no me aparece por ningun lado.
    El blog es www.clubfkg.blogspot.com a ver si puedes ayudarme, como veras tengo mil cosas sacadas de aqui jajaja

    ResponderEliminar
  62. solucionado, vi que era un gadget en html y no en la edicion de plantilla

    ResponderEliminar
  63. es un codigo que si me funciono no como en otras paginas que no sirven :/ graciaaaaaas :)

    ResponderEliminar
  64. Hola amigo, muchas gracias por este código, mi pagina me a quedado genial, una cosa, como puedo modificar la velocidad para hacer que gire mas lento?
    Gracias

    ResponderEliminar
  65. Ya vi donde se cambia la velocidad jaja, no me fije antes, losento :)

    ResponderEliminar
  66. HOLA soy freddy el mismo que te comento en la otra pagina, por favor me decis si se puede hacer que con un boton cerca del header se habilite la opcion de tener las letras girando y con otro boton se vuelva a inhabilitar. debe ser bastante dificil pero se te agradece de antemano...

    ResponderEliminar
  67. Potro esta muy bueno, pero un poco molesto a la hora de leer algo dx
    (y)

    ResponderEliminar
  68. Hola Potro, tengo el script en mi blog, pero quiero cambiar el texto y con los nuevos cambios no encuentro donde. Me podrías dar una mano. gracias....

    ResponderEliminar
    Respuestas
    1. Sólo entra en la Edición de HTML y busca el código, si ahí lo pusiste ahí podrás cambiar el texto.

      Eliminar
  69. Buenas,
    Se que ha pasado mucho tiempo desde que se hizo este artículo y no se si me responderas, pero pruebo por si acaso. Me gustaría conseguir ese efecto, pero que el texto girara en una posición fija alrededor de un botón. ¿ Es posible?. Muchas gracias.

    Saludos

    ResponderEliminar
  70. Donde configurar o como evitar que al final (en la parte de abajo) de la ventana se active o se mueva la barra de desplazamiento...Saludos. Gracias por todo Rafael J I

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger