¿Cómo imitar efecto Parallax en imagen de fondo con CSS?

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.

Cómo imitar el efecto parallax en imagen de fondo con CSS?


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.

Con Parallax
Sin Parallax

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.

Suscríbete a nuestra lista de correo

Etiquetas:

Publicidad

Deje un comentario