El parallax scrolling es una técnica que permite dar la sensación de profundidad a través del desplazamiento de diversas capas de imágenes a velocidades ligeramente diferentes. A pesar de que se utiliza desde hace décadas en la animación y los videojuegos, una de las primeras páginas web en utilizar esta técnica fue diseñada en 2011 por Ian Coyle y Duane King para Nike, y desde entonces se ha popularizado como un recurso más en el diseño y desarrollo de páginas web.

Gracias al uso combinado de CSS y Javascript, los desarrolladores están creando sitios web que antes solo eran posibles con tecnología Flash.

Esta técnica se puede usar no solo para presentar el contenido de una web de manera más atractiva, sino también con fines narrativos: a medida que el usuario va haciendo scroll (ya sea en vertical u horizontal), va avanzando en la narración de una historia (podéis ver aquí algunos ejemplos). De hecho, esta técnica ya ha sido bautizada por algunos como scrollytelling, y cuenta con brillantes ejemplos realizados por el equipo de The New York Times.

Sin embargo, hay que tener en cuenta que usar esta técnica en la web no siempre es fácil: al usar varias capas (normalmente imágenes en alta resolución), la carga de la página puede eternizarse, hasta el punto de dejarla inaccesible.

Más información:
– Parallax scrolling: an introduction.
– Behind the scenes of Nike Better World. Artículo que explica el “cómo se hizo” la famosa web de Nike que usó por primera vez la técnica de parallax scrolling.
– Scrollytelling.com. Página dedicada a recopilar ejemplos de narraciones que avanzan a medida que el usuario hace scroll.

Herramientas y recursos

• Parallax Done Right. Interesante artículo de Dave Gamache (diseñador en medium.com) con consejos técnicos para desarrollar una web con la técnica de parallax scrolling.
• Parallax.js. Motor parallax que reacciona a la orientación del dispositivo (tableta, móvil, etc.). Si no se detecta un giroscopio, el motor usa la posición del puntero del ratón para desplazar la imagen.
• Skrollr. Librería Javascript para recrear el efecto de parallax en navegadores web, iOS y Android.
• Parallax Scrolling jQuery plugin. Librería jQuery para implementar el efecto de parallax scrolling en páginas web.