Cómo - Desplazamiento de paralaje
Aprenda a crear un efecto de desplazamiento de "paralaje" con CSS.
Paralaje
El desplazamiento de paralaje es una tendencia del sitio web donde el contenido de fondo (es decir, una imagen) se mueve a una velocidad diferente que el contenido de primer plano mientras se desplaza. Haga clic en los enlaces a continuación para ver la diferencia entre un sitio web con y sin desplazamiento de paralaje.
Demostración con desplazamiento de paralaje
Demostración sin desplazamiento de paralaje
Nota: el desplazamiento Parallax no siempre funciona en dispositivos móviles/teléfonos inteligentes. Sin embargo, puede usar consultas de medios para desactivar el efecto en dispositivos móviles (vea el último ejemplo en esta página).
Cómo crear un efecto de desplazamiento de paralaje
Use un elemento contenedor y agregue una imagen de fondo al contenedor con una altura específica. Luego use background-attachment: fixed
para crear el efecto de paralaje real. Las otras propiedades de fondo se utilizan para centrar y escalar la imagen perfectamente:
Ejemplo con píxeles
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
El ejemplo anterior usó píxeles para establecer la altura de la imagen. Si desea utilizar un porcentaje, por ejemplo, 100 %, para que la imagen se ajuste a toda la pantalla, establezca la altura del contenedor de paralaje en 100 %. Nota: también debe aplicar height: 100%
tanto a <html> como a <body>:
Ejemplo con porcentaje
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Algunos dispositivos móviles tienen un problema con background-attachment: fixed
. Sin embargo, puede usar consultas de medios para desactivar el efecto de paralaje para dispositivos móviles:
Ejemplo
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}