Texto que sigue al cursor

5 de octubre de 2009 87 comentarios ,
Para quienes han tenido problemas con el truco del cursor con texto en movimiento les daré otro código. Este al igual que el anterior hará que un texto persiga al cursor, sin embargo este tiene un efecto más suave al ondularse el texto. Puedes verlo funcionando en este blog de pruebas.

Entra en Diseño > Edición de HTML y 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 = "Aquí va tu texto"

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:red;
}
</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>

Sólo cambia lo que está en rojo por el texto que quieres que aparezca junto al cursor. En font-size puedes cambiar el tamaño del texto y en color para cambiar el color de las letras.


87 comentarios en:

" Texto que sigue al cursor "

  1. ¡Hola, Potro!

    Excelente artilugio. Todos los días estamos esperando ansiosamente para ver con qué nos vas a sorprender. Y la verdad es que nunca dejas de sorprendernos. ¡Felicidades!

    Chao. Un abrazo.

    ResponderEliminar
  2. Hola Eduardo,

    Muchas gracias por estar siempre al pendiente de los artículos de aquí.

    Te mando un fuerte abrazo!

    ResponderEliminar
  3. Hola hola

    muy bueno el truco me fascino potro

    visita mi nuevo blog no es lo mejor pero ahi voy
    http://alexgonzalez1.blogspot.com/

    ResponderEliminar
  4. Hola Alex, me gusta esa plantilla =)

    ResponderEliminar
  5. http://btemplates.com/2009/09/30/marikit/

    ahi esta

    ResponderEliminar
  6. Potro!!Esta buenisimo,pero tengo un problema,al poner eso se me altero el titulo del blog en movimiento,entra a http://losbartolosanchorena.blogspot.com/ y si lo podes solucionar me lo decis??gracias!!!

    ResponderEliminar
  7. Hola Emanuel Martinez,

    Intenta modificar la velocidad del título del blog en movimiento, busca en el código de ese script esta parte:
    var espera=100;
    Cámbialo por 200, quizá con eso se regularice, sino funciona podrías usar el otro código del texto que sigue al cursor:
    http://ciudadblogger.com/2009/03/cursor-con-texto-en-movimiento.html

    O bien, puedes intentar usar otro tipo de titulo del blog en movimiento:
    http://ciudadblogger.com/2009/08/titulo-del-blog-en-movimiento-ii.html
    http://ciudadblogger.com/2009/09/mensajes-en-la-barra-de-titulo.html

    Saludos.

    ResponderEliminar
  8. Gracias potro!!!Me sirvio,y otra cosa,no se le puede cambiar el tipo de letra??

    Salu2

    ResponderEliminar
  9. Sí, donde dice font-family:Arial puedes cambiarlo por otra, por ejemplo Impact

    Saludos.

    ResponderEliminar
  10. Muchisimas Gracias Potro!!!Granmente me as solucionada todos los problemas y curiosidades que e tenido y ayudarme a personalizar my blog!!!Segui asi,estas en buen camino!!!

    Salu2

    ResponderEliminar
  11. Hola Potro, verás, sí me funcionó pero en realidad sólo puedo ver las letras al margen del blog y no al centro; es decir, en los post... Sólo se pueden visualizar al margen :C

    este es mi blog:

    http://porphyos.blogspot.com/

    ResponderEliminar
  12. Bueno, en realidad ya no importa... ya lo quité :C

    ResponderEliminar
  13. ya quedo!!!
    lo intenté con el otro código que expusiste, y ese me ha quedado genial!!!
    gracias por tener opciones
    saludos

    chau

    ResponderEliminar
  14. Hola RIDDLE,

    Estos script tienden a fallar dependiendo de la plantilla por eso siempre es bueno tener más opciones. Me alegra que la segunda te haya funcionado.

    Saludos.

    ResponderEliminar
  15. y que significa la parte de

    //no soportado, no hace nada

    ????

    ResponderEliminar
  16. Significa que si el navegador no soportara el script sencillamente no haría nada.
    Saludos.

    ResponderEliminar
  17. Gracias capo ss un Genia

    La verdad te felicito, algun dia me gustaria ser como vos

    Un Abrazo

    ResponderEliminar
  18. Gracias a ti por tus comentarios.
    Un abrazo!

    ResponderEliminar
  19. Casi al final del código está en negrita esta parte:

    color:red;

    Ahí cambia el red por el código del color que quieres.
    Saludos.

    ResponderEliminar
  20. gracias potro sos grande me lo instalo altiro
    saludos.

    ResponderEliminar
  21. Amigo esta idea esta excelente. pero con mi plantilla (la cual me gusta tambien) el texto sale muy alejado del cursor. Sera que hay la forma de hacerle algo al codigo que cambie esto. Tu eres un genio.. Ayudame.

    http://mercantil-viajes.blogspot.com/

    actualmente se lo tengo desactivado

    ResponderEliminar
  22. En algunas plantillas sucede eso con algunos cursores. Podrías ver otras opciones en la sección Cursores, quizá haya alguna que te funcione.

    ResponderEliminar
  23. MUCHAS GRACIAS POTRO ... YA PROBE VARIOS QUE SI FUNCIONAN CON LA PLANTILLA. EXCELENTE TU PAGINA .. GRACIAS POR COMPARTIR TUS CONOCIMIENTOS CON EL MUNDO .. HASTA UNA NUEVA OPORTUNIDAD .. SALUDOS DESDE VENEZUELA

    ResponderEliminar
  24. ¡Bien! Sabía que alguno de esos te iba a gustar.
    ¡Saludos hasta Venezuela!

    ResponderEliminar
  25. Hola, genial todo su contenido.
    Probé este truco, y me salió bien solo que aparece únicamente detrás del blog, es decir, en el fondo.
    Para entenderme vean mi blog.
    Lo puse delante de "head", todo perfecto..
    ¿ayuda? Gracias.

    ResponderEliminar
  26. Dentro del código que has puesto busca esta parte:

    .cursoranimado {

    Debajo de él agrega esto:
    z-index: 5;

    Saludos.

    ResponderEliminar
    Respuestas
    1. Gracias me sirvio de mucho estaba revisando las respuestas por si habia el mismo error que tenia y lo encontre eres un genio

      Eliminar
  27. Hola Potro! tuve un problema con este truco. Las letras me funcionaron perfectas. PERO SOLO SE VEN EN EL FONDO... no las puedo ver en "la parte frontal" de mi blog. Que puede ser?

    ResponderEliminar
  28. mi blog es elexpresodeamerica.blogspot.com

    ResponderEliminar
  29. Eso sucede en ese tipo de plantillas, prueba con la solución que recomiendo en el comentario anterior al tuyo.

    ResponderEliminar
  30. Gracias!! perdón por no leer los coments anteriores

    ResponderEliminar
  31. Eres genial!!!

    La primera vez me salia tras la plantila como a otros, pero puse la solucion que dijiste y ningun problema, se ve estupendo.

    Gracias, te adoro, me has solucionado la vida...
    todos tus post son sensacionales...

    Rocio.

    ResponderEliminar
  32. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  33. Hola potrooo, esta muy bueno, lo logre hacer, y pude cambiar el texto las veces que quice, pero le queria cambiar el texto y la plantilla no me dejaba realizar cambios, directamente no me mostraba la vista previa, espero qe haya una solucion por que me gustaba mucho :(
    desde ya gracias

    ResponderEliminar
  34. Hola potro, soy la misma de arriba, logre hacerlo desde un garget, pero me queda muy alejado del mouse, que deberia hacer para que quede alado? y para cambiarle el tamaño de la fuente?

    ResponderEliminar
  35. Hola Pamela,

    En la Edición de HTML ahora no se puede hacer nada por un problema debido a Blogger:
    http://www.facebook.com/fans.ciudadblogger/posts/186025204766631

    El tamaño de la fuente ahí al final de la entrada se indica cómo cambiarlo. Respecto a la distancia eso sucede con algunas plantillas, ahí no hay mucho qué hacer, lo recomendable en esos casos sería usar alguno de los otros métodos que se mencionan al inicio de la entrada.

    Saludos.

    ResponderEliminar
  36. MUCHISIMAS GRACIAS, sabes cuanto tiempo durara el problema con respecto a la plantilla? voy a poder utilizar el mouse cunado se arregle el problema ?

    ResponderEliminar
  37. No tengo idea cuánto dure, desde ayer en la noche empezó pero se supone que ya están trabajando en ello, será cuestión de esperar.

    ResponderEliminar
  38. muchisimas gracias, te agradezco la ayuda :) tendre que esperar entonceeees :D

    ResponderEliminar
  39. perdon, te hago otra consulta, hay alguna manera de que el fondo del blog cambie de color, por ejemplo en gama de los rosas ?

    ResponderEliminar
  40. Tal vez te interese esta opción:
    http://ciudadblogger.com/2009/01/color-de-fondo-del-blog-aleatorio.html

    ResponderEliminar
  41. Hola Potroo :)
    vuelvo a i por que siempre me respondes con lo necesario,
    tendrias algun cursor que deje rastro de una lluvia de estrellas?
    desde ya gracias

    ResponderEliminar
  42. Hola pamela,

    El único que tengo parecido es este cursor con destellos.

    Gracias por la confianza ;)

    ResponderEliminar
  43. hola otra vez, tienes alguna opccion que sea como que haya nieve constantemente ,que no dependa del mouse, en el fondo, o en todo el blog?

    ResponderEliminar
  44. nieve, u hojas de otoño en preferencia
    Gracias por la pacienciaa :D

    ResponderEliminar
  45. En el menú busca la sección Festividades, ahí encontrarás algunos cuantos.

    ResponderEliminar
  46. hola que tal yo tengo un problemas y es que el texto se sale muy separado de la flechita :( estoy desesperada porque se me hace un muy buen efecto y no me sale..lo quise probar en mi blog de pruebas porque en el mio no se pudo y fue lo mismoo :(! quisiera presentar este truco en mi blog claro con sus respectivos creditos n.n pero si no me sale a mi no lo puedo recomendar.. me ayudas?

    ResponderEliminar
  47. En algunas plantillas no funciona. Te sugiero que visites la sección Cursores para que mires otras opciones.

    ResponderEliminar
  48. muchas gracias por tu pronta respuesta n.n si o es mucha molestia me podrias decir en cuales funciona? ^.^

    ResponderEliminar
  49. holaaa antes habia escrito ..pero hoy si estoy desesperada :(:( no se que pasa con mi plantilla o con el navegador ayy no see..te cuento:

    antes todo lo que ponia por jemplo este truco del cursor salia a la perfeccion pero ahora ya nooo, pense: debe ser mi plantilla pues la he modificado mucho, entonces saque una nueva cuenta para pruebas de mi blog(con una plantilla nueva de bloger sin nada de modificaciones)oki entonces para mi sorpresa buuuaa que sigue igual.. osea la imagen,el texto o cualquier cosa que le ponga para el cursor sale supeer separado del cursor, ya lo revise con otro navegador (IE) pues yo uso solo mozilla pero es lo mismo, sigue saliendo separado y ya no se que hacer. De verdad necesito arreglar ese problema pues hay algunas cosas que quiero presentar (por ejemplo este truco) por supuesto poniendo los respectivos creditos ^-^ !! y bueno por fis me puedes ayudar??

    si gustas agregarme al msn esta es mi dire x_girl.kawaii_x@hotmail.com nada mas paciencia conmiwo aveces soy muy tontis :S!!

    gracias

    ResponderEliminar
  50. En todas las plantillas que sean hechas a través del Diseñador de plantillas de Blogger se verá de ese modo. Si pruebas hacerlo en una plantilla clásica como la Mínima de Blogger verás que eso no sucede. Por eso te había dicho antes que en algunas plantillas no funciona.

    Saludos.

    ResponderEliminar
  51. pero es que ya intennte en la minima tambien :(

    ResponderEliminar
  52. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  53. mejor lo olvidooo :( muchas gracias y sorry por tantas molestias :(! ojala algun dia te pases por mi blog n.nya que pondre algunos de tus trucos (espero no te moleste) y hare mencion de tu blog ^-^!!

    besitos

    ResponderEliminar
  54. Gracias por compartir tus saberes, soy novata en esto de blog..pero tus indicaciones muy claras, asi que logre solucionar el problema de cursor.Bye

    ResponderEliminar
  55. Gracias a it por tu visita, qué gusto que encuentres útil la información de este blog ;)

    ResponderEliminar
  56. hola potro primero para felicitarte por tus tutorias son lo mejor... por otra parte soy nuevo en blogger y lo he hecho con respecto a mi oficio soy enfermero... puse el texto a seguir el cursor y ahora ya no lo quiero me regalas el tip... y otra cosa me gustaría que vieras mi blog y me aconsejes que modificaciones le hago la verdad me gustan las cosas bn hechas mi blog es:
    http://enfermerosvanguardistas.blogspot.com/
    saludos desde Colombia

    ResponderEliminar
  57. Hola Diego,

    Muchas gracias por tu amable comentario.
    Me sería muy difícil aconsejarte respecto a las modificaciones ya que cada blog es único y lo más importante es que sea al gusto del autor del blog.
    Para eliminar el truco del cursor sólo busca antes de </head> el mismo código que has agregado y elimínalo, ese es el procedimiento tanto para este como cualquier otro truco que ya no quieras, sólo identifica los códigos que se agregaron y quítalo.

    ¡Saludos hasta Colombia!

    ResponderEliminar
  58. Hermoso! GRACIAS POR TUS TUTORIALES, EL DE LA LETRAS NO ME SALIO Y LO INTENTE CON LOS DESTELLOS Y LISTO! saludos

    ResponderEliminar
  59. Qué gusto que ha sido de tu agrado :)

    ResponderEliminar
  60. hola te hago una pregunta, se puede hacer que no puedan copiar tus fotos?
    desde ya gracias

    ResponderEliminar
  61. Mira esta entrada:
    http://ciudadblogger.com/2009/05/protege-tus-imagenes.html

    O esta otra:
    http://ciudadblogger.com/2009/10/como-evitar-que-te-copien-imagenes-y.html

    ResponderEliminar
  62. Hola Potro! Seguí tus pasos pero el texto que sigue a mi cursor solo se ve en los laterales, no en el medio. ¿Estoy haciendo algo mal?
    xoxo

    ResponderEliminar
  63. Hola Isabella,

    Es por la plantilla que usas, en esas plantilla no queda muy bien. Te recomiendo que visites la sección cursores para que veas otras opciones que quizá te puedan interesar. Saludos.

    ResponderEliminar
  64. Eres realmente EL MEJOR!... llevo días buscando pero nadie EXPLICA COMO TU!!!... MIL GRACIAS!... en lo sucesivo vendré directo a tu site!... =)

    ResponderEliminar
  65. Muchas gracias Jenna, es gratificante saber que este contenido es útil para alguien :)

    ResponderEliminar
  66. Me funcionó genial. Aunque en el fondo de las entradas no se vea, queda bien.
    Todos tus tutos me están funcionando grax.
    Salu2.
    nf8nacho.blogspot.com

    ResponderEliminar
    Respuestas
    1. Qué gusto que sean de tu agrado las entradas de este blog, saludos!

      Eliminar
  67. Potro lo he puesto pero me sale el texto debajo del rectangulo transparente de las entradas, he probado el otro con la actualización y sin la actualización y no lo acepta, que puedo hacer??
    te lo dejo para que lo mires:
    http://apocalipsiszombiearmasidemas.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. En realidad la actualización es sólo para que el texto no esté tan separado del cursor. El problema de esas plantillas que usan muchos z-index así que hacen que esas capas estén por encima de lo demás, incluyendo el texto que sigue al cursor.

      Eliminar
  68. http://aguusalarcon.blogspot.com.ar/ mira ese es mi blog, y el texto aparece atras de las entradas, como hago para que no pase eso ?

    ResponderEliminar
  69. Hola tengo un wordpress, pero no me ha querido funcionar. Usted sabría?

    ResponderEliminar
    Respuestas
    1. Únicamente pruebo los códigos en Blogger, desconozco si funcionen para otras plataformas.

      Eliminar
  70. hola Potro, mi problema es que las letras quedan muy lejos de el puntero, podría estar mas cerca de él? Así es como me queda
    http://one-day-in-house.blogspot.com.es/

    ResponderEliminar
  71. bueno, dejalo, he descubierto que es por la plantilla xd
    Gracias de todas formas

    ResponderEliminar
  72. Hola, tengo un problema con este texto y es que se me va debajo de lo que es el cuerpo del blog, donde pongo las entradas y no se como hacer para que se vea por encima :S

    ResponderEliminar
    Respuestas
    1. En el blog desperateknifeclove.blogspot.com

      Eliminar
    2. Dentro del código que has puesto busca esta parte:

      .cursoranimado {

      Debajo de él agrega esto:
      z-index: 5;

      Saludos.

      Eliminar
    3. Muchaas gracias, ahora está perfecto :)

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger