Cómo crear: desplazamiento paralelo

Aprende a crear efectos de desplazamiento paralelo utilizando CSS.

Desplazamiento paralelo

El desplazamiento paralelo es una tendencia en el diseño de sitios web, en la que el contenido de fondo (por ejemplo, imágenes) se mueve a una velocidad diferente durante el desplazamiento. Haga clic en el enlace siguiente para ver la diferencia entre sitios web con desplazamiento paralelo y sin él.

demostración con efecto de deslizamiento paralelo

demostración sin efecto de deslizamiento paralelo

Nota:El deslizamiento paralelo no siempre es efectivo en dispositivos móviles/smartphones. Sin embargo, puede desactivar este efecto en dispositivos móviles utilizando consultas de medios (véase el último ejemplo de esta página).

cómo crear el efecto de deslizamiento paralelo

utilice un elemento contenedor y agregue a este contenedor una imagen de fondo con una altura específica. Luego, utilice background-attachment: fixed crea el efecto de deslizamiento paralelo real. Otros atributos de fondo se utilizan para centrar y escalar perfectamente la imagen:

ejemplo en píxeles

<style>
.parallax {
  /* Imagen utilizada */
  background-image: url("img_parallax.jpg");
  /* Establecer altura específica */
  min-height: 500px;
  /* Crear el efecto de deslizamiento paralelo */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Elemento contenedor -->
<div class="parallax"></div>

pruébelo usted mismo

El ejemplo anterior utiliza píxeles para establecer la altura de la imagen. Si desea usar porcentajes, como 100%, para que la imagen se ajuste a toda la pantalla, configure la altura del contenedor de deslizamiento paralelo al 100%. Nota: También debe cambiar height: 100% aplicado a <html> y <body>:

ejemplo en porcentajes

body, html {
  height: 100%;
}
.parallax {
  /* Imagen utilizada */
  background-image: url("img_parallax.jpg");
  /* Altura completa */
  height: 100%;
  /* Crear el efecto de deslizamiento paralelo */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

pruébelo usted mismo

algunos dispositivos móviles al usar background-attachment: fixed pueden surgir problemas. Sin embargo, puede desactivar el efecto de deslizamiento paralelo en dispositivos móviles utilizando consultas de medios:

ejemplo

/* Desactivar el efecto de deslizamiento paralelo en todas las tabletas y teléfonos móviles. Si es necesario, puede aumentar/disminuir píxeles */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

pruébelo usted mismo

En el código anterior, cuando el ancho de la pantalla es menor o igual a 1366 píxeles, se desactivará el efecto de deslizamiento paralelo, lo que es adecuado para la mayoría de las tabletas y teléfonos móviles. Esto se logra cambiando .parallax de la clase background-attachment propiedad desde fijo al scroll De esta manera, la imagen de fondo se desplazará junto con el resto de la página, en lugar de estar fija en la vista.