Parallax Scrolling en la narrativa web

Home / Desarrollo web / Parallax Scrolling en la narrativa web

Hace unos días, estando en casa con unos amigos, nos dio ese ataque de nostalgia en el que decides sacar unas cervezas y ponerte a rebuscar en la caja donde guardas las fotos de cuándo éramos críos. Entre risas y los inevitables “¡vaya pintas!”, una de mis amigas, instintivamente, intentó agrandar una de las fotos con los dedos como si se tratase de un móvil o una tablet. ¡Lo que dio de sí la anécdota!

A medida que la tecnología avanza se desarrollan nuevas narrativas audiovisuales. Hace algunas semanas expliqué en un post que, en diseño web, la manera en que estructuramos los diferentes elementos en pantalla es tan importante como los elementos en sí. Un espacio estratégicamente vacío, un color, un efecto, un movimiento, etc. son parte de la narrativa y, en ocasiones, son tan importantes que, sin ellos, la historia deja de tener sentido.

Desde la llegada del jQuery, el HTML5 y el CSS3 ha nacido un nuevo modelo de diseño web llamado Parallax Scrolling. Este efecto se basa en los antiguos videojuegos tipo Moon Patrol, Mario Bros o Sonic. En estos juegos el escenario se basaba en una capa estática y varias capas que se movían a diferentes velocidades. De este modo, los juegos en 2D conseguían dar efecto de profundidad.


Este es el efecto que se crea en algunas de las webs que os presentaremos ahora. En ellas, a través de este efecto, se crea una sensación de unión entre las diferentes pantallas de manera que el resultado final es una única historia. Hasta ahora, uno de los principales problemas que presentaba este tipo de diseño era la dificultad que se generaba en cuanto al posicionamiento SEO, ya que alojaban todo el contenido bajo la misma URL. Este problema se ha solucionado dividiendo el contenido en páginas con diferentes rutas (a pesar de que visualmente estén en la misma pantalla).

Aquí tenéis algunos ejemplos de webs diseñadas con Parallax Scrolling:

 

 

 

 

 

 

Y para los nostálgicos, una última recomendación. (Se aconseja no abrir durante horario laboral). ¡Feliz Parallax Scrolling!

Dejar un comentario

PUBLICAR COMENTARIO Volver arriba

Contáctanos

We're not around right now. But you can send us an email and we'll get back to you, asap.