Estructura HTML
1. Cree una estructura HTML básica con una sección de "cuerpo" y "encabezado":
```html
```
Estilos CSS
2. Agregue los siguientes estilos a su archivo CSS:
```css
/* Estilos principales */
cuerpo {
color de fondo:#000;
}
encabezado {
imagen de fondo:url("ruta/a/imagen1.jpg");
adjunto de fondo:fijo;
tamaño de fondo:portada;
repetición de fondo:no repetición;
altura:100vh;
}
/* Estilos de paralaje */
.contenedor-paralaje {
posición:relativa;
altura:100vh;
}
.capa-paralaje {
posición:absoluta;
arriba:0;
izquierda:0;
ancho:100%;
altura:100%;
}
.parallax-layer--imagen {
adjunto de fondo:fijo;
tamaño de fondo:portada;
repetición de fondo:no repetición;
}
/* Efectos de paralaje */
@media (ancho máximo:992 px) {
.parallax-layer--imagen {
transformar:traducir3d(0, 0, 0);
}
}
@media (ancho mínimo:992 px) {
.parallax-layer--imagen {
transformar:traducir3d(-50%, 0, 0);
}
}
```
Explicación
- El "cuerpo" está configurado en negro como color de fondo.
- El "encabezado" tiene una imagen de fondo fija, cubre toda la altura de la ventana gráfica y no tiene repetición.
- El `.parallax-container` tiene una posición relativa, lo que permite que los elementos secundarios estén absolutamente posicionados dentro de él.
- La `.parallax-layer` está absolutamente posicionada, cubriendo todo el contenedor.
- La `.parallax-layer--image` tiene una imagen de fondo, es fija, cubre toda la capa y no tiene repetición.
- Las consultas de medios aplican efectos de paralaje según el ancho de la pantalla. En anchos más pequeños (dispositivos móviles), no hay efecto de paralaje, mientras que en anchos más grandes (escritorio), hay un efecto de paralaje con las imágenes de fondo moviéndose lentamente a medida que se desplaza.
Uso
3. Dentro del `body`, agrega elementos `div` adicionales con las clases `.parallax-container` y `.parallax-layer` para crear tu contenido de parallax:
```html
```
Al agregar más elementos `.parallax-container` y `.parallax-layer`, puede crear múltiples secciones de paralaje con diferentes imágenes.
Nota: Las imágenes utilizadas para el paralaje deben ser de alta resolución y lo suficientemente grandes como para cubrir la ventana gráfica sin distorsión.