Hur skapar man en parallellsida med full bredd med Bootstrap?
Att skapa en parallaxsida i full bredd med Bootstrap innebär att man använder bakgrundsbilder, positionering och CSS3-transformationer. Så här kan du uppnå detta:
HTML-struktur
1. Skapa en grundläggande HTML-struktur med en "body" och "header"-sektion:
```html
Parallaxsida
bakgrundsbilaga:fixerad;
bakgrundsstorlek:omslag;
bakgrundsupprepning:ingen upprepning;
höjd:100vh;
}
/* Parallaxstilar */
.parallax-container {
position:relativ;
höjd:100vh;
}
.parallax-lager {
position:absolut;
topp:0;
vänster:0;
bredd:100%;
höjd:100%;
}
.parallax-layer--image {
bakgrundsbilaga:fixerad;
bakgrundsstorlek:omslag;
bakgrundsupprepning:ingen upprepning;
}
/* Parallaxeffekter */
@media (maxbredd:992px) {
.parallax-layer--image {
transform:translate3d(0, 0, 0);
}
}
@media (min-bredd:992px) {
.parallax-layer--image {
transform:translate3d(-50%, 0, 0);
}
}
```
Förklaring
- "Kroppen" är inställd på svart som bakgrundsfärg.
- Rubriken har en fast bakgrundsbild, täcker hela visningsportens höjd och har ingen upprepning.
- `.parallax-behållaren` har en relativ position, vilket gör att de underordnade elementen kan placeras absolut inuti den.
- `.parallax-skiktet` är absolut placerat och täcker hela behållaren.
- `.parallax-layer--image` har en bakgrundsbild, är fixerad, täcker hela lagret och har ingen upprepning.
- Mediefrågorna tillämpar parallaxeffekter baserat på skärmens bredd. Vid mindre bredder (mobila enheter) finns det ingen parallaxeffekt, medan vid större bredder (dator) finns en parallaxeffekt med bakgrundsbilderna som rör sig långsamt när du rullar.
Användning
3. Inuti "kroppen", lägg till ytterligare "div"-element med klasserna ".parallax-container" och ".parallax-layer" för att skapa ditt parallaxinnehåll:
```html
```
Genom att lägga till fler `.parallax-container` och `.parallax-layer`-element kan du skapa flera parallaxsektioner med olika bilder.
Obs! Bilderna som används för parallax ska vara högupplösta och tillräckligt stora för att täcka visningsporten utan förvrängning.
