Hoy veremos un pequeño pero muy práctico ejemplo en el que aprenderemos cómo realizar el efecto parallax con css para que lo implementes en tus sitios web y estos luzcan de maravilla, ¿Quieres aprender cómo implementarlo? Al finalizar esta entrada sabrás lo fácil que es hacerlo.
Quizá navegando por internet te has topado con más de algún sitio que usa el efecto parallax y te has preguntado ¿cómo lo hacen? hoy aprenderás a hacerlo tu mismo y verás lo sencillo y rápido que es implementarlo.
Efecto parallax con css
A continuación te explico el código necesario para obtener el efecto parallax.
<div id="parallax"></div>
Dentro de tu html defines un contenedor y le asignas un id para hacer referencia a el más adelante desde el css, para este ejemplo yo lo he nombrado “parallax”.
#parallax{
background-image: url("imagen.jpg");
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Ahora dentro del css se hace referencia al contenedor por medio de su id.
Como primer propiedad defines background-image, aquí pondrías la imagen que deseas usar, también es necesario establecer una altura, para este ejemplo la he definido de 500px.
Enseguida defines la propiedad background-attachment, esta propiedad establece si una imagen de fondo se desplaza con el resto de la página o si está fija, esta propiedad es fundamental para obtener el efecto parallax.
Con la propiedad background-position estableces la posición de inicio de una imagen de fondo.
Finalmente estableces que la imagen no se repetirá y que ocupará todo el espacio del contenedor.
Resultado
Y así es como obtenemos un efecto parallax con css, ¿es super sencillo no crees? Si te a parecido practica este pequeño ejemplo no olvides compartirlo en tus redes sociales. 🙂