JMiur [E]

Este script de DynamicDrive agrega una animación al título que aparece en el navegador y está basada en una sucesión de simples caracteres.

Para personalizarla, sólo hay que colocar el texto que queremos que aparezca:
<script type="text/javascript">

var titletext="EL TEXTO";
var thetext="";
var started=false;
var step=0;
var times=1;

function welcometext() {
times--
if (times==0) {
if (started==false) {
started = true;
document.title = titletext;
setTimeout("anim()",1);
}
thetext = titletext;
}
}

function anim() {
step++
if (step==7) {step=1}
if (step==1) {document.title='&gt;==='+thetext+'===<'}
if (step==2) {document.title='=&gt;=='+thetext+'==<='}
if (step==3) {document.title='&gt;=>='+thetext+'=<=<'}
if (step==4) {document.title='=&gt;=>'+thetext+'<=<='}
if (step==5) {document.title='==&gt;='+thetext+'=<=='}
if (step==6) {document.title='===&gt;'+thetext+'<==='}
setTimeout("anim()",200);
}

function showstatustext(txt) {
thetext = txt;
setTimeout("welcometext()",4000);
times++;
}

if (document.title)
window.onload=onload=welcometext;

</script>
El script, hay que ubicarlo en el encabezado de la página, por ejemplo, inmediatamente antes de la etiqueta </head>.

¿Más flechitas?

Este es un efecto de mouseover muy sencillo para animar los enlaces y fue creado por Kieren Harding.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Para utilizarlo, debemos crear una clase especial y agregarla en el encabezado de nuestra página, por ejemplo, antes de </head>:
<style type="text/css">
a.animado:link, a.animado:visited, a.animado:active { /* el enlace normal */
color: #color; /* el color normal */
text-decoration: none;
}
a.animado:hover { /* el efecto */
padding-bottom: 3px; /* depende de la fuente y la imagen */
text-decoration: none;
color: #color; /* color mouseover */
background-image: url(URL_imagen);
background-repeat: repeat-x;
background-position: 100% 100%;
}
</style>
La imagen que vamos a utilizar puede ser cualquier que nos guste, en este caso es de 25x5 y es un gif animado .

Luego, cuando queremos usarlo, debemos agregar la clase al enlace de la siguiente manera:
<a href="URLenlace" class="animado">EL TEXTO</a>

3 comentarios:

ChT  

Muy ingenioso y muy buena explicación. Gracias y saludos.

Responder
Cientifico Catracho  

hoye, como le hago para poner un icono a la par de la dirección...
por ejemplo, antes de http://vagabundia.blogspot.com/ aparece la imagen en miniatura de la misma foto de tu perfil... como agrego un ícono o imagen ahi? Gracias de antemano

Responder
JMiur  

Fíjate en esta entrada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR