Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End
Code

Jednoduchá scrolovacie technika Parallax

by
Difficulty:IntermediateLength:LongLanguages:

Slovak (Slovenčina) translation by Zoli Rosa (you can also view the original English article)

Parallax scrolovanie je zaujímavá technika, kde sa pri scrollovanie snímky na pozadí pohybujú pomalšie ako obsah a tým sa vytvára ilúzia 3D hĺbky. Ako som plánoval prerobiť svoju osobnú stránku, mojím cieľom bolo napísať najkratšie a najjednoduchšie kód a získať maximalní štýl. Ukážem vám, ako som to urobil.

Ak hľadáte rýchly spôsob ako začať so základnou šablónou pre vaše tému, nájsť jednoduché Parallax Theme by mohlo byť dobrou variantom. Alebo si prejdite jednu z našich stránok s šablónami. Môžete tiež nájsť poskytovateľa služieb na Envato Studio, ktorí pre vás vytvoria Parallax scrolovacie stránku.

V tomto tutoriale vás naučím najjednoduchší Parallax scrolling techniku, ktorú uvidíte, tak začnime!


Krok 1: Označenie

Táto technika sa točí okolo ovládanie rýchlosti snímke pozadia. Takže začneme s HTML označením, vytvorte dve sekcie spolu s potrebnými Attribut: "data-type" a "data-speed". Nebojte, vysvetlím neskôr.

Používam section tag s Attribut data-typ a data-speed, ktoré sú v HTML5. To robí HTML značenie jasnejšie a jednoduchšie sa číta.

Podľa špecifikácie pre Custom Data Attributes, akýkoľvek attribute, ktorý začína s data- sa bude správať ako skladisko pre privátne dáta. Dodatočne, toto neovplyvní rozloženie prezentácie.

Pretože všetko čo potrebujeme je kontrolovať rýchlosť snímok na pozadí, použijeme data-type = "background" a dáta-speed "10" ako kľúčové atribúty pre špecifikáciu potrebných parametrov.

Viem čo si myslíte, bojíte sa o IE. Nikdy sa nebojte; mám workaround! V správny čas vám dám poviem.

Ďalšie, pridajme obsah do tagu article> vnútri každe section>

O čo sa tu pokúšame je vytvorenie section> scrollovanie pozadí pomalší ako jeho obsahu, napr. Article>. Toto nám pomôže vytvoriť Parallax ilúziu. Než budeme pokračovať na jQuery kúzla, pridáme snímky pozadia do nášho CSS pre každú section>.

Po pridaní pozadia pre obe sekcie, by to malo vyzerať takto:

image
image

Pridáme viac CSS pre štýl a oživenie stránky!

Teraz by to malo vyzerať takto ..

image

Krok 2: Kúzelný kód

Áno, je to tak; to je to, kde začínajú kúzla! Pomocou jQuery, začneme štandardne document.ready () metódou pre zaistenie, že stránka je nahraná a pripravená pre manipuláciu.

Táto technika sa točí okolo kontroly rýchlosti snímke pozadí, ktorý existuje v oboch sekciách.

Teraz potrebujem vašu pozornosť tu. Prvá vec čo sa dole deje je, že prechádzame cez každú section> na stránke, ktorá má atribút data-type = "background"

Pridajte ďalšiu funkciu, .scroll (), vnútri .each (), ktorá je volaná ako užívateľ začne scrollovať.

Musíme určiť koľko toho užívateľ nascrolloval a potom vydeliť hodnotu s data-speed hodnotou, spomínanú v Markup.

$ Window.scrollTop (): získavame aktuálnu scrollovacie hodnotu z vrchu. To vlastne určuje o koľko užívateľ scrolloval nahor. $ Bgobj.data ('speed') odkazuje na dáta-speed ktoré je priradené v Markup a yPos je konečná hodnota, ktorú musíme použiť na scrollovanie. Avšak, bude to záporná hodnota, pretože musíme pozadí posunúť opačným smerom, než scrolluje používateľ.

Preskúmame to trochu viac s príkladom:

image

Na snímke vyššie, data-speed je 10 a predpokladajme, že okno prehliadača scrollovalo 57px. To znamená 57px delené 10 = 5.7px.

Posledná vec čo musíme urobiť, je dať dohromady pozíciu nášho pozadia do premennej. Kvôli zachovaniu horizontálnej pozície pozadí ako statické, nastavili sme 50% ako xPosition. Potom sme pridali yPos ako yPosition a konečne sme nastavili súradnice pozadia do nášho section> pozadie: $ bgobj.css ({backgroundPosition: coords}) ;.

Váš konečný kód by mal vyzerať takto:

Jaj, zvládli sme to! Skúste si to.


IE oprava

Je tu posledná oprava: staršie IE nevie vykresliť section> a article> tagy. To je ale jednoducho opraviteľné; použijeme štandardné riešenie vytváranie elementov, čo spôsobí magické rozpoznanie HTML5 tagov.

Dodatočne, musíme použiť základný CSS reset súbor, aby všetky prehliadače fungovali správne. Našťastie nástroj, ako je HTML5 Boilerplate sa o všetko postará, keď dôjde na normalizáciu medzi prehliadačom.

To je všetko v tejto lekcii! Otázky a poznámky, ktoré by ste chceli pridať? Dajte mi vedieť v komentároch!

A ak hľadáte rýchlo riešenie s profesionálnymi výsledkami, potom sa pozrite na naše Parallax témy a One Page Template možnosti, k dispozícii na ThemeForest.

Advertisement
Advertisement
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.