Saben como hacer este sitio

[eduardo90]

Hola

me gustaria saber como hacen este tipo de sitios es primera vez que veo uno tan raro como este pero un cliente me ha pedido hacer algo similar.


http://unfold.no

se que es css y jquery pero la estructura?


gracias

[DrFaust]

La estructura básica está compuesta por una seguidilla de contenedores comunes y silvestres apilados de forma vertical. Estos contenedores conforman la estructura básica del sitio.

Por medio de jQuery controlás el evento scroll de la ventana, y movés ciertos contenedores posicionados de forma absoluta, en una relación de 2:1 o 3:1 pixeles con respecto a la posición de la ventana, utilizando la propiedad CSS "top". Eso hace que esos contenedores "scrolleen" a una velocidad más lenta que el resto del contenido. Por último, les ponés un margen superior a esos contenedores, que funciona como un offset para su posición inicial, de modo que aparezcan en la ventana cuando el usuario llega a determinada parte del sitio. Eso lo hacés a ojo, por medio de prueba y error.

Y ya. Es una técnica bastante ingeniosa, pero muy fácil de implementar.

Una cosa más: la técnica es vistosa, pero muy poco práctica. La verdad es que el sitio no me gustó: el hecho de que puedas hacer algo no significa que debas hacerlo.

Edit: Se me ocurrió que reposicionar los contenedores a través de la propiedad "top" puede no ser la forma más CPU-friendly de mover un objeto. Es posible que usar PNGs traslúcidos, y moverlos con la propiedad background-position a lo largo de un DIV que ocupe toda la ventana, tenga un mejor desempeño. Esta técnica sólo funciona con objetos que vayan por debajo del contenido, por otro lado.

[cristian_cena]

buen diagnóstico Dr :) además puede ser útil hacer una copia con httrack para estudiarlo en local, o bien mirarlo online con firebug.

saludos.