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 (väčšie obrazovky) sa obrázky na pozadí pohybujú polovičnou rýchlosťou posúvania, čím sa vytvára efekt paralaxy.

Používanie

3. V rámci „body“ pridajte ďalšie časti alebo obsah podľa potreby a zabaľte ich do „.paralaxového kontajnera“. Zahrňte obrázky pozadia pre každú sekciu ako „.parallax-layer--image“.

```html

```

Záver

Kombináciou pevných obrázkov na pozadí, umiestnenia a transformácií CSS3 ste úspešne vytvorili paralaxnú stránku s plnou šírkou pomocou Bootstrapu. Upravte CSS a obsah podľa potreby, aby ste si prispôsobili zážitok z paralaxy.

• Predchádzajúca strana: Ako vytvoriť tipy na bootstrap 5? 
• Ďalšia strana: Ako vytvoriť rozloženie stránky s paralaxou CSS s plnou šírkou?