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.
Que lindo efecto Bro! Y como si fuera poco en las primeras lineas de cod, se pueden personalizar casi todas las variables!
ResponderEliminarSó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!!!
Holaa!
ResponderEliminarBueno, 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!!
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...
ResponderEliminarbro, "cursor indomable" jajajajajajajajaja, ¿no la indomable le dicen a Katty?
ResponderEliminarPozo+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
Jajajajajajjajajajaja...esa es indomable, hasta que le dejas tocar el "cursor" XD jajajajajjajajajaja....
ResponderEliminarCreo que me estoy enamorando jajajajajajajajajajjajajajaja
Un abrazo!!!
jajajajajajajajajajajajaja
ResponderEliminarjajajajajajajajajajajajaja
Eso no es amor brother, es lujuria pura.
Upppsss...tienes razón, a veces me confundo :(
ResponderEliminarjejejejejejejje....Muhahahahahahahaha!!!! (risa de depravado sexual) XD
Un abrazo!!!
¿Qué será peor que un depravado?
ResponderEliminarAh sí, un depravado con un rifle!
Jajajaja.
Un abrazo!
Muy buno.
ResponderEliminarestuve jugando con las letras un rato a ver si me seguian jaja.
saludos.
JAjajajajajajajajajajajajjajajajaj... no puedo para de reirme!!!!! XD
ResponderEliminarcreo que ya no tengo remedio.....
Muchas gracias por el gran humor!
El Venado, si crees que las letras te siguen a todos lados eso ya es paranoia, jajaja.
ResponderEliminarbro, definitivamente no tienes remedio :P
Queda muy bien el efecto, es genial!
ResponderEliminarMe gusta como gira, jajaja, de seguro veré millones de blogs utilizando este efecto... Aunque... ya vi millones utilizando el anterior...
Bueno, nos vemos!
Pues a quienes les guste poner textos en el cursor seguro les encantará :)
ResponderEliminarSaludos!
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).
ResponderEliminarPero 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.
JAJAJAJAJAJAJAJAJAJA, algo así me estaba preguntando, JAJAJAJJAJAJAJA. No te creas :P
ResponderEliminarYa te he imaginado tratando de alcanzar la última letra, JAJAJAJAJAJAJAJAJAJAJA.
Ya me sacaste la sonrisa de la tarde :D
Un abrazo!
Hola. muy buen script, pero tengo un problema.
ResponderEliminarMe 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
Es un efecto bonito.
ResponderEliminarPero al final tanto script tanto script te ralentizan mucho la pagina.
Gracias y un saludo
Fran, ese mensaje indica que estás poniendo mal el código, intenta hacerlo de nuevo poniéndolo justo antes de la etiqueda < /head >
ResponderEliminarGildo Kaldorana, completamente de acuerdo, supongo que quienes no tienen tantas cosas pueden usarlo sin ningún problema, saludos!
OoOoOoRale esta Buenisimo, me quede jugando un rato xD
ResponderEliminarmuy bueno ehh!
Jajaja, sí está bastante entretenido :)
ResponderEliminarPotro nesecito tu ayuda.
ResponderEliminarEste blog tiene los enlaces de la sidebar a la derecha que hay que hacer para alinearlos
http://pruebasltp.blogspot.com/
¿Qué cambio hiciste antes de que se moviera la sidebar?
ResponderEliminarEsto está genial, es como las animaciones con flash.
ResponderEliminarHe 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?
Hola
ResponderEliminar¿cómo se hace lo del gadget días de vida, entradas y comentarios? Lo de la ciudad tiene...
Muchas gracias.
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
ResponderEliminarABRIL, de flash no sé nada, pero seguro PepeX podrá orientarte sobre cómo usar el programa.
ResponderEliminarMN, 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.
Muy buenos tutoriales, los acabo de ver.
ResponderEliminarMil gracias por la sugerencia.
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
ResponderEliminaruna 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
ResponderEliminarHola Clan Russo,
ResponderEliminarNo hay problema si son sólo los códigos.
Para tener tu correo de esa forma necesitas tener tu dominio propio (de pago).
Saludos.
ok muchas gracias
ResponderEliminarLo conseguí, estoy que ni me lo creo!!! por fin me funciona!! gracias!!! :)
ResponderEliminarQué bueno que ya funciona a la perfección ;)
ResponderEliminarHola El potro yo soy nuevo en esto de los blogs, gracias por el truquito, es muy adictivo jugar con el cursor.
ResponderEliminarPor 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
Hola Rovazcas,
ResponderEliminarBusca 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.
Muchísimas gracias, ya me ayudaste a que se vea mejor la sidebar y también me resolvise otras dudillas.
ResponderEliminarNo sé si lo que dicen arriba de tí es verdad pero de que me ayudaste, me ayudaste bastante
Gracias de nuevo
Por nada, en lo que pueda te echaré la mano.
ResponderEliminarSaludos.
hola no puedo poner niuna de las cosas como las flechitas y el cursor de letras me ayudan ??
ResponderEliminarSi 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.
ResponderEliminarInténtalo en otro blog.
Saludos.
Muchas gracias me ha gustado mucho, pasen a mi blog para ver como me quedo
ResponderEliminarHttp://themad6k.blogspot.com
Qué bueno que te ha gustado :)
ResponderEliminarLo acabo de poner y me gusta muchisimas gracias por todo lo que nos enseñas a los nuevos en esto.
ResponderEliminarsi desean dar un vistazo a mi blog:
http://brujo5-iphone.blogspot.com/
Voy a empezar a creer que es SPAM... ¬¬
ResponderEliminar¡Gracias por toda la ayuda que brindas en este blog! Me gusta mucho como funciona este efecto con el cursor.
ResponderEliminarGracias a ti por tu visita, un saludo!
ResponderEliminarH0Oola yo tengo muchisima informacion de todo y dond
ResponderEliminarpueden conseguir cosas gratis q se los dejan en la puerta de sus casas asi como el disko d ubuntu
http://djlockerz.blogspot.com
No quiero pensar que es SPAM así que sólo por esta vez no eliminaré el comentario...
ResponderEliminarHola 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
ResponderEliminarquiero mirar la vista previa y no me deja...¡¡que hago mal¡¡...gracias por tu ayuda y un saludo.
¿Qué error te arroja?
ResponderEliminarNo se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
ResponderEliminarMensaje 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.
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.
ResponderEliminarSaludos.
AHHHHHHH¡¡¡¡¡¡...no hay manera...llevo media mañana y nada....probare mas tarde...gracias y un saludo
ResponderEliminarSeguro debe ser un pequeño detalle que estás omitiendo :\
ResponderEliminarHola 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.
ResponderEliminarQué gusto que ya lo hayas podido aplicar con éxito :)
ResponderEliminarme podrias dar codigos de color
ResponderEliminarMira aquí:
ResponderEliminarhttp://ciudadblogger.com/2010/03/codigos-de-colores-hexadecimales.html
Hola me podrian ayudar la vdd no le entendi jaja xD
ResponderEliminarqkiero 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 ¿?
Hola peqke_alvarez,
ResponderEliminarLo ú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.
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:
ResponderEliminarhttp://decantarosycantares.blogspot.com/
Excelente Monipal, me alegro que te haya resultado bien :)
ResponderEliminarel color no es cambiable no'?
ResponderEliminarSí, se cambia donde se indica:
ResponderEliminarcolor: #000; /* Color del texto */
estoy hace rato buscando el head y no lo encuentro ¬ en qe parte está? graciaas!
ResponderEliminarUsa las teclas CTRL + F, así te será más fácil localizar el código. Saludos.
EliminarMuchas gracias, me sirvió! :D
ResponderEliminarexcelente efecto gracias.
ResponderEliminary si lo quiero eliminar que debo eliminar o sustituir? para que aparezca normal.
ResponderEliminarEstoy 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
solucionado, vi que era un gadget en html y no en la edicion de plantilla
ResponderEliminares un codigo que si me funciono no como en otras paginas que no sirven :/ graciaaaaaas :)
ResponderEliminarQué gusto que te haya servido Mark :)
EliminarHola 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?
ResponderEliminarGracias
Ya vi donde se cambia la velocidad jaja, no me fije antes, losento :)
ResponderEliminarHOLA 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...
ResponderEliminarNi idea Freddy, no he visto algo similar.
EliminarPotro esta muy bueno, pero un poco molesto a la hora de leer algo dx
ResponderEliminar(y)
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....
ResponderEliminarSólo entra en la Edición de HTML y busca el código, si ahí lo pusiste ahí podrás cambiar el texto.
EliminarBuenas,
ResponderEliminarSe 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
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