El efecto parallax es una técnica visual que crea una sensación de profundidad cuando el usuario se desplaza por una página. Las imágenes de fondo se mueven a una velocidad distinta a la del contenido, generando un resultado atractivo y dinámico.

En este caso, se utilizó la librería simple-parallax-js para aplicar este efecto a imágenes en una galería. Esta librería es ligera, fácil de integrar y no requiere frameworks como React o Vue para funcionar.

Cómo instalar simple-parallax-js

Puedes usar esta librería de dos formas:

1. Desde un enlace directo (CDN):

Agrega esta línea justo antes de tu archivo JavaScript en el HTML:

2. Desde NPM:

Y luego la importas en tu script:

Ejemplo Práctico 

Vamos a ver un ejemplo simple con HTML, css y js. 

• Estructura HTML:

Dentro del cuerpo de la página, se encuentra una sección principal que contiene cinco bloques con imágenes. Cada bloque está compuesto por una imagen que ocupa toda la pantalla y un cuadro de texto centrado con un título y una breve descripción. Las imágenes se han dispuesto dentro de contenedores de altura completa que facilitan el efecto parallax, el cual se logra gracias a la biblioteca simple-parallax-js, que se encarga de dar movimiento sutil a las imágenes al hacer scroll, generando una sensación de profundidad.

<div class="parallax-section">
<code>
<img class="thumbnail" src="https://images5.alphacoders.com/530/530476.jpg" alt="Paisaje 1">
</code>
<div class="content">
<h2>Imagen 1</h2>
<p>Sasuke</p>
</div>
</div>

• Estilos de Css:

El diseño visual se refuerza con estilos CSS personalizados que eliminan márgenes y espacios innecesarios, establecen un fondo oscuro para la página y aseguran que las imágenes se escalen adecuadamente sin distorsión. El texto que se superpone a las imágenes está centrado tanto vertical como horizontalmente y se presenta dentro de un recuadro translúcido para asegurar su legibilidad.

• JavaScript:

Al cargar completamente la página, el script inicia con un evento DOMContentLoaded, que asegura que todo el contenido del DOM esté disponible antes de ejecutar cualquier acción. En ese momento, se seleccionan todas las imágenes que tienen la clase thumbnail, las cuales forman parte de la galería que se mostrará con efecto parallax. Para aplicar este efecto visual, se utiliza la librería simple-parallax-js, una herramienta ligera y eficiente que permite añadir profundidad y movimiento al desplazarse por la página.

La configuración definida en el script busca crear un efecto muy pronunciado. Para ello, se establece un valor de scale de 2.0, lo que amplifica visualmente las imágenes al desplazarse, generando una sensación de profundidad más intensa. También se incluye un pequeño retraso de 0.4 segundos (delay), lo que hace que el efecto responda de forma más ágil al movimiento del scroll. La transición se anima con una curva cubic-bezier personalizada, lo que le da un movimiento más natural y fluido. Además, se activa la opción overflow, que permite que el efecto se proyecte más allá de los bordes normales del contenedor.

Finalmente, se define la orientación del efecto como down, lo que indica que las imágenes se desplazan en dirección descendente, reforzando la sensación de que el contenido se mueve a distintas velocidades conforme el usuario navega por la página. 

Pueden ver cómo quedó el ejemplo en el repositorio de GitHub, donde también está disponible efecto Parallax. Así pueden probarlo directamente y usarlo como referencia si quieren hacer algo similar.