¿Qué es el Parallax y cómo se crea?

Si quieres estar a la última en marketing online, ¡necesitas saberlo todo sobre Parallax! La última tendencia en diseño web nos sirve para dar rienda suelta a la creatividad y lanzar webs alucinantes que parecen estar en tres dimensiones.

Y lo mejor de todo: usar Parallax es mucho más fácil de lo que piensas, ya que existen plugins especialmente diseñados que nos facilitan enormemente la tarea. Vamos a ver cuáles son las claves de esta tendencia.

¿Qué es Parallax?

El Parallax (también llamado “Parallax scrolling”) es un efecto de diseño web que consiste en simular el desplazamiento de los objetos de una web a diferentes velocidades y en distintas “capas”. Al crear la ilusión de que hay un fondo y unas figuras en primer plano, consigue engañar a nuestro cerebro para que pensemos que estamos viendo un paisaje en 3D.

El Parallax se basa en un fenómeno de la percepción llamado “paralaje”, que consiste en que la posición de un objeto en el campo visual cambia en función del punto desde donde se observa. Si esto te suena complicado, vamos a hacer un experimento muy sencillo para que lo veas con tus propios ojos:

• Escoge un objeto que esté a un par de metros de ti (por ejemplo, un cuadro en la pared o una ventana nos podrían servir).
• Extiende tu brazo con el pulgar hacia arriba.
• Tápate el ojo izquierdo y observa la posición de tu pulgar en relación al objeto de referencia del fondo.
• Ahora tápate el ojo derecho y observa cómo cambia… ¡sorpresa!

La técnica de animación en Parallax en sí no es nada nuevo, ya que se usaba en películas de animación e incluso en videojuegos ochenteros. Pero hasta hace poco no había saltado a las páginas web.

Para los marketers, el Parallax es un recurso muy útil para mejorar el atractivo de las páginas web y animar a los usuarios a quedarse más tiempo e interactuar con ellas. Dado que el efecto se manifiesta al hacer scroll, los usuarios tienen un incentivo extra para navegar. Además, resulta muy apropiado para pantallas verticales, como las de los móviles.

Cómo implementar Parallax en tus webs

Diseñar un sitio con Parallax scrolling puede ser un proceso largo y complicado, que requiere conocimientos avanzados de CSS, Javascript y diseño web. Pero antes de que salgas corriendo, debes saber que esta labor puede ser mucho más fácil gracias a los plugins especializados en este tipo de efectos.

Además de ayudarte a crear sitios con este tipo de diseño, también cuentan con librerías de efectos Parallax que te permiten mejorar aún más el aspecto de la página. Estos son algunos de los más populares:

• ScrollMagic: uno de los plugins de jquery más populares y con más funcionalidades. Te permite crear efectos de animación basados en la posición del scroll: puedes dejar objetos fijos, moverlos o animarlos a medida que te desplazas por la pantalla, además de crear efectos Parallax. Es altamente personalizable, pesa poco y cuenta con buena documentación y recursos externos.
• skrollr: la mejor baza de este plugin es su simplicidad, ya que no requiere conocimientos de Javascript ni jQuery (con HTML y CSS es suficiente). skrollr usa atributos de datos para animar cualquier elemento HTML, pero eso sí, los efectos solo durarán mientras el usuario esté haciendo scroll.
• Page Piling: este plugin de jQuery te permite crear diferentes “capas” para el diseño de tu website, que se apilan unas encima de otras. Al hacer scroll o acceder a la URL, se activa una animación de deslizamiento que las va revelando. Page Piling es compatible con todas las plataformas (ordenadores, tablets y móviles) y funciona en la mayoría de los navegadores.
• Stellar: un plugin de jQuery pensado para facilitar la implementación de Parallax scrolling. La animación de cada elemento se puede configurar individualmente usando atributos de datos. Incluso permite crear fondos que se reposicionan al hacer scroll y que vuelven a su posición original al llegar a cierto punto. Puedes hacer auténticas virguerías con él.

5 ejemplos de Parallax en acción

Y para terminar, ¡vamos a inspirarnos un poco! Estas son algunas de las webs que ya están usando Parallax para conseguir efectos increíbles. ¿Te animas a sumarte con la tuya?

FireWatch

La página de inicio de la web este videojuego sin duda ha sabido sacar todo el jugo a Parallax, ya que tiene ¡hasta 6 capas! que se desplazan a diferentes velocidades para dar una sensación de profundidad, desde un acantilado en primer plano hasta las lejanas montañas. Al desplazarnos hacia abajo, la página va mostrando la información que se encuentra en la primera página.

The Walking Dead

¿Cómo es el proceso de un actor desde ser una persona normal hasta convertirse en un zombi de The Walking Dead? En este caso se explica a través de una infografía estilo cómic que hace un gran uso del Parallax en los fondos. Así, parece que el protagonista se desplaza realmente a través de un mundo en 3D.

Peugeot Hybrid4

Esta novela gráfica es un ejemplo excelente de storytelling al servicio de una marca. A través de la historia, la web presenta las características de la nueva tecnología del Hybrid4.

El usuario puede reproducir la novela en modo automático o bien hacerse cargo de mover él mismo el scroll para que los efectos se activen. Además, el sonido también contribuye para crear una experiencia de Parallax armónica.

NASA

¿Qué mejor uso del Parallax que ilustrar la inmensidad del espacio? En esta página, el usuario puede emprender su propio viaje de explorador espacial y viajar de planeta en planeta sobre un fondo de estrellas que se desplazan.

Avenir Clinic

Un ejemplo muy sencillo, pero ideal para mostrar que el Parallax puede servir para dar vida a las webs de marcas de todo tipo. En este caso, se trata de una clínica dental que ha combinado módulos de colores desplegables sobre un fondo blanco. Y de esta manera tan simple, ha logrado crear un sitio web atractivo y que destaca sobre la competencia.