Comment créer une page de parallaxe pleine largeur avec Bootstrap ?

Structure HTML

1. Créez une structure HTML de base avec une section « corps » et « en-tête » :

```html

```

Styles CSS

2. Ajoutez les styles suivants à votre fichier CSS :

```css

/* Styles principaux */

corps {

couleur d'arrière-plan :#000 ;

}

en-tête {

image d'arrière-plan :url("chemin/vers/image1.jpg");

pièce jointe d'arrière-plan :corrigé ;

taille de l'arrière-plan :couverture ;

répétition d'arrière-plan :pas de répétition ;

hauteur :100vh;

}

/* Styles de parallaxe */

.conteneur-parallax {

position :relative;

hauteur :100vh;

}

.parallax-layer {

position :absolue;

haut :0;

gauche :0;

largeur :100 %;

hauteur :100 %;

}

.parallax-layer--image {

pièce jointe d'arrière-plan :corrigé ;

taille de l'arrière-plan :couverture ;

répétition d'arrière-plan :pas de répétition ;

}

/* Effets de parallaxe */

@media (largeur maximale :992 px) {

.parallax-layer--image {

transformer :traduire3d(0, 0, 0);

}

}

@media (largeur minimale :992 px) {

.parallax-layer--image {

transformer : translate3d(-50%, 0, 0);

}

}

```

Explication

- Le « corps » est défini sur le noir comme couleur d'arrière-plan.

- L'en-tête a une image d'arrière-plan fixe, couvre toute la hauteur de la fenêtre et n'a aucune répétition.

- Le `.parallax-container` a une position relative, permettant aux éléments enfants d'être positionnés de manière absolue à l'intérieur.

- Le `.parallax-layer` est positionné de manière absolue, couvrant tout le conteneur.

- Le `.parallax-layer--image` a une image d'arrière-plan, est fixe, couvre tout le calque et n'a pas de répétition.

- Les requêtes multimédias appliquent des effets de parallaxe en fonction de la largeur de l'écran. À des largeurs plus petites (appareils mobiles), il n'y a pas d'effet de parallaxe, tandis qu'à des largeurs plus grandes (écrans plus grands), les images d'arrière-plan se déplacent à la moitié de la vitesse de défilement, créant ainsi l'effet de parallaxe.

Utilisation

3. Dans le « corps », ajoutez des sections ou du contenu supplémentaires comme vous le souhaitez et enveloppez-les dans un « .parallax-container ». Incluez des images d'arrière-plan pour chaque section sous la forme « .parallax-layer--image ».

```html

```

Conclusion

En combinant des images d'arrière-plan fixes, un positionnement et des transformations CSS3, vous avez réussi à créer une page de parallaxe pleine largeur à l'aide de Bootstrap. Ajustez le CSS et le contenu selon vos besoins pour personnaliser votre expérience de parallaxe.