Este truco es para que
un texto siga el cursor del mouse. El texto puede
ser el título del blog, un mensaje, o lo que quieras mostrar. Puedes
ver un ejemplo de cómo el texto sigue al cursor
aquí.
Para
ponerlo en tu blog entra en Diseño | Añadir un gadget |
HTML/Javascript y ahí pega el siguiente código:
<script language="JavaScript"
type="text/javascript">
mensaje = 'EL
TEXTO QUE QUIERAS';
font =
'Verdana,Arial';
size = 2;
color
= 'orange';
velocidad = 0.7;
n4
= (document.layers);
ie = (document.all);
n6 =
(document.getElementById);
mensaje = mensaje.split('');
n =
mensaje.length;
a = size*10;
ymouse = 0;
xmouse =
0;
props = "<font face="+font+" color="+color+"
size="+size+">";
if (n4)
{
for ( i =
0; i < n; i++)
document.write('<layer left="0"
top="0" width="+a+" name="n4mensaje'+i+'"
height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else
if (ie)
{
document.write('<div id="padre"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < n;
i++)
document.write('<div id="iemensaje"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else
if (n6)
{
document.write('<div id="padre"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i = 0; i < n;
i++)
document.write('<div id="iemensaje'+i+'"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
if(n4)
window.captureEvents(Event.MOUSEMOVE);
function
Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse =
event.y+20;
}
else if(n4 || n6)
{
xmouse =
evento.pageX+20;
ymouse =
evento.pageY+20;
}
}
if(n4)
window.onMouseMove =
Mouse
else if(ie || n6)
document.onmousemove = Mouse;
y
= new Array();
x = new Array();
Y = new Array();
X = new
Array();
Yaux = new Array();
Xaux = new Array();
for
(i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i]
= 0;
Yaux[i] = 0;
Xaux[i] = 0;
}
function
asigna()
{
if (ie)
padre.style.top =
document.body.scrollTop;
for (i = 0; i < n;
i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top =
y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else
if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left
= x[i]+(i*(a/2));
}
else
if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top
=
'"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left
= '"+(x[i]+(i*(a/2)))+"px'");
}
}
}
function
ondula()
{
y[0]=Math.round(Y[0]
+=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0]
+=((xmouse)-X[0])*velocidad);
for (var i = 1; i < n;
i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]=
Math.round(X[i]);
y[i] =
Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] =
Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}
window.onload
= ondula;
</script>
Para personalizarlo debes
cambiar el mensaje que dice EL
TEXTO QUE QUIERAS, si quieres otro tipo de letra cambia donde
dice font, para el tamaño de la
letra en size, el color
donde dice orange, puedes poner el color que quieras (black,
red, green, etc) incluso puedes modificar la velocidad.
ACTUALIZACIÓN:
Si usas una plantilla hecha a través del Diseñador de plantillas de
Blogger entonces cambia esta parte del código:
document.write('<div id="padre"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < n;
i++)
document.write('<div id="iemensaje"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else
if (n6)
{
document.write('<div id="padre"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i = 0; i < n;
i++)
document.write('<div id="iemensaje'+i+'"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
Por esta otra:
document.write('<div id="padre"
style="position:absolute;top:-270px;left:-150px;
z-index:400;"><div style="position:relative">');
for
(i=0; i < n; i++)
document.write('<div id="iemensaje"
style="position:absolute;top0px;left:0px;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else
if (n6)
{
document.write('<div id="padre"
style="position:absolute;top:-270px;left:-150px;
z-index:400;"><div style="position:relative">');
for
(i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'"
style="position:absolute;top:0px;left:0px;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
Verifica que cambies sólo y únicamente
la parte que se menciona para no afectar el funcionamiento del
script.
http://www.ciudadblogger.com/2009/03/cursor-con-texto-en-movimiento.html