elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Únete al Grupo Steam elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  como se hace una web como esta?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: como se hace una web como esta?  (Leído 3,597 veces)
basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
como se hace una web como esta?
« en: 26 Agosto 2014, 23:00 pm »

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!


En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: como se hace una web como esta?
« Respuesta #1 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/


En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: como se hace una web como esta?
« Respuesta #2 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/


En línea

Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: como se hace una web como esta?
« Respuesta #3 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.
En línea

Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
dimitrix


Desconectado Desconectado

Mensajes: 4.847



Ver Perfil WWW
Re: como se hace una web como esta?
« Respuesta #4 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?





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 :-)
En línea




EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: como se hace una web como esta?
« Respuesta #5 en: 28 Agosto 2014, 07:23 am »

https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
En línea

dimitrix


Desconectado Desconectado

Mensajes: 4.847



Ver Perfil WWW
Re: como se hace una web como esta?
« Respuesta #6 en: 28 Agosto 2014, 15:27 pm »


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 :-)
En línea




Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Por favor..... alguien que me diga como se hace esta pagina « 1 2 »
Diseño Gráfico
jamarchi 17 11,133 Último mensaje 16 Septiembre 2007, 03:38 am
por H4RR13R
Como hace esta increible pagina para centrar su contenido?
Desarrollo Web
octavioxd 5 4,086 Último mensaje 11 Julio 2010, 15:37 pm
por Nakp
como se hace esta animacion
Desarrollo Web
RedZer 2 2,396 Último mensaje 27 Abril 2011, 17:20 pm
por RedZer
¿cifrar en base64 como el script spoiler de identi y hackstore como se hace?
PHP
Weeken 2 5,472 Último mensaje 4 Marzo 2013, 03:43 am
por Weeken
Qué hace esta palabra y cómo devuelvo un return (Ruby).
Scripting
Saito_25 4 2,769 Último mensaje 30 Marzo 2015, 19:36 pm
por Saito_25
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines