Texto que sigue al cursor

Este es un truco muy divertido, se trata de un texto (la frase que quieras poner) que se mueve junto al cursor. Ponerlo en el blog es sencillísimo. Mira cómo funciona en este Demo.

Para ponerlo en el blog solo entra en Diseño, Edición Html, y con los artilugios expandidos, 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 = "Pon aquí el texto que quieras"

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:#f5632c;
}
</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>

 

Pon el texto que tu quieras reemplazándo lo que está con rojo, en f5632c es el color del texto (yo le puse el naranja) que puedes cambiar a tu gusto. Y listo, ya tienes un texto que sigue al cursor.

Menu lateral deslizante.

En una entrada anterior vimos cómo poner botonesflotantes  para compartir de Facebook twitter y google+, ahora vamos a ver cómo poner estos mismos enlaces pero de manera deslizante, de modo que queden fijos a un costado del blog y solo aparezcan cuando se pone el cursor sobre ellos y así no obstaculicen la visión de la entrada; eso además de ahorrarnos espacio, le da un aspecto más moderno al blog.

Puedes ver cómo funciona en esta misma entrada, a un costado del blog.

Para implementarlo pega en tu plantilla antes de ]]></b:skin> los estilos del contenedor, teniendo los artilugios expandidos: 

 

ul#blmenudeslizante {

position: fixed;

margin: 0px;

padding: 0px;

top: 55%;

left: -2px;

list-style: none;

z-index:9999;

}

ul#blmenudeslizante li a {

background-color: #878787;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #afafaf;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 12px;

-webkit-border-top-right-radius: 12px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

opacity: 0.9

text-align: right;

height:40px;

padding-top: 20%;

padding-left: 4px;

padding-right: 4px;

margin-right:-5px;

width:100px;

display:block;

font-size: 18px;

color: #ffffff;

}

ul#blmenudeslizante li {

width: 90px;

line-height:1.5em;

margin:0;

padding:0 0 0.25em 0;

text-indent: 18px;

}

ul#blmenudeslizante li a:hover {

text-decoration: none;

color: #815683;

font-weight:bold;

font-style:italic;

}

Ahora hay que agregar el script, justo antes de </head> pones lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(function() {
$(&#39;#blmenudeslizante a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-70px&#39;},1000);

$(&#39;#blmenudeslizante &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},400);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-70px&#39;},400);
}
);
});
</script>

Listo, si todo está ok en vista previa, guarda los cambios. Ahora es el turno de un gadget. Entra en Diseño, Añadir Gadget, Html Javascript, y pega los enlaces:

<ul id="blmenudeslizante">
<li class="blink"><a href="URL DEL ENLACE">I n i c i o</a></li>
<li class="blink"><a href="URL DEL ENLACE">Facebook</a></li>
<li class="blink"><a href="URL DEL ENLACE">Twitter</a></li>
<li class="blink"><a href="URL DEL ENLACE">Google+</a></li>

</ul>

Lo que puedes personalizar:

Donde pone Backgroun:#878787 es el color de fondo de las pestañas, puedes ponerle el color que gustes; top: 55% es la distancia del contenedor para que permanezca fijo abajo, si lo quieres arriba solo cambia 55% por 0px hasta que quede a la altura que quieras. En color:#ffffff es el color del texto (está blanco) cámbialo al color que gustes, en color:#815683 es el color del texto (morado) cuando se pone el cursor. Es decisión tuya el color que le pongas.

Lo que esta en verde es jQuery, si ya lo tienes en el blog no es necesario que lo vuelvas a poner.

En el gadget sustituye url del enlace por la url de la dirección de cada cuenta (la de Facebook, twitter, google+; o puedes ponerle los enlaces que quieras)

Por lo demás, que disfrutes este gadget.