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.
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:
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.
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:
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?
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.
¿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.
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.
¿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.
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.