Cómo es el efecto Parallax Scrolling

El diseño web ha experimentado una evolución constante a lo largo de los años, y una de las técnicas más impactantes y populares que ha surgido es el efecto Parallax Scrolling (Desplazamiento de Paralaje).

Esta técnica ha revolucionado la forma en que los usuarios interactúan y experimentan los sitios web, al proporcionar una dimensión adicional y una sensación de profundidad al desplazarse por una página.

De esta manera, crea una ilusión de profundidad y movimiento en una página al combinar diferentes capas de elementos que se desplazan a diferentes velocidades mientras el usuario navega hacia abajo o hacia arriba haciendo scroll.

Estas capas pueden incluir imágenes, textos, gráficos y otros elementos visuales.

Este efecto llegó para revolucionar los gráficos en 2D y convertirse en una divertida experiencia en 3D por capas.

Esta técnica surgió de la cámara multiplano utilizada en la animación tradicional en la década de 1930.

Posteriormente, se popularizó en los gráficos y videojuegos arcade 2D en 1982.

El término ‘Parallax’ proviene de la astronomía, donde se utiliza para describir el cambio aparente en la posición de un objeto cuando se ve desde diferentes puntos de vista.

En diseño web, el efecto Parallax Scrolling aprovecha esta idea al mover los elementos en diferentes capas a velocidades diferentes, lo que crea una sensación de profundidad y una experiencia más inmersiva para el usuario.

En este artículo, exploraremos en detalle qué es Parallax Scrolling, cómo funciona y cómo ha cambiado la forma en que percibimos el diseño web.

¿Cómo funciona Parallax Scrolling?

El efecto Parallax Scrolling se basa en el principio de superposición de capas y el uso de desplazamiento en el navegador.

Cada capa de elementos se mueve a una velocidad diferente en relación con la posición de desplazamiento del usuario.

Las capas más cercanas al frente se mueven más rápidamente, mientras que las capas más alejadas se mueven más lentamente.

Esto crea un efecto tridimensional y da la ilusión de profundidad a medida que el usuario se desplaza por la página.

Para lograr este efecto, se utiliza CSS y JavaScript.

CSS se utiliza para establecer las propiedades de posición y velocidad de las capas, mientras que JavaScript se utiliza para controlar el desplazamiento y calcular la velocidad de cada capa en función de la posición del usuario en la página.

A continuación, se describen los pasos básicos de cómo funciona este efecto:

1. Estructura de capas: en primer lugar, se debe definir la estructura de capas que se utilizarán en el diseño. Cada capa contiene elementos visuales, como imágenes, texto u otros elementos gráficos, que se desplazarán a diferentes velocidades.
2. Asignación de velocidades: a cada capa se le asigna una velocidad de desplazamiento diferente. Las capas más cercanas al primer plano se mueven más rápido, mientras que las capas más alejadas se desplazan más lentamente. Esto crea la sensación de profundidad y distancia en el diseño.
3. Coordinación con el desplazamiento del usuario: a medida que el usuario se desplaza por la página, las capas se mueven de acuerdo con su velocidad asignada logrando crear la ilusión de que las capas están a diferentes distancias, generando una sensación de profundidad.
4. Interacción y efectos adicionales: además del desplazamiento diferencial de capas, se pueden agregar efectos adicionales para mejorar la experiencia. Esto puede incluir efectos de desvanecimiento, transiciones suaves entre capas o elementos que se mueven en diferentes direcciones.
5. Responsividad y optimización: es importante garantizar que el desplazamiento de paralaje sea responsivo y se vea bien en diferentes dispositivos y tamaños de pantalla. Se deben realizar pruebas y ajustes para asegurarse de que el efecto funcione de manera óptima en diferentes entornos.

Al combinar estos pasos, el efecto Parallax Scrolling crea una experiencia visualmente atractiva y envolvente para los usuarios al agregar profundidad, movimiento y vida a las páginas web.

Métodos del efecto Parallax Scrolling

Hay cuatro métodos principales sobre el desplazamiento de paralaje utilizados en los sistemas arcade, las consolas de videojuegos y las computadoras personales.

Método de capa

Algunos sistemas de visualización admiten varias capas de fondo que se pueden desplazar de forma independiente en direcciones tanto horizontal como vertical pudiendo componerse unas sobre otras, simulando una cámara multiplano.

En este sistema visual, un videojuego puede producir paralaje simplemente cambiando la posición de cada capa en una cantidad diferente en la misma dirección.

Las capas que se mueven más rápidamente se perciben como más cercanas a la cámara.

Las capas se pueden colocar delante del campo visual, por lo tanto, la capa que contiene los objetos con los que interactúa el jugador con el videojuego, por muchas razones, proporciona una mayor dimensión, oscureciendo parte de la acción del videojuego o para distraer al jugador a través de una ilusión óptica.

Método de Sprite

