Magazine

Texto en movimiento (animado) que sigue al cursor

Publicado el 29 octubre 2011 por Danyca
Texto en movimiento (animado) que sigue al cursorHoy 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

<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:#0000ff ; /* 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><br /> <script type="text/javascript"> // </script>

(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.
.

También podría interesarte :

Volver a la Portada de Logo Paperblog

Quizás te interesen los siguientes artículos :