Mil Trucos Blogger

Texto en movimiento que sigue al cursor en forma giratoria

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Hoy les traigo un curioso tutorial que trata de un mensaje en movimiento que sigue al cursor en forma giratoria,esto le dara un poco mas de vida a tu blog y sin duda alguna llamara la atencion de los lectores de tu blog.

Puedes ver el trucos en funcionamiento en este blog de pruebas


Para añadir este truco ve a Diseño > Edición de HTML y antes de </head> pega 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 Mil Trucos 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 esta en rojo por el mensaje que quieras. Lo que esta en color azul son las condicionales con las cuales podras personalizar el mensaje a tu gusto.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

12 Comentarios

  1. octubre 15, 2011    

    Lo acabo de ver en el blog de pruebas y está muy entretenido pero estaria bien que se mostrara un rato y al dar clik derecho en el raton o algo parecido dejara de moverse.

  2. Anonymous Anonymous
    octubre 15, 2011    

    ¿Me podrias comentar como puedo poner un foro tan atractivo como el tuyo?

  3. octubre 15, 2011    

    Dryken si es muy entretenido y lo que dices seria muy bueno depronto para otra version mejorada del truco.

    Saludos 😛

  4. octubre 15, 2011    

    Anónimo mira aca esta una entrada donde explico como poner un foro como el que yo uso

    http://www.miltrucosblogger.info/2011/04/talki-un-foro-para-tu-blog.html

  5. octubre 15, 2011    

    jejeje si seria lo mejor esperar a la siguiente update.

    Vaya, no sabia tuvieras una entrada de foro, ya que estamos puesto a ver si intento hacerlo tambien y no me da pereza xD

    Saludos compa!

  6. octubre 15, 2011    

    Dryken jaja bueno coloca el foro xd,Saludos

  7. octubre 16, 2011    

    esta muy bueno pero creo que retrasaría mi blog aun más…

    saludos

  8. octubre 16, 2011    

    Chiknaui.Mikistli Joel Molina Reyes no para nada es muy ligero usalo y te daras cuenta 😛

  9. octubre 22, 2011    

    Mejor es el tuyo, de los otros no pasa nada, gracias por el aporte

  10. octubre 23, 2011    

    Johnny gracias por comentar,Saludos..

  11. marzo 30, 2012    

    lovely blog

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo