El efecto scrolling parallax es una de esas tendencias de diseño web que llegó para quedarse. Una poderosa herramienta que nos ha acompañado por décadas.
Si te parece que nos equivocamos al decir “décadas”, sigue leyendo. De seguro también te sorprenderá saber porqué la imagen principal de este artículo es una ilustración del castillo de Disney.
Pongámonos medievales para acompañar un poco el título de este artículo
Scrolling parallax fue, durante un largo tiempo, la espada predilecta que los diseñadores usaron para acabar con la tiranía del tedio en la web. Pero acabó desaparecida en las enormes eras del olvido.
Quienes usaron esta técnica fueron al campo de batalla y volvieron victoriosos.
Se contaban historias increíbles acerca de los portadores de la mítica «espada». Se decía que traería la luz a nuestro reino; sin embargo, ella misma fue abandonada en la oscuridad, de la que espera algún día ser rescatada.
Hoy, solo unos pocos recuerdan cómo usar el poder de esta espada. Y es el deber de los antiguos caballeros transmitir los viejos misterios. Todo, con el afán de que el pasado encuentre cabida en los tiempos que corren y que el diseño web nunca más caiga en manos del maligno tedio.
– Hasta aquí lo medieval
¿En qué consiste el efecto Scrolling Parallax?
Los que llevan un tiempo rondando el mundo del frontend o de la web en general ya lo saben. Es básicamente un background panorámico, producto de la diferencia entre la velocidad en la que se desplaza dicho background y el contenido que se muestra encima de este, dando la sensación de que los objetos se desplazan en tres dimensiones
https://blog.grupoapok.com/un-diseno-web-desactualizado-te-hace-perder-clientes/
Este efecto es brutalmente poderoso cuando se trata de hacer storytelling web ya que, por lo general, suele captar rápidamente la atención de los usuarios y acompaña muy bien la disposición secuencial del contenido. Por lo que es perfecto para una presentación web de tu producto en una landing page, por ejemplo.
En nuestro tiempo, con el auge que ha tomado el flat design, efectos como este aportan una profundidad en el diseño de las páginas web que es de agradecerse.
El origen fue Disney
Podemos decir que el efecto scrolling parallax es ya algo algo viejo, y no nos estaremos equivocando. Pero no porque tenga unos cuantos años en el mundo de la web, sino porque es una técnica que comenzó a ser usada en el siglo XX, por Disney (aquí se resuelve el misterio de la imagen principal de este artículo).
Este efecto se llamó en sus inicios “Cámara multiplano”. Pero… mira en qué consiste la técnica
Efecto scrolling parallax, horizontal y vertical
Sea en sentido horizontal o vertical la esencia de su funcionamiento es el mismo y el efecto sigue generando las mismas sensaciones.
Si quieres ver ejemplos de scrolling parallax en dirección vertical puedes ir a dogstudio.co/mx. Un estudio multidisciplinario en el que mezclan arte, diseño y tecnología.
Y para ver scrolling parallax horizontal, además de entretenerte un buen rato, puedes ver esta pequeña novela narrada de un modo bastante inusual.
Jugar con el scroll de tu web
Scrolling parallax es solo una de las cosas que puedes hacer para enriquecer el scrolling de tu sitio web.
Fíjate cómo usamos nosotros el scroll de nuestra web, haciendo que el panel izquierdo muestre información acorde a aquello que aparece mientras el usuario se mueve hacia abajo o hacia arriba en el sitio.
Apök | Pasión por las ideas – Ver vídeo
Es nuestra forma de aportar dinamismo y síntesis a aquellas cosas que consideramos son importantes para el usuario. De esta forma se puede encontrar fácilmente lo que se necesita.
Realiza tú mismo este efecto de una forma sencilla, usando CSS + HTML
En este punto, quizás, te esté provocando aprender cómo se aplica el efecto scrolling parallax en la web.
¡Tus deseos son órdenes!… Mira el ejemplo que creamos para ti en CodePen.
Recuerda: algunas cosas viejas siguen siendo útiles
Esperamos que este artículo haya sido de tu agrado. Si es así, compártelo con otros, para que puedan sacarle provecho.
Te dejamos acá otros artículo que podrían gustarte.
- Perfil tecnológico más demandado por las empresas dentro de LATAM
- Staffing TI: Qué es y cómo te ayuda a encontrar talento tecnológico
- Qué es el fit cultural y cómo puede ayudarte a escoger al mejor talento
- Una lista de software para desarrollo de apps utilizando No-Code
- Las grandes empresas del mundo apenas se recuperan del reciente apagón informático
- Meta quiere usar tus publicaciones y fotos para entrenar su IA
¡Atención! Uno de nuestros redactores ha preparado con mucho cariño esta información para ti. ¡No te la pierdas! Descubre datos útiles y divertidos que te encantarán. Si te ha gustado, no dudes en volver por más cuando quieras. ¡Te esperamos!
