Parallax: Aprende todo sobre este scrolling creativo en ecosistemas digitales y tradicionales con los mejores ejemplos

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.

Consigue 25 dólares para tu próximo sitio WordPress

Tf*idf: La frecuencia de términos vs Frecuencia inversa del documento es una práctica funcional a tu SEO dentro del marketing de contenidos

Puede que te parezca extra√Īo el t√≠tulo del art√≠culo de hoy, pero, posiblemente el Tf*idf sea una m√©trica que seguro utilizaste sin saberlo. En especial s√≠ tu sitio web o blog aplica marketing de contenidos para posicionarse conforme a los motores de b√ļsqueda. Si una de las patas centrales de tu negocio o actividad profesional

Read More ¬Ľ

Metodología Agile: qué es y cómo aplicarla a tu proyecto de alto rendimiento en tu flujo de trabajo

Cuando hablamos de cambios y procesos tecnológicos relacionados con la transformación digital, tendremos una gran cantidad de nuevos conceptos dentro de la nube de ideas de temas relacionados. Sin embargo, sí hablamos propiamente de la gestión de proyectos, un concepto se destaca por sobre el resto, estoy hablando, de la metodología Agile. Entonces, hablando netamente

Read More ¬Ľ

Mindset: Aprende sobre el poder de la mentalidad positiva o growth mindset ¬ęprogresivo¬Ľ y a detectar tu propio mindset con ejemplos

Este es un tema muy propio del desarrollo personal, pues, tener una mentalidad correcta, es crucial para tu crecimiento. Entonces, toca hablar del Mindset, y de los marcos mentales relacionados con el mismo. El Mindset es un t√©rmino que ha ganado mucha popularidad en los √ļltimos a√Īos. Este concepto es simple y la verdad, no

Read More ¬Ľ

Liderazgo: Aprende qué es este concepto con definiciones y ejemplos, los tipos de líderes, algunas frases

Bueno, se viene un post cortito y serio sobre Liderazgo y desarrollo personal. El liderazgo es una cualidad importante que tienen todas las personas, independientemente de su área de interés; pues, el liderazgo se encuentra a muchos niveles y tiene muchos matices. En este post, intentaré definir el liderazgo, y mencionar los tipos de liderazgo

Read More ¬Ľ

Dise√Īo web: Aprende qu√© es y como un dise√Īo profesional puede ayudarte a posicionar tu sitio web con este post tutorial

Bueno, el dise√Īo web es un √°rea enfocada en el desarrollo de interfaces digitales, como el dise√Īo de sitios y aplicaciones para web ¬ęProgressive Web App¬Ľ. Para ello, los dise√Īadores web crean sitios utilizando lenguajes de programaci√≥n como HTML, CSS, JavaScript, e incluso otros tantos m√°s. Pero, siempre, el motivo del dise√Īo debe estar orientado

Read More ¬Ľ

Dise√Īo: Cuando el dise√Īo es tu pasi√≥n nada puede malir sal

‚ÄĒ La idea de este post ocurri√≥ mientras estaba escuchando la siguiente canci√≥n que seguramente comparta por aqu√≠ debajo. Mientras lo hac√≠a, no paraba de pensar en el meme que dice: ¬ęel dise√Īo gr√°fico es mi pasi√≥n¬ę. Bueno, siendo justos, tampoco soy un gran maestro del dise√Īo, pues, todo lo que engloba al dise√Īo requiere

Read More ¬Ľ
error: Content is protected !!