Å lage en parallakseside i full bredde med Bootstrap innebærer bruk av bakgrunnsbilder, posisjonering og CSS3-transformasjoner. Slik kan du oppnå dette:

HTML-struktur

1. Lag en grunnleggende HTML-struktur med en "body" og "header"-seksjon:

```html

bakgrunnsvedlegg:fast;

bakgrunnsstørrelse:cover;

bakgrunns-gjenta:ikke-gjenta;

høyde:100vh;

}

/* Parallax-stiler */

.parallax-container {

stilling:pårørende;

høyde:100vh;

}

.parallax-lag {

posisjon:absolutt;

topp:0;

venstre:0;

bredde:100 %;

høyde:100 %;

}

.parallax-layer--image {

bakgrunnsvedlegg:fast;

bakgrunnsstørrelse:cover;

bakgrunns-gjenta:ikke-gjenta;

}

/* parallakseeffekter */

@media (maks. bredde:992px) {

.parallax-layer--image {

transform:translate3d(0, 0, 0);

}

}

@media (min-bredde:992px) {

.parallax-layer--image {

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

}

}

```

Forklaring

- 'Kroppen' er satt til svart som bakgrunnsfarge.

- `Toppteksten` har et fast bakgrunnsbilde, dekker hele viewporthøyden og har ingen repetisjon.

- `.parallakse-beholderen` har en relativ posisjon, slik at barneelementene kan plasseres absolutt i den.

- `.parallakse-laget` er absolutt plassert og dekker hele beholderen.

- `.parallax-layer--image` har et bakgrunnsbilde, er fast, dekker hele laget og har ingen repetisjon.

- Mediespørringene bruker parallakseeffekter basert på skjermbredde. Ved mindre bredder (mobile enheter) er det ingen parallakseeffekt, mens ved større bredder (større skjermer) beveger bakgrunnsbildene seg med halve rullehastigheten, og skaper parallakseeffekten.

Bruk

3. Innenfor "kroppen", legg til flere deler eller innhold etter ønske, og pakk dem inn i en ".parallax-beholder". Ta med bakgrunnsbilder for hver seksjon som `.parallax-layer--image`.

```html

```

Konklusjon

Ved å kombinere faste bakgrunnsbilder, posisjonering og CSS3-transformasjoner, har du opprettet en parallaksside i full bredde ved hjelp av Bootstrap. Juster CSS og innhold etter behov for å tilpasse parallakseopplevelsen.