lunes, 19 de mayo de 2014
Este truco es uno de mis favoritos... Sirve 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 AQUI
METODO 1
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.
Nota: 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.
METODO 2:
Si tienes algun tipo de problema con el Metodo 1, les daré otro código. Este al igual que el anterior hará que un texto persiga al cursor, sin embargo este tiene un efecto más suave al ondularse el texto. .
Entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:
<script language='javascript' type='text/javascript'>
//Cursor con texto en movimiento
//<![CDATA[
var x,y
var tempo = 10
var espera = 0
var texto = "Aquí va tu texto"
texto = texto.split("")
var xpos = new Array()
for (i = 0; i <= texto.length - 1; i++) {
xpos[i] = -50
}
var ypos = new Array()
for (i = 0; i <= texto.length - 1; i++) {
ypos[i] = -50
}
function seguir(e){
//si no es NS4, usa objeto window.event
if (!e) var e = window.event
//NS4
if (e.pageX || e.pageY) {
x = e.pageX
y = e.pageY
window.status = x + ' : ' + y
//IE y compatibles con DOM
} else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
window.status = x + ' : ' + y
//no soportado, no hace nada
} else {
return
}
espera = 1
}
function animar_cursor() {
if ( espera == 1 ) {
for ( i = texto.length - 1; i >= 1; i--) {
xpos[i] = xpos[i-1] + tempo
ypos[i] = ypos[i-1]
}
xpos[0] = x + tempo
ypos[0] = y
}
//para el IE 4.x
if ( espera==1 && document.all ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = eval("span" + i + ".style")
letra.posLeft = xpos[i]
letra.posTop = ypos[i]
}
}
//para el Netscape 4.x
else if ( espera==1 && document.layers ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = eval("document.span" + i)
letra.left = xpos[i]
letra.top = ypos[i]
}
}
//para navegadores compatibles DOM
else if ( espera==1 && document.getElementById ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = document.getElementById( "span" + i)
letra.style.left = xpos[i] + 'px'
letra.style.top = ypos[i] + 'px'
}
}
var timer = setTimeout("animar_cursor()", 30)
}
if (document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = seguir
//]]>
</script>
<style type='text/css'>
.cursoranimado {
position:absolute;
visibility:visible;
top:-50px;
font-size:11pt;
font-family:Arial;
font-weight:bold;
color:red;
}
</style>
<script language='javascript' type='text/javascript'>
//<![CDATA[
if (document.layers) {
for (i=0;i<=texto.length-1;i++) {
document.write('<span id="span' + i + '" class="cursoranimado">')
document.write(texto[i])
document.write('</span>')
}
} else if (document.all || document.getElementById) {
for (i=0;i<=texto.length-1;i++) {
document.write('<div id="span' + i + '" class="cursoranimado">')
document.write(texto[i])
document.write('</div>')
}
}
animar_cursor()
//]]>
</script>
Sólo cambia lo que está en rojo por el texto que quieres que aparezca junto al cursor. En font-size puedes cambiar el tamaño del texto y en color para cambiar el color de las letras.
