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;
baggrunds-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 gentagelser.
- `.parallakse-beholderen` har en relativ position, så de underordnede elementer kan placeres absolut 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 ved større bredder (større skærme) bevæger baggrundsbillederne sig med halvdelen af rullehastigheden, hvilket skaber parallakseeffekten.
Brug
3. Tilføj yderligere sektioner eller indhold i 'body' som ønsket, og pak dem ind i en '.parallax-container'. Medtag baggrundsbilleder for hver sektion som `.parallax-layer--image`.
```html
```
Konklusion
Ved at kombinere faste baggrundsbilleder, positionering og CSS3-transformationer har du med succes skabt en parallaksside i fuld bredde ved hjælp af Bootstrap. Juster CSS'en og indholdet efter behov for at tilpasse din parallakseoplevelse.
