30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Front-End
Code

Jednoduchá scrolovací technika Parallax 

by
Difficulty:IntermediateLength:LongLanguages:

Czech (Čeština) translation by Karel Krkoska (you can also view the original English article)

Parallax scrolování je zajímavá technika, kde se při scrollování snímky na pozadí pohybují pomaleji než obsah a tím se vytváří iluze 3D hloubky. Jak jsem plánoval předělat svoji osobní stránku, mým cílem bylo napsat nejkratší a nejjednodušší kód a získat maximalní styl. Ukážu vám, jak jsem to udělal.

Pokud hledáte rychlý způsob jak začít se základní šablonou pro vaše téma, nalézt jednoduché Parallax Theme by mohlo být dobrou variantou. Nebo si projděte jednu z našich stránek s šablonami. Můžete také najít poskytovatele služeb na Envato Studio, kteří pro vás vytvoří parallax scrolovací stránku.

V tomto tutorialu vás naučím nejjednodušší parallax scrolling techniku, kterou uvidíte, tak začněme!


Krok 1: Označení

Tato technika se točí kolem ovládání rychlosti snímku pozadí. Takže začneme s HTML označením, vytvořte dvě sekce spolu s potřebnými attributy: "data-type" a "data-speed". Nebojte, vysvětlím později.

Používám <section> tag s attributy data-typ a data-speed, které jsou v HTML5. To dělá HTML značení jasnější a jednodušeji se čte.

Podle specifikace pro Custom Data Attributes, jakýkoliv attribute, který začíná s data- se bude chovat jako skladiště pro privátní data. Dodatečně, tohle neovlivní rozložení prezentace.

Protože vše co potřebujeme je kontrolovat rychlost snímků na pozadí, použijeme data-type="background" a data-speed"10" jako kličový atribut pro specifikaci potřebných parametrů.

Vím co si myslíte, bojíte se o IE. Nikdy se nebojte; mám workaround! Ve správný čas vám dám řeknu.

Další, přidejme obsah do tagu <article> uvnitř každe <section>

O co se tu pokoušíme je vytvoření <section> scrollování pozadí pomalejší než jeho obsahu, např. <article>. Tohle nám pomůže vytvořit parallax iluzi. Než budeme pokračovat na jQuery kouzla, přidáme snímky pozadí do našeho CSS pro každou <section>.

Po přidání pozadí pro obě sekce, by to mělo vypadat takto:

image
image

Přidáme více CSS pro styl a oživení stránky!

Nyní by to mělo vypadat takto..

image

Krok 2: Kouzelný kód

Ano, je to tak; to je to, kde začínají kouzla! Pomocí jQuery, začneme standardně document.ready() metodou pro zajištění, že stránka je nahrána a připravena pro manipulaci.

Tato technika se točí kolem kontroly rychlosti snímku pozadí, který existuje v obou sekcích.

Nyní potřebuji vaši pozornost zde. První věc co se dole děje je, že procházíme přes každou <section> na stránce, která má atribut data-type="background"

Přidejte další funkci, .scroll(), uvnitř .each(), která je volána jak uživatel začne scrollovat.

Musíme určit kolik toho uživatel nascrolloval a potom vydělit hodnotu s data-speed hodnotou, zmíněnou v markupu.

$window.scrollTop(): získáváme aktuální scrollovací hodnotu z vrchu. To vlastně určuje o kolik uživatel scrolloval nahoru. $bgobj.data('speed') odkazuje na data-speed které je přiřazeno v markupu a yPos je konečná hodnota, kterou musíme použít pro scrollování. Ovšem, bude to záporná hodnota, protože musíme pozadí posunout opačným směrem, než scrolluje uživatel.

Prozkoumáme to trochu víc s příkladem:

image

Na snímku výše, data-speed je 10 a předpokládejme, že okno prohlížeče scrollovalo 57px. To znamená 57px děleno 10 = 5.7px.

Poslední věc co musíme udělat, je dát dohromady pozici našeho pozadí do proměnné. Kvůli zachování horizontální pozice pozadí jako statické, nastavili jsme 50% jako xPosition. Potom jsme přidali yPos jako yPosition a konečně jsme nastavili souřadnice pozadí do našeho <section> pozadí: $bgobj.css({ backgroundPosition: coords });.

Váš konečný kód by měl vypadat takto:

Jaj, zvládli jsme to! Zkuste si to.


IE oprava

Je zde poslední oprava: starší IE neumí vykreslit <section> a <article> tagy. To je ale jednoduše opravitelné; použijeme standardní řešení vytváření elementů, což způsobí magické rozpoznání HTML5 tagů.

Dodatečně, musíme použít základní CSS reset soubor, aby všechny prohlížeče fungovali správně. Naštěstí nástroj, jako je HTML5 Boilerplate se o vše postará, když dojde na normalizaci mezi prohližeči.

To je vše v této lekci! Dotazy a poznámky, které byste chtěli přidat? Dejte mi vědět v komentářích!

A pokud hledáte rychle řešení s profesionálními výsledky, potom se podívejte na naše Parallax témata a One Page Template možnosti, k dispozici na ThemeForest.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.