El efecto Parallax es una técnica de diseño web que da vida a tu página. Esta técnica agrega un toque de interactividad y dinamismo a la experiencia del usuario, haciendo que el sitio web sea más atractivo visualmente y memorable para los visitantes.
¿Has visto antes estos efectos? De seguro habrás visto antes alguno. Sigue leyendo en esta entrada del blog para explorar en detalle cómo integrar el efecto parallax en tu sitio web y para mejorar su apariencia y funcionalidad.
¿Qué es el Efecto Parallax?
El efecto Parallax es una técnica que crea una ilusión de profundidad y movimiento. La velocidad del contenido y del fondo van en ritmos diferentes a medida que te desplazas por la página.
Imagina que tu sitio web es un sandwich de varias capas, donde cada uno de ellos se mueven de manera independiente, y se desplazan hacia arriba o abajo, o derecha e izquierda. Incluso puedes desplazarte manual o en automático (si viene incluido).
El efecto Parallax puede ser muy atractivo y ayuda a sumergir a los usuarios en el contenido, similar al efecto 3D. Es muy útil para contar una historia o presentar información de una manera más dinámica e interactiva.
A pesar de la modernidad del efecto, su origen viene en la cámara multiplano de Disney. Esta cámara se usaba para darle más realismo a las animaciones, creando un efecto de movimiento tridimensional.
¿Cómo implementar el Efecto Parallax?
Para implementar el efecto en tu sitio web, te compartiré unos pasos generales que puedes seguir:
- Decide qué elementos quieres mover: Puedes mover imágenes de fondo, texto, botones y otros elementos.
- Crea diferentes capas de elementos en tu diseño: Cada capa estará centrada en la representación a una distancia o profundidad diferente. Después, añade un movimiento relativo a estas capas cuando el usuario interactúe con la escena. Esto creará la ilusión de profundidad y desplazamiento.
- Usa CSS: El efecto parallax se logra a través de CSS (scrolling, position, transition, etc), diseño web y Javascript.
- Ajusta la velocidad y la distancia de los elementos: Puedes ajustar la velocidad y la distancia de los elementos para crear el efecto deseado.
- Prueba el efecto en acción.
Te invito a revisar estos página para tomar inspiración y base para crear tus propios efectos.
Crea tu propio Efecto Parallax
Ahora, veamos un ejemplo sencillo de cómo puedes implementar el efecto Parallax con HTML y CSS:
<div class="container-parallax">
<div class="parallax-background">
<p class="text text-down">Scroll Down</p>
<img class="card card-1" src="<https://otakulamps.com/cdn/shop/files/PSA-01_neon_glow.png?v=1702909080&width=4000>" alt="Card persona 5">
<img class="card card-2" src="<https://otakulamps.com/cdn/shop/files/PSA-01_neon_glow.png?v=1702909080&width=4000>" alt="Card persona 5">
</div>
<div class="parallax-middle">
</div>
<div class="parallax-foreground">
<p class="text text-up">Scroll Up</p>
<img class="card card-3" src="<https://otakulamps.com/cdn/shop/files/PSA-01_neon_glow.png?v=1702909080&width=4000>" alt="Card persona 5">
<img class="card card-4" src="<https://otakulamps.com/cdn/shop/files/PSA-01_neon_glow.png?v=1702909080&width=4000>" alt="Card persona 5">
</div>
</div>
El HTML se define una estructura con tres partes, que se moverá diferente al hacer scroll en la página: parallax-background, parallax-middle, y parallax-foreground.
parallax-backgroundyparallax-foregroundcontienen imágenes y texto que se mueven a diferentes velocidades para crear una sensación de profundidad.parallax-middlees una capa intermedia que se mantiene estática
En el código CSS:
.parallax-background {
background-position: top;
}
.parallax-foreground {
background-position: bottom;
}
.parallax-background,
.parallax-foreground {
/* The image used */
background-image: url("<https://i.pinimg.com/564x/eb/b8/e1/ebb8e111193ce6cd73ff7c3894a95769.jpg>");
/* Set a specific height */
min-height: 1000px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
Las clases .parallax-background y .parallax-foreground definen el efecto parallax. La propiedad background-attachment: fixed; hace que el fondo no se mueva con el scroll, creando el efecto de profundidad.
.parallax-middle {
height: 1000px;
background-color: red;
background-image: url("<https://i.pinimg.com/originals/27/79/0e/27790ed211931c953a51567ec967947b.jpg>");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
La clase .parallax-middle define una capa estática en el medio de las otras dos.
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff,
-1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.text::after {
content: ">";
position: absolute;
}
.text-down::after {
top: 50px;
left: 130px;
transform: rotate(90deg);
}
.text-up::after {
top: -70px;
left: 100px;
transform: rotate(-90deg);
}
.card {
width: 200px;
position: absolute;
}
.card-1 {
top: 50px;
right: 10px;
transform: rotate(45deg) scale(0.9);
}
.card-2 {
top: 730px;
left: 40px;
transform: rotate(-45deg) scale(1.3);
}
.card-3 {
top: 50px;
right: 10px;
transform: rotate(145deg) scale(0.9);
}
.card-4 {
top: 730px;
left: 40px;
transform: rotate(-145deg) scale(1.3);
}
Las clases .text y .card definen el estilo de los textos y las tarjetas que se mueven con el scroll.
Las propiedades transform: rotate(...deg) y scale(...) en las clases .card-1, .card-2, .card-3, y .card-4 rotan y escalan las tarjetas para darles un efecto de movimiento tridimensional.
Es un ejemplo muy básico. Todo el código del ejemplo se encuentra en codepen. Incluso puedes hacer el ejemplo con temática de Alicia en el País de las Maravillas.
Cuéntame en los comentarios que tal te ha parecido el efecto parallax, ¿lo implementarás en tus próximos proyectos?
Sigueme en mis redes sociales para más contenido