PARALLAX

¿QUE ES PARALLAX?

El termino de "parallax" (paralaje) se utilizo por primera vez en el efecto visual que se utilizaba en los videojuegos 2D que ademas utilizaban diferentes imágenes de fondo que iban a diferentes velocidades, una entre otra, que permiten al usuario poder tener una ilusión óptica de que el paisaje o imagen que se esta viendo reproducir en ese momento tiene profundidad, como si no se tratara de un simple diseño 2D. Este efecto se lograba reduciendo la velocidad del fondo en relación a las demás imágenes que estaban sobre este, para que pareciera que en realidad este esta mas lejos de lo que realmente esta. Una de las empresas que mas beneficio le saco a esta técnica es nada mas y nada menos que el mismo Walt Disney con la animación de sus caricaturas con diseño parallax utilizando la "cámara multiplano". Aquí un vídeo donde él mismo nos explica de que manera funciona:

De esta misma manera puede aplicarse esta misma técnica para el diseño de sitios web, donde el fondo del sitio, o el sitio en general, posee un fondo que se mueve a diferente velocidad que las otras capas mas externas, que en este caso, bien podría ser la información relevante para el tema, imágenes, vídeos e incluso diversas animaciones. Esta técnica representa una importante herramienta par múltiples aplicaciones creativas y que hoy en dia, representa una tendencia en el desarrollo web al ser un elemento muy vistoso y llamativo. 

De forma personal, si ustedes quieren ver este efecto por ustedes mismo, nosotros como editores de este blog, recomendamos visitar el sitio de "The Boat" para que puedan vivir una experiencia bastante creativa y original en cuanto al uso del parallax.

La técnica de parallax funciona de la manera siguiente. Se toman dos puntos de vista diferentes A y B que representan los ojos de una persona. Estos miran hacia la pantalla donde se encuentra la imagen, sin embargo, antes de que los ojos puedan tener una imagen del fondo de la pantalla, hay un objeto que se encuentra en medio de estos dos, por lo que, mientras los ojos observan este objeto de forma mas detenida, el objeto del fondo sale del foco y forma parte nada mas de la decoración de este objeto que los ojos observan, lo que da el sentimiento de profundidad.

Como hemos dicho en reiteradas ocasiones, para realizar el efecto parallax es necesario poseer varias imágenes distribuidas en capas, una tras otra, y al final una imagen que represente el fondo de toda la animación. Un ejemplo mas claro es el que se presenta a continuación, el cual esta en HTML:

Cada uno de los módulos representa una imagen diferente para simular la profundidad.

Video: ¿Que es Parallax?