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 (ordinateur de bureau), il y a un effet de parallaxe avec les images d'arrière-plan se déplaçant lentement lorsque vous faites défiler.

Utilisation

3. À l'intérieur du `body`, ajoutez des éléments `div` supplémentaires avec les classes `.parallax-container` et `.parallax-layer` pour créer votre contenu de parallaxe :

```html

```

En ajoutant plus d'éléments `.parallax-container` et `.parallax-layer`, vous pouvez créer plusieurs sections de parallaxe avec différentes images.

Remarque : Les images utilisées pour la parallaxe doivent être de haute résolution et suffisamment grandes pour couvrir la fenêtre sans distorsion.