¿Qué es el Parallax?

Aunque parezca una tendencia muy actual (y de hecho lo es en el mundo del diseño web), el Parallax es en realidad un truco con mucha historia, inventado por Disney para dotar a sus películas de dibujos animados de una ligera tridimensionalidad, intentando lograr con ello un mayor realismo. El invento se bautizó como “cámara multiplano” y más tarde se adaptó al mundo de los videjuegos en 2D, como Moon Patrol (1982).

Ideal para Storytelling

Una web con Parallax queda muy molona, pero en realidad no es conveniente usarlo por el simple hecho de seguir la tendencia. La presencia de este tipo de efectos puede ser tan sorprendente para el usuario como cansina, así que no te la juegues. Lo ideal es que aproveches este recurso estético como complemento narrativo, y lo cierto es que el Parallax es perfecto para landing pages, o webs que tengan algo muy concreto que contar en varios pasos. En estos casos, el efecto de profundidad y linealidad que proporcina el Parallax son perfectos para sumergir al usuario en la historia con una experiencia comunicativa mucho más divertida y cercana a otros medios como el videojuego o el cómic.

¿Cómo se hace el efecto Parallax?

Un poquito de HTML5 de CSS3 es suficiente para crear la ilusión de profundidad que proporciona un Parallax. Si te gusta trastear con el código hay un montón de tutoriales online que están muy bien, como el de Pixel Acres o el de Tuts+.

Pero si no quieres complicarte la vida, prueba Parallax.js, una práctica librería de javascript que además detecta la orientación de los dispositivos móviles a través del giroscopio y el acelerómetro, genial.

30 ejemplos geniales: https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html

Video para aprender a hacer un efecto parallax:




Ejemplos con codigo: