Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: basickdagger en 26 Agosto 2014, 23:00 pm



Título: como se hace una web como esta?
Publicado por: basickdagger en 26 Agosto 2014, 23:00 pm
http://discover.store.sony.com/be-moved/?p=xperia (http://discover.store.sony.com/be-moved/?p=xperia)

es de la pagina de sony, me parece muy creativo y obviamente unos grandes diseñadores...

pero yo nunca he hecho algo así que utilice esa clase de movimientos alguien tiene idea de como hacerlo? q pueda guiarme a buscar algún tuto o algo parecido y que nombre tiene esa "forma" de web por así decirlo...
quiero pensar que el unico movimiento que realmente existe es el vertical y solo el background es lo que cambia de posición y es solamente una imagen muy grande pero si alguien ya lo sabe me gustaria que me diera el dato.

saludos!


Título: Re: como se hace una web como esta?
Publicado por: MinusFour en 26 Agosto 2014, 23:10 pm
La tecnica se llama Parallax Scrolling. Hay una libreria de JS llamada Skrollr.js que te puede ayudar para desarrollar:

https://github.com/Prinzhorn/skrollr

Mira los ejemplos:

http://prinzhorn.github.io/skrollr/


Título: Re: como se hace una web como esta?
Publicado por: basickdagger en 26 Agosto 2014, 23:13 pm
La tecnica se llama Parallax Scrolling. Hay una libreria de JS llamada Skrollr.js que te puede ayudar para desarrollar:

https://github.com/Prinzhorn/skrollr

Mira los ejemplos:

http://prinzhorn.github.io/skrollr/


(http://s3.argim.net/files/w/240x320/mr_burns_kq2.jpg)


Título: Re: como se hace una web como esta?
Publicado por: Graphixx en 27 Agosto 2014, 22:29 pm
Me sumo a los interesados por saber como se arma una web como la de sony xperia, esta demasiado brutal.


Título: Re: como se hace una web como esta?
Publicado por: dimitrix en 28 Agosto 2014, 00:25 am
Se os va la pinza... ¿¡Os importa de verdad el diseño!?

¿Es que a nadie le importa que las cámaras de Sony estén creadsa con queso?

(http://i.elhacker.net/i?i=ekKIon-5zDu-dDLwWeJ6jmVo)



Creo que basickdagger no se refería al Parallax Scrolling, es decir, se refería a la web y el Parallax Scrolling es una forma de hacerlo, pero estoy casi seguro que no se ha hecho con esta técnica.

Mirando el código se ve que los efectos guapos es una especie de "vídeo" que va cargando los fotogramas en un canvas del tamaño de tu pantalla.

Igualmente gracias por el enlace, me lo quedo xD :-)


Título: Re: como se hace una web como esta?
Publicado por: EFEX en 28 Agosto 2014, 07:23 am
https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/


Título: Re: como se hace una web como esta?
Publicado por: dimitrix en 28 Agosto 2014, 15:27 pm
https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/

Thanks for the link...

Sinceramente me parece una burrada que se descargue cada frame (no por el tamaño sino por las requests)... se me ocurren 3 formas diferentes que hiría más rápido...

Pero igualmente, buena web :-)