Ahora que ya está la estructura HTML para el efecto parallax, es momento de agregar los estilos CSS.
Estilos CSS para el efecto parallax
Quita el margin que está por defecto establecido por el navegador.
body {
margin: 0;
}
Dimensiona las imágenes para que ocupen el espacio del contenedor.
img{
max-width: 100%;
height: auto;
}
En el elemento contenedor (parallax-container) agrega:
- Medidas para que ocupe el ancho y alto de la pantalla.
- Perspectiva de 8 píxeles (recuerda este valor).
- Posición relativa para que las capas puedan posicionarse con respecto al contenedor del efecto.
- En este caso, el exceso de contenido deberá estar oculto para el eje X y desplazable para el eje Y, pero lo puedes cambiar a tu gusto.
.parallax-container {
width: 100%;
height: 100vh;
perspective: 8px;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
}
Agrega la posición absoluta a todos los elementos hijos o capas del efecto.
.image{
position: absolute;
}
Para las cada capa del efecto vamos a realizar lo siguiente:
- Medidas según sean necesarias.
- Trasladar la capa en eje Z, desde 0 hasta el valor de la perspectiva (8px).
- Escalar el elemento según su profundidad. Para calcular este valor utiliza la siguiente fórmula: $(perspective - translateZ) / perspective$, por ejemplo para la capa del medio, $(8-5)/8 = 0.375$.
- Modificar el origen según sea necesario.
Algunos valores no son necesarios colocar, pero es recomendable tener un control del código y de las propiedades CSS.
.image_background{
width: 100%;
height: auto;
transform: translateZ(0px) scale(1);
transform-origin: 0 50%;
}
.image_middle{
width: 100%;
height: 100%;
transform: translateZ(5px) scale(0.375);
transform-origin: 50%;
}
.image_foreground{
width: 100%;
height: auto;
transform: translateZ(2px) scale(0.75);
transform-origin: top;
}
Para las cartas de la segunda capa agrega dos estilos importantes: las medidas y la posición absoluta.
.card {
width: 80px;
height: 100px;
position: absolute;
background: white;
border-radius: 8px;
transform: rotate(-20deg);
}
La posición sirve para posicionar cada carta como deseemos.
.one{
left: 30%;
}
.two{
right: 20%;
top: 200px;
}
.three{
right: 20%;
bottom: -700px;
}
¡Y listo! Ya está construido el efecto parallax.
Contribución creada por Andrés Guano.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?