Título de página animado

Curioso efecto para animar el título de la página, el que aparece en la barra superior del navegador.

En este ejemplo el título se convierte en un carrusel: va pasando de derecha a izquierda continuamente.

Solución

<script>

function animaTitulo(ini) {

if (ini){

   document.title = document.title.replaceAll(" ","\xA0")+"-";

   ini = false;

}

var actual = document.title;

var ind;

if(actual[0]=="\xA0")

    ind=2;

else

   ind=1;

sp = actual.substring(0, ind);

document.title = actual.substr(ind)+sp;

setTimeout(animaTitulo, 220,ini);

}

</script>

 <body onload="animaTitulo(true)">

<p>Contenido de la página</p>

</body>

Explicación

Este ejemplo ilustra el uso de un temporizador en Javascript para animar el título de la página (que aparece en la barra superior del navegador)

Este temporizador llama a la función animaTitulo(sp) a intervalos regulares. La función lleva un argumento para indicar si es la primera llamada en cuyo caso se cambian los espacios por non break spaces y se añade un guión al final para separar cada pasada del título.

En cada llamada la función mueve la inicial del título a la posición final. Si es un espacio se agrega el espacio y la letra siguiente, esto es necesario para que el flujo del títiulo sea vea más uniforme.

Como lo uso

 

Bien fácil. Primero le ponemos un títiulo a la página (<title>Mi página animada</title>). Luego en la etieuqta body asociamos el vento load a la función animaTitulo(true). Como es la primera llamada se debe llamar con el argumento en true.

Esta página tiene este efecto en la barra de título como ves.