Cada vez que hablamos de las nuevas tendencias en diseño web o que nos proponen nuevos proyectos siempre surge un concepto clave: Parallax.

El diseño Parallax permite proporcionar un elemento más agradable, moderno y profesional al diseño de nuestra página web. Pero, ¿qué hay detrás del diseño de parallax?

El efecto parallax le aporta movimiento al diseño de una página web. Generando una ilusión de profundidad, nos permite jugar con diferentes velocidades y, sobre todo, niveles en el que dos o más objetos en un plano 2D aportan una animación. Ahora estamos viviendo el gran ‘boom’ de este tipo de presentación de contenidos en web, realmente los diseñadores de videojuegos y otros artistas llevan utilizándola desde hace muchos años.

El desuso de Flash y el auge del diseño plano han obligado a los diseñadores a dotar a las web de dinamismo a través de nuevos elementos. Además, el auge de la navegación a través de móviles, en el que su navegación es vertical, ha facilitado que el scroll sea un elemento imprescindible en cualquier web.

Un diseño muy rompedor, pero ¿cómo funciona?

A la hora de diseñar una web, el uso de elementos parallax nos permiten varias opciones. Nos permite crear un espacio único para separar dos zonas de una web, para resaltar un contenido frente a otro, pero también para contar historias. Las opciones son tan infinitas como la creatividad del diseñador.

La tecnología necesaria ha cambiado mucho en los últimos años.

La tecnología ha cambiado mucho desde ese vídeo de Disney. Ahora no es necesaria una cámara y un dibujante para crear el efecto Parallax, pero sí tecnologías web como HTML5, JavaScript y CSS. Es una tecnología muy testada y utilizada en diferentes usos más allá de los elementos Parallax. De hecho, ya existen librerías muy populares: parallax.js, skrollr.js o jarallax.js.

Además, debemos tener en cuenta que la carga de estos archivos debe ser muy fluida. Si tardan demasiado el usuario podría desesperarse y abandonar la web. Debemos intentar utilizar imágenes optimizadas para acelerar su carga.

Repasamos algunos ejemplos de webs con elementos Parallax

Desarrollar Storytelling

Cuando el elemento Parallax estructura toda la web puede ser el hilo argumental ideal para desarrollar toda una narración. Este recursos narrativo puede ayudarnos en landing pages o definir procesos. Son ideales para sumergir al usuario en la historia con una experiencia única y más divertida.

Peugeot ha sabido sorprender a todos creando una novela gráfica desarrollada en Parallax.

Otra buena introducción a nuestra historia pudiera ser la que han creado en parallax.js para presentar esta librería de javascript que permite crear este efecto tan visual.

Procesos de trabajo

Los creadores de La Vida de Pi quisieron plasmar el enorme trabajo de producción y post-producción que les llevó una película tan compleja. Para ello, crearon una landing page en parallax para mostrar todo el proceso.

Infografías animadas

No solo es interesante mostrar el contenido en una infografía, si no poder compartir una zona u otra. En este sentido, crear una landing page es una forma más que interesante. Además, si lo mostramos de una forma llamativa y muy visual puede ser un gran activo. En este caso, nos muestran las razones por las que a nuestro cerebro le gustan las infografías.

Mostrar los casos de éxito

No es algo exclusivamente de diseñadores o de freelances, cada vez más las empresas necesitan mostrar sus casos de éxito para convencer a futuros clientes. Una web en Parallax es una gran oportunidad de mostrar una amplia oferta de servicios en un solo vistazo y de forma muy visual.

Información animada

Pero es que Parallax es algo más que una forma bonita de mostrar infografías, casos de éxito o, incluso, de contar historias… También puede ser un gran recursos para animar la información. Podemos crear un relato que mantendría el texto que necesitamos leer, pero añadiríamos imágenes en parallax, como han realizado en este relato publicado por The New York Times.