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 (pantallas más grandes), las imágenes de fondo se mueven a la mitad de la velocidad de desplazamiento, creando el efecto de paralaje.
Uso
3. Dentro del "cuerpo", agregue secciones o contenido adicionales según lo desee y envuélvalos en un ".parallax-container". Incluya imágenes de fondo para cada sección como `.parallax-layer--image`.
```html
```
Conclusión
Al combinar imágenes de fondo fijas, posicionamiento y transformaciones CSS3, ha creado con éxito una página de paralaje de ancho completo usando Bootstrap. Ajuste el CSS y el contenido según sea necesario para personalizar su experiencia de paralaje.