V tomto článku sa pozrieme na to, ako vytvoríme pekný parallax efekt webstránky jednoduchým posúvaním obsahu stránky pri zmenách statického pozadia.

Čo je parallax?

Ak ste sa niekedy pozreli z okna auta pri jazde po diaľnici – zistíte, že elektrické stĺpy popri ceste sa pohybujú vysokou rýchlosťou, zatiaľ čo hory v pozadí sa pohybujú len veľmi pomaly. To je parallax efekt v akcii.

Parallax je teda efekt, kedy sa zdá byť poloha objektu odlišná pri pohľade z rôznych pozícií. Pohyb parallaxu (alebo v našom prípade – posúvanie / scrolovanie) nám potom dáva ilúziu, že dva objekty sú v jednej priamke, no pohybujú sa rôznou rýchlosťou.

Pokiaľ ide o web – môžeme aplikovať parallax efekt na container, ktorý bude mať obrázky pozadia a text bude vo vrchnej vrstve nad obrázkami. Vo svojej najjednoduchšej forme bude parallax efekt pôsobiť tak, že sa bude obsah posúvať (pri scrolovaní) normálne a pozadia zostanú stacionárne. Pri tomto príklade si vystačíme len s čistým CSS – nebudeme potrebovať JavaScript.

Návrh a štruktúra parallax efektu

Ak by sme mali pevnú šírku stránky, ktorá by nemala responzívny design – potom by sme žiadneho efektu nedosiahli. Sme vo veku respontívneho webdesignu – tak sa ho nebojme aplikovať! Máme predsa k dispozícii príjemné CSS so všetkými vymoženosťami. Ale najskôr sa pozrieme na návrh layoutu, ktorý je jednoduchý – budeme striedať pozadie s nadpisom a textový obsah (obidve v section) tak, aby sme dosiahli maximálny efekt parallaxu.

<section class="module parallax parallax-1">
  <div class="container">
    <h1>Landscape</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <h1>Castle</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

<section class="module parallax parallax-3">
  <div class="container">
    <h1>Ruins</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

Každá sekcia s triedou parallaxu (section class module paralax) bude obsahovať naše obrázky na pozadí + nadpis a každá časť s triedou obsahu (section slass module content) bude mať jednoduchý obsah s H2 + text. Trieda container je pohyblivý div s maximálnou šírkou, takže responzivita toho všetkého veľmi jednoduchá.

Štýly a funkčnosť CSS

Prvom rade si treba uvedomiť, že všetky použité obrázky na pozadí majú šírku 1600px a výšku 600px. To mi umožňuje nastaviť parallax section na pevnú výšku 600px. Pretože nechcem opakovať pozadie (background repeat), užívateľom s vysokým rozlíšením by sa obrázky nezobrazili na celú šírku. Našťastie, môžeme využiť CSS background-size, a nastaviť ju na cover. To núti obrázok na pozadí obsadiť celkové dostupné miesto tak, že ho proporcionálne zväčší.

A teraz to najdôležitejšie: potrebujeme náš obrázok na pozadí nastaviť tak, aby zostal na mieste, zatiaľ čo naše obsahové sekcie sa budú posúvať. CSS nám opäť „uľahčí život“ a využíjeme vlastnosť background-attachment, ktorú nastavíme na fixed.

/* PRIMARY STRUCTURE
======================= */
.container {
  max-width: 960px;
  margin: 0 auto;
}
/* SECTIONS
======================= */
section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url("../img/demo/_small/1.jpg");
}
section.module.parallax-2 {
  background-image: url("../img/demo/_small/2.jpg");
}
section.module.parallax-3 {
  background-image: url("../img/demo/_small/3.jpg");
}

@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}

Ako funguje náš napísaný kód parallax efektu v praxi – si môžete pozrieť v ukážke.

Podpora prehliadačov

Podpora prehliadačov je vo všeobecnosti dobrá. Verzie IE8 a nižšie nebudú podporovať background-size, ale môžeme to ošetriť fixom pre IE.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";