Background deslizante

[SDSergi]

Buenas.

Justo acabo de darme de alta en este foro para preguntar a ver si alguien sabe alguna forma para aplicar un fondo que va deslizándose a lo largo de varios paneles solo con CSS. No sé si me explico. La idea es hacer algo similar a los móviles, donde puedes acceder a 3 o 4 pantallas laterales llenas de iconos mientras el fondo se desplaza ligeramente en un segundo plano. El caso es que, como no conozco ningún nombre específico para el efecto no he podido encontrar nada ni en este foro ni por la red.

Para concretar un poco... la idea seria aplicar la propiedad transition sobre el background-position de un div, i que ésto se pueda activar mediante un :target desde alguno de sus hijos.

Pues nada, a ver si hay suerte. Gracias de antemano.

[bernardo]

Buenas
No creoq ue te refieres a esto pero igual algo tipo el efecto Parallax te puede servir:
http://ianlunn.co.uk/plugins/jquery-parallax/
http://pixelcog.github.io/parallax.js/

[inieva]

Esto no es solo CSS pero quizás te sirva:http://codepen.io/IanLunn/pen/KdpBgq

Saludos!

[SDSergi]

Buenas,

Bernardo: gracias por el aporte. No es el efecto que buscava pero es muy atractivo ese falso 3D. Me lo apunto para futuras webs.

inieva: gracias. ¡Sí! eso es exactamente lo que pretendia encontrar. Queria usar solo CSS solo por mis escasos conocimientos de js, pero este código parece muy sencillo. Genial.

[SDSergi]

Pues el caso es que he dado con una solución solo con CSS, bastante simple, aunque solo me sirve para un solo panel. La comparto por si es del interés de alguien y por si a alguien se le ocurre desarrollarla un poco más...

La cosa es poner dentro de un div un enlace que apunte a este mismo div contenedor, así, mediante :target podemos mover su background y todos los elementos que tenga dentro, cada cual a una velocidad distinta. Justito pero suficiente para una web estática y sencilla.

P.D: Sí, algun dia me tocará aprender javascript...

Saludos

[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