CSS : Efecto parallax con CSS

CSS

Ver demostración >>

Para lograr el efecto, las imágenes de fondo tienen que estar dispuestas en distintos elementos. Estos elementos necesitan, además,  ser definidos como background-attachment: fixed. Al definir background-attachment el comportamiento y la posición de cualquier imagen de fondo pueden ser cambiados.

El valor inicial de la propiedad es scroll, que básicamente significa que la posiciòn de la imagen está fija a su elemento. El usuario hace scroll en el sitio y los elementos se mueven hacia arriba y hacia abajo al igual que las imágenes de fondo.

background-attachmentfixed define que la posiciòn de la imagen de fondo no está fija al elemento dependiente, sino fija al punto de vista. Esto significa que si la imagen permanecerá visualmente en la misma posición sin importar cuánto scroll se haya hecho.

Éste es el código necesario:

<!-- Cuatro contenedores para las cuatro imágenes de fondo -->
<div class="parallax">
  <div class="bg__foo">foo</div>
  <div class="bg__bar">bar</div>
  <div class="bg__baz">baz</div>
  <div class="bg__bazz">bazz</div>
</div>

  height: 50vh;
  text-indent: -9999px;

  background-attachment: fixed;

  background-position: center center;
  background-size: cover;

   &:nth-child(2n) {
    box-shadow: inset 0 0 1em #111;
  }
}

.bg__foo {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

.bg__bar {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg
  );
}

.bg__baz {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg
  );
}

.bg__bazz {
  height: 100vh;

  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

Deja un comentario