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')";
Tento článok ukazuje, ako pomocou CSS transformácie, perspektívy a nejakých scale trikov vytvoríme len z čistého CSS parallax efekt web stránky pri scrolovaní. Parallax je takmer vždy zviazaný s JavaScriptom. Čo keby ste ale mohli úplne odstrániť závislo
WordPress poháňa viac ako 43 % všetkých webových stránok na internete. Ak vám stačí jednoduchý web, ide o jeden z najspoľahlivejších spôsobov tvorby webovej stránky. V tomto článku vás prevedieme jednoduchými krokmi, ako tvorba webovej stránky vo WordPres
prejsť na článokVlastníte webovú stránku alebo si ju chystáte založiť? Dôležitým krokom v správe stránky je overenie vlastníctva domény v Google Search Console. Hoci sa to na prvý pohľad môže zdať zložité, ide o pomerne jednoduchý proces, počas ktorého si Google overí, č
prejsť na článokCockerspaniel Club Slovakia Redesign pôvodnej statickej stránky CSC. Nová farebná paleta, oživenie stránky fotografiami, newsletter. Logo zatiaľ zostalo pôvodné. Základné SEO a zabezpečenie SSL. Responzívny dizajn rovnaké zobrazovanie stránky na stolnom
prejsť na článokChcete vyššiu návštevnosť stránky? Lepšie pozície vo vyhľadávaní? Prečítajte si článok, ktorý obsahuje aktuálne informácie pre perfektné SEO. Príspevok Ako zvýšiť návštevnosť web stránky pre rok 2021? SEO návod zobrazený najskôr Fine.
prejsť na článok