Tutorial – Efecto fondo animado con Javascript

Si como yo, no eres amante de usar tecnología Flash para hacer animaciones en una página web, te va a gustar el tutorial que publican en Youlove.us que permite crear un fondo animado con Javascript. Antes de seguir leyendo te recomiendo que visites la página para que comprendas exactamente de que se trata y veas lo vistoso que es es efecto.

Cómo funciona

La técnica usada en este efecto consiste en desplazar un fondo detrás de un PNG transparente.

Son necesarias 4 imágenes: el fondo (background), el encabezado (header), contenido y pie de página (footer).

Todo el contenido se oculta al principio desde las CSS.

Javascript

Se utiliza jQuery y además la biblioteca backgroundposition.js para mover el fondo.

Este es el Javascript utilizado:

$(function() {
	// *** Desplazar fondo

	// altura de la imágen de fondo en píxeles
	var backgroundheight = 4000;

	// minutos/hora actual
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();

	// cálculos de tiempo, los convierte en porcentajes
	var hourpercent = hour / 24 * 100;
	var minutepercent = minute / 60 / 24 * 100;
	var percentofday = hourpercent + minutepercent;

	// calcula cual linea de píxeles comenzar
 	var startoffset = backgroundheight / 100 * percentofday;

	// cálculos de desplazamiento
	var endoffset = startoffset + backgroundheight;

   	function scrollbackground() {
		// posición inicial de la imágen del fondo
		$('body').css({
			backgroundPosition: '50% -' + startoffset + 'px'
		});
		// animar hasta el final
		$('body').animate({
			backgroundPosition:'(50% -' + endoffset + 'px)'
			},
			100000,
			"linear",
			function () {

				scrollbackground();
			}
		);
	}

	// comenzar la animación
	scrollbackground();
}

El Javascript traduje algunos de los comentarios para orientación, pero aconsejo examinar el tutorial original que está en inglés en el sitio de Youlove.us.

Web: youlove.us/blog/the-youloveus-scrolling-background-effect-explained

Notas finales:

Estuve haciendo pruebas y estudiando la documentación, en verdad el efecto me parece muy vistoso, pero en un par de ocasiones  consumió bastantes recursos y volvio muy lento el navegador (pruebas realizadas en Firefox 3.0.11 bajo Linux), así que recomiendo probar con diferentes tamaños en la implementación.

Vía: delicious.com/popular