Background deslizante

[SDSergi]

Buenas.

Pues el caso es que...

... he seguido dándole vueltas y por fin he dado con la solución definitiva: Paneles deslizantes con contenido que se desliza horizontalmente y fondo que sigue el movimiento en un segundo plano más lento, para dar sensación de tridimensionalidad. Todo con CSS. Sencillo y eficaz, como a mi me gusta. Ésta es mi aportación:

HTML: En primer lugar creas tantos div's como paneles quieras tener, uno detrás de otro y cada uno con su id correspondiente. Al final del todo creas un último div hermano dentro del cual irá todo el contenido que se quiere animar, entre el cual se encuentran los enlaces que llamaran a los divs anteriores.

CSS: posicionas todo en absoluto para controlar posiciones con top y rigtht, ocupas el 100% del ancho y alto de la pantalla (un overflow en hidden como detalle), luego creas en el div del contenido una transicion del background-position, en los elementos que éste contiene y deseas mover una transicion de left o right a escoger (también se podria controlando los margin). Para conseguir controlarlo todo según sea el panel donde estés usas el selector :target seguido del de hermanos indefinidos [div:target ~ div] o [div:target div elemento] y con eso empiezas a concretar las posiciones del fondo y del contenido segun sea el div/panel seleccionado. Para dejar contenido fuera del panel por su derecha right -x% (donde x es el ancho fijo + márgenes del elemento). En total hay que posicionar los elementos 3 veces: una vez para el estado inicial escondido, otro para el estado cuando su panel esté seleccionado y un tercero para el estado posterior escondido (en el lado opuesto de donde apareció). Dicho así suena complicado pero al final no lo es tanto:

[URL="http://www.sdesergi.com"]http://www.sdesergi.com[/URL]

Se aceptan críticas