El diseño web en parallax o paralaje está claramente de moda, pero ¿es conveniente su uso?
El parallax consiste en un efecto que, al acceder a una web y clicar en un elemento —normalmente una flecha o una parte del menú—, la página hace un salto a ese contenido. El salto se realiza a un contenido que hasta ahora no veías, situado en otra parte del mismo HTML, a una velocidad diferente del scroll habitual, generando una sensación de profundidad y movimiento. De hecho, la clave es que el fondo de la web y el contenido se mueven a diferente velocidad.
El efecto parallax o paralaje fue inventado por Disney para transmitir un cierto efecto tridimensional en sus películas de dibujos animados.
La clave del parallax es que toda la información está en una única página web, concretamente en un único HTML. Además, los saltos deben ser de pantalla completa para que se dé el efecto. Esta técnica se ha popularizado desde que Flash ha caído en desuso y hemos asistido a un descenso del movimiento en las páginas web. Su inclusión en las típicas plantillas de WordPress también ha potenciado el uso del parallax.
El uso del parallax en diseño web es vistoso e interesante para storyboards o cuando intentamos explicar un relato en una secuencia lineal y en bloques consecutivos. No requiere conocimientos avanzados de HTML5 o CSS3, y existen librerías como parallax.js que te pueden servir para implementarlo en tu página web.
Al cargar todo el sitio web en una única página o HTML y depender de múltiples archivos .js, la web pesa más y esto perjudica gravemente la velocidad de carga, ya que hay que esperar a que se cargue todo el archivo para acceder a la información. Esto ha llevado incluso a recuperar antiguos preloaders. En móviles o tablets con conexión de datos móviles, el problema se agrava. Esta lentitud penaliza además el posicionamiento web o SEO. El uso de CDN y la minificación de CSS y .js es obligatorio si se usa parallax.
La usabilidad se ve perjudicada por el tiempo de carga, lo que hace que muchos usuarios no tengan paciencia y abandonen la web antes de ver el contenido. Esto eleva la tasa de rebote. Además, los saltos suelen estar indicados con pequeñas flechas o secciones de menú, lo que a menudo dificulta el acceso a la información.
El parallax afecta negativamente al SEO no solo por la velocidad de carga, sino porque las webs no se organizan por contenidos individuales. No podemos optimizar cada página o HTML para una palabra clave concreta. Solo disponemos de un único title y description para todo el sitio web.
Algunos sitios web que utilizan el efecto parallax de manera efectiva incluyen:
Para añadir el efecto parallax:
El efecto parallax es una herramienta poderosa en el diseño web moderno que, cuando se utiliza adecuadamente, puede mejorar significativamente la experiencia del usuario y la estética del sitio. Sin embargo, es esencial implementarlo con cuidado para evitar problemas de rendimiento o accesibilidad. Nuestro consejo sería usar únicamente parallax en proyectos web donde desees explicar un relato en una secuencia lineal y en bloques consecutivos y para los que el posicionamiento web o SEO no sea importante.
¿Tienes un proyecto en mente? Cuéntanoslo
El efecto parallax convierte el scroll en una experiencia visual envolvente que cautiva al usuario desde el primer movimiento.