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
Si que consume recursos, de 16% y 18% de CPU1 y CPU2 se va a 46% y 49%, en una Ubuntu 9.04 y FF 3.0.0.11
vistoso pero excesivo en consumo
Gracias por compartir tu experiencia.
Cordial saludo.
Pues en windows con la última versión de firefox se sufre bastante con poco tiempo.
SerÃa bueno tal vez una barra a una lado del sitio con el efecto, igual serÃa bueno y asà no se come los recursos.