Parallax: ¿Qué es y cómo se hace?

Si quieres estar a la última moda, ¡necesitas saber todo sobre el 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.

Usar Parallax es mucho más fácil de lo que parece, ya que existen plugins especialmente diseñados que nos facilitan enormemente la tarea.

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

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).
  • 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.
  • 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.
  • Elementor Pro: Hoy en día, el diseño web se ha simplificado muchisimo gracias a los plugins. Elementor es uno de los más populares, y en su versión PRO, tiene la opción de crear Parallax.

4 ejemplos de Parallax en acción

Estas son algunas de las webs que ya están usando Parallax para conseguir efectos increíbles.

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? Esta página lo 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.

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.

¿El diseño web Parallax afecta al SEO?

El Parallax le da un dinamismo increible a tu web, pero como dice el dicho: «No todo lo que brilla es oro». Y por esta razón, no tenemos que obviar que el diseño Parallax enlentece los tiempos de carga.

También tenemos que tener en cuenta que los dispositivos móviles fomentan la verticalidad del diseño web, por lo que el efecto Parallax es muy interesante para combatir el aburrido scroll y optimizar la experiencia de navegación del usuario.

50 elementos a comprobar en un checklist seo

Ventajas e inconvenientes del diseño web Parallax

Puntos fuertes

Resumiendo un poco los puntos fuertes de este estilo de diseño web Parallax son:

  • La fuerza visual que desprende ofrece un valor añadido, ya que rompe con la tendencia de clásica web de contenido estático
  • A través de un scroll más dinámico, se pueden crear historias, fomentando nuevas formas de creatividad (storetelling).
  • El usuario se involucra con la página web, debido a su óptima experiencia de usuario.

Puntos débiles

En contraparte, algunos de los inconvenientes del Parallax están relacionados con el posicionamiento orgánico. Si hacemos nuestro diseño de «una sola página» que albergue todo el contenido, no nos posicionará igual que con un diseño que cuenta con diferentes páginas y enlaces internos. Debido a la importancia de la tasa de rebote, que afecta nuestra experiencia de usuario (según Google).

  • El diseño web Parallax permite adaptar todo el contenido para como mucho 3 keywords. Entonces, no podremos atacar varios temas, si se trata de un nicho muy específico se resume en una palabra: «MESSIRVE».
  • Por practicamente la misma razon, sólo podremos atacar pocas (o una) etiquetas de metadatos. Porque lo tenemos un sólo título y una descripción para todo nuestro contenido.
  • URLs: la URL es única y en consecuencia nos volvemos a encontrar con el mismo problema de siempre: la imposibilidad de potenciar más keywords.
  • Sólo se pueden destacar textos en un H1: Google toma el encabezado H1 de cada página como referencia para identificar keywords relevantes.
  • Landing pages demasiado pesadas. Al tener todo nuestro contenido en una sola página, hay una sobrecarga de imágenes, texto y videos, que perjudica la experiencia de usuario.

¿Cómo implementar un diseño web Parallax sin que afecte al posicionamiento orgánico?

Todos los problemas del diseño web Parallax, que afectan al posicionamiento en buscadores, están relacionados con prácticas incorrectas (no con el código del diseño Parallax en sí).

Los sitios con diseño web Parallax tienen alojado todo el contenido en una misma página. En este caso, y no se podrá aprovechar los beneficios tales como de especificar un MetaTitle, Meta descripción, URL diferente para cada página, dificultando el posicionamiento de palabras clave long tail.

Una opción para ampliar tus prácticas SEO

Recordemos que al ser solo una landing, sólo podremos atacar pocos targets SEO. Pero, hay cosas que se pueden hacer. Por ejemplo, que el contenido aparezca a través de pestañas o pop ups que aparecen cuando el visitante cliquea o pasa el puntero por determinado objeto. Estas pestañas no son consideradas contenido oculto (muy penalizado por Google), ya que el usuario puede ver el contenido integro al interactuar con tu web.

Otra Solución más sencilla: utiliza el diseño web Parallax en parte de tus páginas, pero no en todo el sitio web.

Conclusión en pocas palabras

Si vas a trabajar sobre un nicho muy específico sirve. Si bien te penaliza en la performance (velocidad de carga). Por otro lado, estás ganando en calidad, que puede permitir más enlaces entrantes, y mejora en la experiencia de usuario.

En el caso de que vayas a laburar varios temas distintos, podes optar por un contenido liviano en general, y poner Parallax en determinadas partes de la página.

Si tu público target es muy indiferenciado, capaz el Parallax no sea la mejor opción.

error: Content is protected !!