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 🤘