Parallax: Aprende todo sobre este scrolling creativo en ecosistemas digitales y tradicionales con los mejores ejemplos
By Bruchentko
Paral..¿qué? Lo viste mil veces, seguro: entras en una web, haces scroll y de repente el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías. Se llama Parallax y es una tendencia cada vez más extendida en el mundo del diseño web.
Ante la caída en desuso de Flash y el auge del diseño plano, este recurso es muy útil para dotar a las web de cierto dinamismo y contrarrestar la planitud. Tampoco hay que olvidar que los dispositivos móviles fomentan la verticalidad del diseño web por lo que el efecto de Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera.
Si quieres estar a la última moda en cuanto al desarrollo Frontend, — ¡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 el marketing, 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.
Implementando el parallax en tu sitio web
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 muchísimo 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.
5 ejemplos de Parallax en acción
Estas son algunas de las webs que ya están usando Parallax para conseguir efectos increíbles.
1. 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.
2. 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.
3. 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.
4. 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.
5. Ecuador
Este sitio posee ilustraciones de estilo Low Poly ↗, pero debido a cómo se han colocado los polígonos y el color que se le ha asociado, tiene un efecto 3D. Cada vez que nos desplazamos hacia abajo con el ratón, el texto aparece y pasamos a otros escenarios. Se emplea el parallax scrolling horizontal y ciertos elementos se encuentran siempre en movimiento.
¿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.
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.
El efecto 2.5D: cómo animar fotos y crear un Parallax
Sin duda, lo has visto decenas de veces: una fotografía fija dentro de un video que de alguna manera logra parecer tridimensional.
Muestra profundidad, diferentes planos de movimiento y quizás incluso partículas animadas o efectos de iluminación.
Si bien nuestra reacción inicial es asumir que las imágenes que estamos viendo son en realidad videos, o tal vez una animación 3D finamente detallada, siempre hay algún tipo de “señal” sutil que lo delata y nos permite saber que estamos mirando en un espacio extraño, entre dimensiones.
Aquí es donde a veces se pueden ver increíbles imágenes icónicas que cobran vida con gran estilo y profundidad que traen consigo sensaciones de “aww” y, a veces, incluso un poco de inquietud.
Para cualquier aspirante a artista de gráficos en movimiento, este artículo mostrará algunos principios e ideas detrás del control de movimiento 2.5D y tal vez lo inspire cuando vaya a su próximo proyecto que requiera este tipo de cosas.
1. El efecto de Parallax con una cuota de historia
Además de ser otro controlador para el efecto fotográfico 2.5D, el efecto de paralaje «o cambio de paralaje, como también se le conoce» es lo que sucede cuando creas la ilusión de profundidad con objetos bidimensionales completamente planos moviendo diferentes fondos y primer plano, elementos a diferentes velocidades.
Los objetos en primer plano se mueven más rápido, los elementos intermedios más lentos y los elementos de fondo lejanos son los más lentos.
Este efecto prevalecía en los videojuegos de desplazamiento lateral de las eras de 16 y 32 bits y se conocía como “desplazamiento de paralaje“.
Desplazaría diferentes partes del fondo y el primer plano a diferentes velocidades para crear la ilusión de profundidad, sin utilizar realmente el espacio 3D. Para un ejemplo del mundo real, mire por la ventana en su próximo viaje en tren.
Los postes y los automóviles más cercanos a usted se mueven a velocidades vertiginosas, mientras que los objetos más alejados de la vista se mueven mucho más lento «edificios lejanos, árboles o montañas, por ejemplo».
Los efectos de paralaje en la animación se crearon tomando múltiples capas de pinturas al óleo de fondo sobre vidrio y colocándolas en múltiples planos verticales con una cámara apuntando directamente hacia ellos.
Cada pintura se movió a diferentes velocidades según la distancia implícita de la cámara. Uno de los ejemplos más famosos de estos primeros sistemas es la cámara multiplano de Disney de 1937.
El dispositivo podría capturar hasta siete capas de obras de arte con una cámara móvil.
2. Crear el efecto hoy
El primer paso para crear nuestra profundidad implícita radica en separar el sujeto de nuestra fotografía del fondo y otros elementos.
En el siguiente ejemplo, tenemos dos soldadores trabajando en un I-Beam.
Primero, necesitamos preparar el archivo. Cada pieza que nos gustaría que se moviera a diferentes velocidades debe recortarse del fondo.
Una vez terminado, los espacios detrás de cada elemento deben pintarse, de modo que el objeto original no aparezca plano contra el fondo detrás de su contraparte separada en el espacio 3D.
3. Añadir profundidad
Una vez que hayamos terminado de cortar la imagen en Photoshop, es hora de importarla a After Effects para agregar esa profundidad tan necesaria.
Después de convertir todas las capas al espacio 3D, las sacamos a diferentes puntos en el eje Z y agregamos una cámara 3D, que será el único objeto que cambia de posición en la línea de tiempo.
También se le agrega un efecto de luz y partículas en 3D para ayudar a agregar algo de vida a la escena y crear la ilusión de chispas que salen volando de la antorcha de soldadura.
El texto animado cuenta la historia de este video en particular y también está situado en el espacio 3D.
4. Animando la escena
Una vez que todo se ha organizado en el espacio 3D, resta animar la intensidad de nuestra luz 3D con fotogramas clave. Con esto se dará el efecto de las chispas de soldadura y luz ambiental para evitar que la escena se vuelva demasiado oscura.
Finalmente, resta animar la cámara a lo largo de una ruta de movimiento para crear el cambio de paralaje y completar el efecto.
Y aquí hay un ejemplo de lo que sucede cuando se gira la cámara fuera de la vista normal y separamos las capas para ilustrar cómo funciona la escena.
Las escenas simples como el ejemplo diseccionado anterior generalmente contienen entre 10 y 20 capas, pero puede complicarse tanto como desee y tener más de 50 a 100 capas de profundidad.
Las escenas de océano, montaña y bosque ofrecen enormes posibilidades, pero no se limite. Hay toneladas de tutoriales sobre cómo crear este efecto, e incluso más ejemplos de su uso.
Conclusión:
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, podés 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.
Ahora si, para finalizar, quiero dejarte un regalo de 25 dólares para que puedas crear tu próximo sitio web en WordPress. Así, podrás comenzar a crear tu propio parallax para brindar experiencias de usuario únicas.
FAQs sobre el Parallax
¿Qué es Parallax?
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”.
¿Cómo implementar Parallax en tus webs?
- ScrollMagic
- Skrollr
- Page Piling
- Stellar
- Elementor Pro
¿Qué te ha parecido?
