Texto en movimiento (animado) que sigue al cursor

Hoy les presento un Gadget Divertido para que seguimos con las mejores maneras de mejorar a nuestro Blog.

Se trata de un Gadget que lo visto en unos Blogs por internet, 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 .

Para agregar este efecto al puntero de tu blog es muy sencillo, sólo copias el código de abajo y lo pegas en tu blog en Diseño -> Elementos de página-> Añadir un gadget -> HTML/Javascript .

Copiar Codigo

/* 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; }

(Aquí les dejo este tutorial con video si no sabes como y donde añadir un Gadget en tu Blog ).

Para ajustar este Gadget a tus necesidades puedes cambiar esta parte del codigo :

// Mensaje

var msg = " Bienvenidos a Gadgets para 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.2 ;

// Velocidad de reaccion

var speed = 0.3 ;

Lo que esta en rojo es lo que tiene que modificar para personalizar este Gadget Divertido.

Para Modificar el color , estilo de la letra y otras cosas, busca estas líneas en el código :

font-style: italic; ( borra esta línea para que las letras no se muestren en cursiva )

font-weight: bold; (borra esta línea para que las letras no se muestren en negrita)

font-family: verdana, arial; (Tipo de letra)

color: #000; (Color del texto: lee Código de colores RGB )

Si te ha gustado este post con sobre como poner un texto en movimiento que siguel al cursor , no dudes en suscribirte al feed RSS de GadgetsBlogger.com - para recibir todos los días la últimas novedades sobre como mejorar tu blog.

.