Hvordan opretter man fuld bredde parallakseside med bootstrap?
Oprettelse af en parallakseside i fuld bredde med Bootstrap involverer brug af baggrundsbilleder, positionering og CSS3-transformationer. Sådan kan du opnå dette:
HTML-struktur
1. Opret en grundlæggende HTML-struktur med en "body" og "header" sektion:
```html
Parallax-side
baggrundsvedhæftning:fast;
baggrundsstørrelse:cover;
baggrunds-gentag:ingen gentagelse;
højde:100vh;
}
/* Parallax stilarter */
.parallax-container {
stilling:relativ;
højde:100vh;
}
.parallax-lag {
position:absolut;
top:0;
venstre:0;
bredde:100%;
højde:100%;
}
.parallax-layer--image {
baggrundsvedhæftning:fast;
baggrundsstørrelse:cover;
baggrund-gentag:ingen-gentagelse;
}
/* parallakse effekter */
@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 sat til sort som baggrundsfarve.
- 'Overskriften' har et fast baggrundsbillede, dækker hele visningsportens højde og har ingen gentagelse.
- `.parallakse-beholderen` har en relativ position, hvilket gør det muligt at placere børneelementerne absolut inde i den.
- `.parallakse-laget` er absolut placeret og dækker hele beholderen.
- `.parallax-layer--image` har et baggrundsbillede, er fast, dækker hele laget og har ingen gentagelse.
- Medieforespørgslerne anvender parallakseeffekter baseret på skærmbredde. Ved mindre bredder (mobilenheder) er der ingen parallakseeffekt, mens der ved større bredder (desktop) er en parallakseeffekt, hvor baggrundsbillederne bevæger sig langsomt, mens du ruller.
Brug
3. Tilføj yderligere "div"-elementer i "body" med klasserne ".parallax-container" og ".parallax-layer" for at skabe dit parallax-indhold:
```html
```
Ved at tilføje flere `.parallax-container`- og `.parallax-layer`-elementer kan du oprette flere parallax-sektioner med forskellige billeder.
Bemærk: De billeder, der bruges til parallakse, skal være i høj opløsning og store nok til at dække visningsporten uden forvrængning.
