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')";