Parallax Scrolling en Diseño Web - Conceptos

Ahora que hemos entendido el origen y los antecedentes de Parallax, comprendamos la historia y el concepto de desplazamiento de Parallax en el diseño web.

Definición

Según Wikipedia - Parallax scrolling es una técnica en gráficos por computadora donde las imágenes de fondo pasan por la cámara más lentamente que las imágenes de primer plano, creando una ilusión de profundidad en una escena 2D y agregando a la sensación de inmersión en la experiencia virtual.

El desplazamiento de Parallax se empleó en los primeros días de la animación. Muchos de los estudios de animación (como Disney) utilizaron cámaras multiplano para lograr el efecto de paralaje.

A medida que las tecnologías de gráficos por computadora evolucionaron junto con los marcos de vanguardia como JavaScript, los diseñadores y desarrolladores web ahora pueden crear sitios con una rica experiencia. Aunque el desplazamiento de paralaje comenzó con un par de capas, se llevó al siguiente nivel con barras de desplazamiento en las computadoras. La técnica siguió siendo la misma, pero debido a su aplicación para Scrolling, se creó una experiencia única.

Ejemplos

El desplazamiento de paralaje se utiliza ampliamente en los sitios web modernos. Dado que el desplazamiento de paralaje se puede implementar para móviles y sitios de escritorio de una sola vez, la popularidad de dichos sitios se ha disparado en los últimos años.

A continuación se muestran algunos ejemplos de sitios web que emplean el desplazamiento de paralaje:

Bear Grylls

A medida que avanza la animación, podrá ver cómo el contenido del sitio web se está volviendo interactivo. A medida que avanza, se revelará más y más información.

Haga que su dinero importe

Para presentar al lector los beneficios de una cooperativa de crédito, este sitio lo lleva a través de una historia. A medida que avanza, la información se revela de una manera única.

Infografía de InfoQuest

El viaje de un empleado para encontrar información crítica en su lugar de trabajo se representa mediante la experiencia de desplazamiento.

GitHub 404

Esto es un poco diferente de la experiencia de paralaje habitual, el objeto en la parte superior de la pantalla se mueve al pasar el puntero del mouse sobre él.

Aplicaciones de Parallax Scrolling

A estas alturas, debería quedar claro a partir de la definición y los antecedentes que el desplazamiento de paralaje es útil en una amplia variedad de medios digitales. Algunas de las aplicaciones son el desplazamiento de paralaje a continuación:

Diseño de juego

El desplazamiento Parallax se usa ampliamente en el diseño de juegos. El personaje debe moverse en relación con el fondo y con el control del jugador mediante el mouse y el teclado, toda la experiencia debe cambiar. El diseño del juego es una forma muy primitiva pero moderna de usar el desplazamiento de paralaje.

Sitios web

Para que el usuario se sienta atraído por el sitio web, es importante una experiencia dinámica y diferente. Como habrá notado en los ejemplos de sitios web discutidos anteriormente, el desplazamiento de paralaje aumenta el contenido debido a su representación de manera interactiva.