El parallax scrolling és una tècnica que permet donar la sensació de profunditat desplaçant diverses capes d’imatges a velocitats lleugerament diferents. Si bé s’utilitza des de fa dècades en l’animació i els videojocs, una de les primeres pàgines web que va utilitzar aquesta tècnica la van dissenyar Ian Coyle i Duane King per a Nike el 2011, i des de llavors s’ha popularitzat com un recurs més en el disseny i desenvolupament de pàgines web.
Gràcies a l’ús combinat de CSS i JavaScript, els desenvolupadors estan creant llocs web que abans només eren possibles amb tecnologia Flash.
Aquesta tècnica no solament es pot usar per a presentar el contingut d’un web de manera més atractiva, sinó també amb finalitats narratives: a mesura que l’usuari fa scroll (en vertical o en horitzontal), avança en la narració d’una història (vegeu-ne aquí alguns exemples). De fet, alguns ja han batejat aquesta tècnica amb el nom de scrollytelling, i disposa d’exemples brillants creats per l’equip de The New York Times.
No obstant això, cal tenir en compte que usar aquesta tècnica en el web no sempre és fàcil: en fer servir diverses capes (normalment imatges d’alta resolució), la càrrega de la pàgina pot eternitzar-se, fins al punt de deixar-la inaccessible.
Més informació:
– Parallax scrolling: an introduction
– Behind the scenes of Nike Better World. Article que explica com es va fer el famós web de Nike que va usar per primera vegada la tècnica de parallax scrolling.
– Scrollytelling.com. Pàgina dedicada a recopilar exemples de narracions que avancen a mesura que l’usuari fa scroll.
Eines i recursos
- Parallax Done Right. Interessant article de Dave Gamache (dissenyador a medium.com) amb consells tècnics per a desenvolupar un web amb la tècnica de parallax scrolling.
- Parallax.js. Motor parallax que reacciona a l’orientació del dispositiu (tauleta, mòbil, etc.). Si no es detecta un giroscopi, el motor usa la posició del punter del ratolí per a desplaçar la imatge.
- Skrollr. Biblioteca JavaScript per a recrear l’efecte de paral·laxi en navegadors web, iOS i Android.
- Parallax Scrolling jQuery plugin. Biblioteca jQuery per a implementar l’efecte de parallax scrolling en pàgines web.