Parallax es una técnica de desplazamiento en la tecnología de gráficos de computadora donde las imágenes de fondo se mueven más lento que las imágenes en primer plano, creando una ilusión de profundidad y dando una sensación de inmersión.
Aquí es cómo puedes crear una simple animación de paralaje utilizando HTML y CSS:
1. Crearemos 2 divs: uno para la imagen de fondo (con parallax) y uno para el contenido.
```html
2. Luego en CSS, debes asignar una imagen de fondo al primer div y un efecto de desplazamiento. Para dar la ilusión de paralaje necesitas que la imagen de fondo se desplace a una velocidad más lenta que el resto del contenido. Esto se logra utilizando la propiedad `background-attachment: fixed`:
```css
.parallax {
/* La ruta al imagen de fondo */
background-image: url(“imagen.jpg”);
/* Esta propiedad está creando el efecto parallax */
background-attachment: fixed;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 1500px;
background-color: #f5f5f5;
}
```
Además, es importante mencionar que esta técnica de paralaje es una de las más simples y puede no funcionar exactamente igual en todos los navegadores. Para efectos de paralaje más complejos y compatibles con la mayoría de los navegadores, se recomendaría usar librerías JavaScript dedicadas como Parallax.js o Rellax.js.
