Změna velikosti písma

Drobečková navigace

CSS blog > Parallax

Parallax



Co je parallax?

Pokud jste se někdy dívali z okna auta při jízdě po dálnici zjistíte, že elektrické sloupy vedle cesty se pohybují vysokou rychlostí, zatímco hory v pozadí se pohybují jen velmi pomalu. To je Parallax efekt v akci.

Parallax je tedy efekt, kdy se zdá být poloha objektu odlišná při pohledu z různých pozic. Pohyb Parallax (nebo v našem případě - posouvání / scrolování) nám pak dává iluzi, že dva objekty jsou v jedné přímce, ale pohybují se různou rychlostí.

Navigace

  • Co je parallax?
  • Příklady použití
  • Příklady v praxi
    • Falešný parallax
    • Parallax

 

 

Příklady použití

A kde můžeme Parallax využít? Všude. Paralax můžeme použít tam, kde chcete návštěvníkovi předat příběh a zapůsobit. Efekt se nejčastěji používá pro vertikální scrolování, nicméně zajímavé je i použití horizontální.

ukazky.antee.cz
voziky.antee.cz
whiteboard.is/work
ihatetomatoes.net
ianlunn.co.uk
boy-coy.com
hotdot.pro
numero10.ch

další příklady použití ...

 

Příklady v praxi

 

Falešný parallax (http://ukazky.antee.cz/parallax)

Princip je v tom, že obrázek v pozadí je fixně ukotven, takže při scrollování obsahu se nehýbe. Při tomto příkladu si vystačíme jen s HTML a čistým CSS - nebudeme potřebovat JavaScript.

HTML

<div class="module parallax">
     <div class="container">
          <h1>Landscape</h1>
     </div>
</div>
<div class="module content">
     <div class="container">
          <h2>Lorem Ipsum Dolor</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p>
     </div>
</div>

 

CSS

.module h2 {
    margin-bottom: 40px;
}
.module.content {
    padding: 40px 0;
}
.module.parallax {
    height: 300px;
    background: url("image.php?nid=11524&oid=4915104") no-repeat fixed 50% 50% / cover;
}
.module.parallax h1 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 3em;
    line-height: 300px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

 

Parallax (http://voziky.antee.cz/sluzby)

Tady už si budeme muset pomoci Javascriptem.

Zdroje

Do stránek si musíme nejprve nahrát sobor parallax.min.js (ke stažení zde). Poté ho nalinkovat do sekce "Zdroje" v "HTML v layotu".

# parallax
<script src="/file.php?nid=11524&oid=4915135"></script>

Vložení pomocí atributů v HTML

Pak už jen stačí vložit div s požadovanými atributy tam, kde chceme efekt parallaxu mít.

Minimální požadované atributy jsou: data-parallax="scroll" a definice obrázku data-image-src="cesta k obrázku".
Budeme také potřebovat přidat třídu, abychom mohli klasicky dodefinovat div (např. jeho výšku podle toho, jak velká část z celku se má zobrazovat).

<div class="parallax-window" data-parallax="scroll" data-image-src="/image.php?nid=11524&oid=4915104></div>

 

Stejně jako cycle2, i parallax má další možné atributy - více na http://pixelcog.github.io/parallax.js.


Kalendář akcí

Po Út St Čt So Ne
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4