Los programadores también pueden crear pseudo capas de Sprites (objetos móviles controlables individualmente dibujados por hardware por encima o detrás de las capas) si están disponibles en el sistema visual.

Por ejemplo, Star Force, un shooter con desplazamiento vertical superior para NES, usó sprites para su campo estelar, mientras Final Fight para Super NES usó esta misma técnica directamente en su capa principal en el juego.

La computadora Commodore Amiga tiene sprites que pueden simular cualquier altura pudiendo establecerse horizontalmente con su coprocesador, lo que las hace ideales para este propósito.

Risky Woods en esta computadora, utiliza sprites multiplexados a través de su coprocesador para crear una capa de fondo de paralaje a pantalla completa como una alternativa al modo dual del sistema.

Método de patrón de repetición / animación

Las pantallas con scroll fabricadas con mosaicos individuales se pueden hacer para ‘flotar’ sobre una capa de fondo repetitiva animando los mapas de bits de los mosaicos individuales y así representar el efecto de paralaje.

El ciclo de colores se puede utilizar para animar mosaicos rápidamente en toda la pantalla. Este efecto de software da la ilusión de otra capa adicional.

Muchos juegos utilizaron esta técnica de scroll para un campo de estrellas, aunque a veces se logra un efecto más complejo o multidireccional.

Método Ráster

En gráficos con trama, las líneas de píxeles de una imagen se componen y se actualizan normalmente en el orden de arriba hacia abajo con un ligero retraso denominado ‘Intervalo de supresión horizontal’ que dibuja una línea entre otra, logrando dibujar la siguiente línea en ese intervalo.

Los juegos para consolas diseñados para chips gráficos más antiguos, como los de tercera y cuarta generación, como por ejemplo, los juegos de TV dedicados o las PC portátiles, aprovechan las características de la trama para crear la ilusión de más capas.

Algunos sistemas visuales tienen una sola capa, estos incluyen la mayoría de los sistemas clásicos de 8 bits (como Commodore 64, Nintendo Entertainment System, Sega Master System, PC Engine / TurboGrafx-16 y Game Boy original)

Generalmente, los juegos más sofisticados en estos sistemas dividen la capa en tiras horizontales, cada una con una posición y velocidad de desplazamiento diferentes.

Normalmente, las tiras más altas en la pantalla, representan cosas más alejadas de la cámara o, una tira estacionaria se fijará para mostrar la información de estado.

De esta manera, el programa esperará un espacio en blanco horizontal y cambiará la posición de desplazamiento de la capa justo antes de que el sistema visual comience a dibujar cada línea de exploración.

Esto se denomina ‘Efecto Raster’ y también es útil para cambiar la paleta de colores del sistema para proporcionar un fondo degradado.

Algunas plataformas (como Commodore 64, Amiga, Sega Master System, PC Engine / TurboGrafx-16, Sega Mega Drive / Genesis, Super NES, Game Boy, Game Boy Advance y Nintendo DS) proporcionan una interrupción en blanco para configurar automáticamente los registros independientemente del resto de programas.

Otros, como NES, requieren el uso de un código por tiempo de ciclo, que está especialmente escrito para que se lleve a cabo exactamente el tiempo de ejecución que toma el chip de video para dibujar una línea de exploración, o temporizadores que generan interrupciones después de un número determinado de líneas de escaneo que se hayan dibujado.

Muchos juegos de la consola NES utilizan esta técnica para dibujar sus barras de estado.

Por ejemplo, Teenage Mutant Ninja Turtles II: The Arcade Game y Vice: Project Doom, lo utilizan para desplazar las capas de fondo a diferentes velocidades.

Las técnicas de rasterización más avanzadas pueden producir efectos interesantes.

Un sistema puede lograr una profundidad de campo muy efectiva si se combinan capas con métodos rásteres.

Sonic the Hedgehog, Sonic The Hedgehog 2, ActRaiser, Lionheart y Street Fighter II utilizaron bien este efecto.

Si cada línea de exploración tiene su propia capa, se produce el efecto del clásico juego Pole Position, lo que crea una carretera pseudo-3D (o una cancha de básquet pseudo-3D como en NBA Jam) en un sistema 2D.

Si el sistema visual admite la rotación y el escalado además del desplazamiento, produce un efecto conocido como Mode 7, un cambio de rotación y factores de escala pueden dibujar la proyección de un plano (como en F-Zero y Super Mario Kart) o pueden deformar el campo de juego para crear un factor de desafío adicional.

Otra técnica avanzada es el desplazamiento de fila / columna, donde las filas / columnas de mosaicos en la pantalla se pueden desplazar individualmente.

Esta técnica se implementa en los chips gráficos de varias placas de juegos arcade de Sega, desde Sega Space Harrier y System 16, Sega Mega Drive / Genesis, Capcom CP, Irem M-92 y Taito F3 System.

Beneficios del efecto Parallax Scrolling