Controlar los tiempos

Los tiempos de carga de una imagen, o la rapidez de una transición, o un efecto de fusión, son controlados por una temporizador que tenemos que programar.

setTimeout/setInterval

Estas dos funciones (o métodos) son las responsables de los retardos en una página web. Cuando vemos que hay algún tipo de movimiento en una página, podemos estar seguros de que alguna de esas funciones están haciendo su trabajo.

Vamos a desarrollar unos pocos y sencillos efectos para mostrar sus posibilidades:

Simulando blink

La etiqueta en desuso blink produce un parpadeo del contenido de la misma... para conseguir ese efecto vamos a alternar los valores "visible"/"hidden" en el estilo "visibility". También podría conseguirse un efecto parecido alternando el color del texto, pero sería menos eficiente.

A partir de un elemento span mostraremos el efecto blink con estas líneas:

function efectoBlink()	{
	parpadeo = document.getElementById("eblink").style;
	parpadeo.visibility = (parpadeo.visibility == "visible") ? "hidden" : "visible";
}
var tagBlink = setInterval("efectoBlink()", 500);

Aunque en ocasiones se quieren quitar esos efectos porque pueden resultar algo molestos (hay muchas páginas en la red con verdaderos abusos de este tipo efectos), y para esas ocasiones existe el método clearInterval/clearTimeout. Se puede ver una forma de quitar/poner estos efectos con el siguiente botón: El código es el siguiente:

function alternarBlink()	{
	if (!tagBlink)
		tagBlink = setInterval("efectoBlink()", 500);
	else	{
		clearInterval(tagBlink);
		tagBlink = false;
		document.getElementById("eblink").style.visibility = "visible";
	}
	document.getElementById("botonblink").value =
		(!tagBlink) ? "Poner blink" : "Quitar blink";
}

Un reloj

Otro efecto que se implementa con estos métodos es el típico reloj digital

var reloj = new Date();// buscamos la hora del sistema;
var hora = reloj.getHours();
var minu = reloj.getMinutes();
var segu = reloj.getSeconds();
function ajuste(dato)	{
	if (dato < 10)	return "0" + dato;
	else return dato;
}
function muestraHora()	{
	document.getElementById("elReloj").innerHTML =
		ajuste(hora) + ":" + ajuste(minu) + ":" + ajuste(segu);
}
function actualizarReloj()	{
	segu++;
	if (segu == 60)	{
		segu = 0;
		minu++;
		if (minu == 60)	{
			minu = 0;
			hora++;
			if (hora == 24)	hora = 0;
		}
	}
	muestraHora();
}
var relojDigital = setInterval("actualizarReloj()", 1000);

Como puede verse en el funcionamiento del reloj, se obtiene la hora una vez y no se vuelve a acceder al sistema, pero seguramente el reloj esté siempre con la hora correcta, ya que el temporizado se ha hecho con un retardo de 1000 milisegundos, y la función realiza operaciones matemáticas básicas que en los sistemas modernos no provocan ningún retardo apreciable (si tuviesemos que realizar cálculos complejos, seguramente sea más eficiente la lectura del reloj en cada temporización). Otro ejemplo de reloj con cálculos más complejos puede verse en el siguiente enlace: Reloj analógico; o en el siguiente mensaje de las FAQs javascript de los foros del web: Cómo poner un reloj analógico en mi web.

Más posibilidades

Hay otra etiqueta en desuso (o desaprobada) que es marquee, donde su contenido se desplaza constantemente; en la página Javascript Códigos (por tunait) hay interesantes ejemplos que simulan esa etiqueta. Otro efecto interesante es el rotador de banners que puede verse en <Javascript> por Carlitos.

Más efectos basados en temporizadores son los movimientos de texto en las barras de título o de estado, o en elementos concretos de algunas páginas que fácilmente pueden implementarse modificando el texto que se muestra, o en el caso de las marquesinas con el estilo "clip" de la capa contenedora... Arrastrar capas, fundir texto o imágenes, desplegar menúes contráctiles, etc.

Postal Navideña

Para mostrar el uso de temporizadores vamos a crear una Postal Navideña donde pondremos un fondo degradado desde un azul oscura al blanco níveo, a pié de página un árbol de navidad, una luna en la parte superior izquierda, un efecto de nieve que podemos bajarnos de dinamicdrive y un Papa Noel cruzando constantemente de derecha a izquierda

El degradado lo obtendremos siguiendo los pasos que se describen en esta página: Gradientes (php + librerías GD), y el resto de elementos serán estos:

luna Papá Noel arbolito

Lo que vamos a preparar es la forma de cruzar el cielo que puede verse en esta Postal navideña, donde solo debemos preocuparnos de la posición de Papá Noel.

Vamos a empezar definiendo los estilos de la capa donde se realizará el efecto, la etiqueta del dibujo y el cuerpo de la página:

#capaPapaNoel	{
	position: relative;
	top: 0;
	left: 0;
	height: 180px;
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#papanoel	{
	position: absolute;
	top: 20px;
	visibility: hidden;
}

body	{
	overflow: hidden;
	text-align: center;
	width: 100%;
	margin: 0;
}

Como puede verse el dibujo está definido "oculto" (visibility: hidden), debido a que durante la declaración del estilo no sabemos con exactitud la posición que debe tener. La inicialización javascript para el efecto, debe obtener el ancho de la página para posicionar a Papa Noel:

var anchoPagina;	// document.body.clientWidth
var miPapaNoel;		// variable para mover a Papá Noel
var ancho = 350;	// anchura de Papá Noel
var alto = 120;		// altura de Papá Noel
var posicion;		// posición de Papá Noel... se inicializa con anchoPagina
var fin = -ancho;	// última posición
var retardo = 5000;	// milisegundos desde que desaparece por la izquierda y vuelve
			// a aparecer por la derecha
var trote = 1;		// milisegundos por cada movimiento
var saltos = 4;		// nº de pixeles que se avanza

function inicio()	{
	anchoPagina = document.body.clientWidth;
	document.images.papanoel.style.left = anchoPagina + "px";
	miPapaNoel = document.images.papanoel;
	miPapaNoel.style.visibility = "visible";
	posicion = anchoPagina;
	moverPapaNoel();	// método del efecto
}

Por último puede verse lo sencillo que es usar estos métodos para hacer animaciones.

function moverPapaNoel()	{
	posicion = posicion - saltos;
	miPapaNoel.style.left = posicion;
	if (posicion < fin)	{
		posicion = anchoPagina;
		setTimeout("moverPapaNoel()", retardo);
	}
	else	setTimeout("moverPapaNoel()", trote);
}

Los enlaces que puedo sugerir en este artículo son los que he insertado en los distintos párrafos, pero desde cualquiere buscador se pueden encontrar innumerables referencias más...