Diseñando sitios web con efecto de paralaje

En diseño web, el efecto de paralaje consiste en otorgar sensación de tridimensionalidad a través del uso de elementos que parecen desplazarse en planos diferentes. En los sitios web que utilizan este recurso, cuando hacemos scroll (horizontal o vertical) diferentes objetos entran o salen de la pantalla en un nivel de profundidad superpuesto al del fondo.  En el sitio de los premios Awwwards hay muchos ejemplos increíbles que demuestran el potencial de esta modalidad de navegación, generalmente posibilitada por HTML5, CSS3 y JavaScript.

El efecto de paralaje es una de las tendencias más fuertes en el mundo del diseño web, pero antes de aplicarlo es bueno conocer tanto sus ventajas como sus desventajas.

  • Entretenimiento. El efecto de paralaje nació en los videojuegos de plataformas de los años 80. Por eso, es de esperar que los sitios web que utilizan este recurso sean muy divertidos y dinámicos.
  • Velocidad. Generalmente, los sitios web con efecto de paralaje tienen una sola página. En ella se concentran todas las secciones del sitio, permitiendo aplicar increíbles animaciones de transición para pasar de una a otra. Al estar todo el contenido en la misma página, se evita realizar nuevas peticiones al servidor. Sin embargo, las animaciones son complejas y suelen tardar mucho en cargar.
  • Experiencia de usuario. Las páginas con efecto de paralaje son como una película que debe reproducirse de principio a fin: para llegar a una sección dentro de la página, se deben atravesar las que vienen antes, a través del scroll. La ruta de navegación queda totalmente controlada por el desarrollador, pudiendo brindar exactamente el mensaje que quiere transmitir. Sin embargo, es probable que cuando el usuario vuelva a entrar al sitio no quiera volver a reproducir toda la animación para obtener la información que necesita. Hay que evitar que la secuencia quede demasiado larga.
  • Adaptabilidad. Por lo general, los sitios con efecto de paralaje no son responsivos: en una pantalla chica no lucirían bien. Además, no pueden verse en navegadores incompatibles con HTML5 o CSS3, ni menos aun con JavaScript deshabilitado.

Por último, hay que recordar que aplicar paralaje suma una importante dificultad al desarrollo y la actualización de un sitio web.