{"id":313,"date":"2014-07-29T15:21:23","date_gmt":"2014-07-29T14:21:23","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=313"},"modified":"2015-04-07T12:43:58","modified_gmt":"2015-04-07T11:43:58","slug":"parallax-scrolling","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/tendencies\/parallax-scrolling\/","title":{"rendered":"Parallax scrolling"},"content":{"rendered":"

El parallax scrolling<\/em> es una t\u00e9cnica que permite dar la sensaci\u00f3n de profundidad a trav\u00e9s del desplazamiento de diversas capas de im\u00e1genes a velocidades ligeramente diferentes<\/strong>. A pesar de que se utiliza desde hace d\u00e9cadas en la animaci\u00f3n y los videojuegos, una de las primeras p\u00e1ginas web en utilizar esta t\u00e9cnica fue dise\u00f1ada en 2011 por Ian Coyle y Duane King<\/strong> para Nike, y desde entonces se ha popularizado como un recurso m\u00e1s en el dise\u00f1o y desarrollo de p\u00e1ginas web. <\/p>\n

Gracias al uso combinado de CSS y Javascript, los desarrolladores est\u00e1n creando sitios web que antes solo eran posibles con tecnolog\u00eda Flash. <\/p><\/blockquote>\n

Esta t\u00e9cnica se puede usar no solo para presentar el contenido de una web de manera m\u00e1s atractiva, sino tambi\u00e9n con fines narrativos<\/strong>: a medida que el usuario va haciendo scroll (ya sea en vertical u horizontal), va avanzando en la narraci\u00f3n de una historia (pod\u00e9is ver aqu\u00ed algunos ejemplos<\/a>). De hecho, esta t\u00e9cnica ya ha sido bautizada por algunos como scrollytelling<\/em>, y cuenta con brillantes ejemplos realizados por el equipo de The New York Times<\/a>. <\/p>\n

Sin embargo, hay que tener en cuenta que usar esta t\u00e9cnica en la web no siempre es f\u00e1cil: al usar varias capas (normalmente im\u00e1genes en alta resoluci\u00f3n), la carga de la p\u00e1gina puede eternizarse, hasta el punto de dejarla inaccesible. <\/p>\n

M\u00e1s informaci\u00f3n:<\/strong>
\n– Parallax scrolling: an introduction<\/a>.
\n– Behind the scenes of Nike Better World<\/a>. Art\u00edculo que explica el \u201cc\u00f3mo se hizo\u201d la famosa web de Nike que us\u00f3 por primera vez la t\u00e9cnica de parallax scrolling.
\n– Scrollytelling.com<\/a>. P\u00e1gina dedicada a recopilar ejemplos de narraciones que avanzan a medida que el usuario hace scroll.<\/p>\n

Herramientas y recursos<\/h1>\n