Como conseguir un efecto parallax SOLO CON CSS (sin usar javascript). Me encanta este método para ese tipo de páginas donde tienen un header con un fondo y queremos que tengan algún tipo de pequeño movimiento parallax al hacer scroll sin recurrir a meter líneas de js.
Básicamente solo con estas 3 clases css. Donde el .wrapper es para la perspectiva, .parallax el contenedor, y .img-parallax para la imagen de fondo.
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.parallax {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.img-parallax{
position: absolute;
top: -3px;
left: -3px;
width: calc(100% + 6px);
height: calc(100% + 6px);
object-fit: cover;
transform: translateZ(-1px) scale(1.5);
}
Demo:
Agradezco tu comentario 🤘