El efecto Parallax en una web es básicamente cuando el fondo se mueve a una velocidad distinta que el contenido que estás viendo y por el cual estás scrolling. En este tutorial te mostraremos cómo obtener este efecto Parallax de la manera más sencilla.
Ejemplo de Con Parallax vs Sin Parallax
Te invito a desplazarte hacia abajo (scroll) para ver el diferente efecto de estas dos imágenes de fondo.
Propiedad de CSS: background-attachment
Este interesante efecto se obtiene de manera sencilla con la propiedad background-attachment. Esta propiedad especifica de qué manera se mueve el fondo con respecto a la ventana del navegador, y puede tener los siguientes valores:
- Scroll (default): El fondo se desplazará con la ventana del navegador y se fijará a su propio contenedor.
- Fixed: El fondo se fijará a la ventana del navegador.
- Local: El fondo se desplazará con la ventana del navegador y con su propio contenedor.
¿Cómo obtener el efecto Parallax con background-attachment?
Luego de entender la propiedad de CSS de background-attachment, estamos listos para aplicarlo para obtener el efecto de Parallax.
Lo único que tendremos que hacer, será agregar el valor de fixed a la propiedad de background-attachment a nuestro fondo. Por ejemplo, si tenemos que el body tiene la background-image o background, colocaremos la propiedad ahí mismo.
body {
background: url('URL DE LA IMAGEN DE FONDO');
background-attachment: fixed;
} ¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
