{"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\/tendencies\/parallax-scrolling\/","title":{"rendered":"Parallax scrolling"},"content":{"rendered":"

El parallax scrolling<\/em> \u00e9s una t\u00e8cnica que permet donar la sensaci\u00f3 de profunditat despla\u00e7ant diverses capes d’imatges a velocitats lleugerament diferents<\/strong>. Si b\u00e9 s’utilitza des de fa d\u00e8cades en l’animaci\u00f3 i els videojocs, una de les primeres p\u00e0gines web que va utilitzar aquesta t\u00e8cnica la van dissenyar Ian Coyle i Duane King<\/strong> per a Nike el 2011, i des de llavors s’ha popularitzat com un recurs m\u00e9s en el disseny i desenvolupament de p\u00e0gines web.<\/p>\n

Gr\u00e0cies a l’\u00fas combinat de CSS i JavaScript, els desenvolupadors estan creant llocs web que abans nom\u00e9s eren possibles amb tecnologia Flash.<\/p><\/blockquote>\n

Aquesta t\u00e8cnica no solament es pot usar per a presentar el contingut d’un web de manera m\u00e9s atractiva, sin\u00f3 tamb\u00e9 amb finalitats narratives<\/strong>: a mesura que l’usuari fa scroll<\/em> (en vertical o en horitzontal), avan\u00e7a en la narraci\u00f3 d’una hist\u00f2ria (vegeu-ne aqu\u00ed alguns exemples<\/a>). De fet, alguns ja han batejat aquesta t\u00e8cnica amb el nom de scrollytelling<\/em>, i disposa d’exemples brillants creats per l’equip de The New York Times<\/a>.<\/p>\n

No obstant aix\u00f2, cal tenir en compte que usar aquesta t\u00e8cnica en el web no sempre \u00e9s f\u00e0cil: en fer servir diverses capes (normalment imatges d’alta resoluci\u00f3), la c\u00e0rrega de la p\u00e0gina pot eternitzar-se, fins al punt de deixar-la inaccessible.<\/p>\n

M\u00e9s informaci\u00f3:<\/strong>
\n– Parallax scrolling: an introduction<\/a>
\n– Behind the scenes of Nike Better World<\/a>. Article que explica com es va fer el fam\u00f3s web de Nike que va usar per primera vegada la t\u00e8cnica de parallax scrolling<\/em>.
\n– Scrollytelling.com<\/a>. P\u00e0gina dedicada a recopilar exemples de narracions que avancen a mesura que l’usuari fa scroll<\/em>.<\/p>\n

Eines i recursos<\/h1>\n