Ako vytvoriť paralaxnú stránku s plnou šírkou pomocou Bootstrapu?

Vytvorenie paralaxnej stránky s plnou šírkou pomocou Bootstrapu zahŕňa použitie obrázkov na pozadí, umiestnenie a transformácie CSS3. Môžete to dosiahnuť takto:

Štruktúra HTML

1. Vytvorte základnú štruktúru HTML so sekciami „body“ a „header“:

```html

```

Štýly CSS

2. Pridajte do súboru CSS nasledujúce štýly:

```css

/* Hlavné štýly */

telo {

farba pozadia:#000;

}

hlavička {

background-image:url("cesta/k/obrazku1.jpg");

pozadie:pevné;

veľkosť pozadia:obal;

background-repeat:no-repeat;

výška:100vh;

}

/* Štýly paralaxy */

.parallax-container {

poloha:relatívna;

výška:100vh;

}

.parallax-layer {

pozícia:absolútna;

hore:0;

vľavo:0;

šírka:100 %;

výška:100 %;

}

.parallax-layer--image {

pozadie:pevné;

veľkosť pozadia:obal;

background-repeat:no-repeat;

}

/* Paralaxné efekty */

@media (max-width:992px) {

.parallax-layer--image {

transform:translate3d(0, 0, 0);

}

}

@media (min. šírka:992 pixelov) {

.parallax-layer--image {

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

}

}

```

Vysvetlenie

- "Telo" je nastavené na čiernu ako farbu pozadia.

- Hlavička má pevný obrázok na pozadí, pokrýva celú výšku výrezu a neopakuje sa.

- "Kontajner paralaxy" má relatívnu polohu, čo umožňuje, aby boli v ňom podradené prvky absolútne umiestnené.

- "paralaxná vrstva" je úplne umiestnená a pokrýva celú nádobu.

- `.parallax-layer--image` má obrázok na pozadí, je pevný, pokrýva celú vrstvu a neopakuje sa.

- Dotazy na médiá aplikujú efekty paralaxy na základe šírky obrazovky. Pri menších šírkach (mobilné zariadenia) nedochádza k efektu paralaxy, zatiaľ čo pri väčších šírkach (stolný počítač) dochádza k efektu paralaxy, pričom obrázky na pozadí sa pri posúvaní pomaly pohybujú.

Používanie

3. Do „body“ pridajte ďalšie prvky „div“ s triedami „.parallax-container“ a „.parallax-layer“ na vytvorenie obsahu paralaxy:

```html

```

Pridaním ďalších prvkov `.parallax-container` a `.parallax-layer` môžete vytvoriť viacero paralaxových sekcií s rôznymi obrázkami.

Poznámka: Obrázky použité na paralaxu by mali mať vysoké rozlíšenie a dostatočne veľké, aby pokryli výrez bez skreslenia.

• Predchádzajúca strana: Ako vytvoriť miniaplikáciu karty profilu používateľa pomocou Bootstrapu? 
• Ďalšia strana: Ako pridať posúvač obsahu akordeónu do Weebly?