10 najlepších doplnkov na posúvanie paralaxy

Stránky s dlhým rolovaním sa stali skutočne bežným trendom webdizajnu. Jedným z najúžasnejších podtypov tohto sú paralaxové rolovacie stránky, kde sa obrázky pohybujú a vytvárajú paralaxový efekt. Keď sa používateľ posúva po stránke nadol, animácie sa spúšťajú a celkovo to dodáva každej webovej lokalite svieži vzhľad, ak je správne implementovaná.

Vytvorenie stránky s paralaxným rolovaním je často zdĺhavé, pretože vyžaduje dôkladnú znalosť CSS, Javascriptu a dobrý webový dizajn. Tu je zoznam Najlepšie doplnky na posúvanie paralaxy ktoré vám nielen uľahčia vytváranie paralaxných rolovacích stránok, ale majú aj dobre obdarené knižnica paralaxových efektov, aby bolo pre vás jednoduchšie a rýchlejšie vytvoriť dobre vyzerajúci web stránku.

zrieknutie sa zodpovednosti:Pred začatím si uvedomte, že na používanie týchto doplnkov sú potrebné určité znalosti webových technológií (HTML/CSS/Javascript). Väčšina z uvedených doplnkov využíva jquery, takže môže byť potrebná aj znalosť Jquery.

Paralaxné rolovacie doplnky

1. ScrollMagic

ScrollMagic je jedným z najpopulárnejších a na funkcie bohatých doplnkov jquery. Je to knižnica javascript, ktorá vám umožňuje vytvárať zdanlivo magické rolovacie efekty. Pomocou ScrollMagic môžete animovať na základe vašej pozície posúvania. To znamená, že pri posúvaní môžete upravovať, presúvať alebo animovať prvky HTML na ľubovoľnú dobu trvania a tiež jednoducho pridávať efekty paralaxy na svoj web. Je vysoko prispôsobiteľný a je tiež ľahký (6 kB pri gzip). Spomedzi iných doplnkov paralaxného posúvania má Scroll Magic najlepšiu dokumentáciu a externé zdroje. Je dokonale kompatibilný aj s mobilom.

ScrollMagic má veľa príklady uvedené. Pozrite si ich, kde nájdete inšpiráciu a návod na používanie tejto knižnice.

O:

domovská stránka: http://janpaepke.github.io/ScrollMagic/

Vytvoril: Ján Paepke

Inštalácia:

1. CDN:

2. [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/janpaepke/ScrollMagic”]

2. skrollr

skrollr je ľahká knižnica čistého JavaScriptu a CSS bez zapojenia jQuery. Je to v podstate ‚Scroll Magic zjednodušené pre CSS‘. Ak chcete používať skrollr, nepotrebujete poznať Javascript ani žiadny jQuery. Stačí HTML a CSS. skrollr používa atribúty údajov na animáciu ľubovoľného prvku HTML, ktorý chcete. Jednou z hlavných nevýhod skrollr je, že animácie fungujú iba počas posúvania stránky. V opačnom prípade budú všetky efekty pozastavené. skrollr vám umožňuje animovať všetky vlastnosti CSS vašich prvkov HTML.

O:

domovská stránka: http://prinzhorn.github.io/skrollr/

Vytvoril: Prinzhorn

Inštalácia: [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/Prinzhorn/skrollr”]

3. pagePiling.js

Page Piling je doplnok jQuery, ktorý vám umožňuje vytvárať webové stránky do rôznych sekcií, ktoré sa hromadia jedna na druhej. Po rolovaní alebo pri prístupe k URL sa každá sekcia odkryje v úhľadnej posuvnej animácii. pagePiling.js je kompatibilný so všetkými platformami – desktop, tablet a mobil – a funguje s väčšinou prehliadačov. V starších prehliadačoch, ktoré nepodporujú jeho animácie (ako IE 7), sa pôvabne degraduje. Ak chcete doplnok používať, musíte do kódu HTML zahrnúť súbor CSS a Javascript. pagePiling.js je inicializovaná funkciou (document).ready:

$(document).ready(function() {
$('#pagepiling').pagepiling();
});

Pre pokročilejšie inicializácie prejdite cez README.md.

O:

domovská stránka: http://alvarotrigo.com/pagePiling/

Vytvoril: alvarotrigo

Inštalácia: [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/alvarotrigo/pagePiling.js”]

4. Alton

Alton je doplnok jQuery „scroll-jacking to us“. Scroll jacking znamená, že natívne posúvanie vášho prehliadača je zakázané v prospech cieleného posúvania, ktoré sa spustí (pomocou kolieska myši alebo touchpadu) vás prenesie na ďalší vertikálny bod na obrazovke alebo na hornú časť nasledujúceho kontajnera.

Alton umožňuje tri samostatné druhy funkcií, nazývané „Hero“, „Bookend“ a „Standard“. Štandardné vám umožňuje používať rolovanie na celú stránku, pričom každá sekcia má 100 % výšku. Zvitok zobrazí nasledujúcu sekciu alebo predchádzajúcu sekciu. Bookend vám umožňuje vytvoriť zážitok podobný bookendu, zatiaľ čo Hero vám umožňuje posúvať sa len v sekcii „Hero“, pričom zvyšok stránky má (znova aktivované) natívne posúvanie.

O:

domovská stránka: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Vytvoril: papierový list

Inštalácia: [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/paper-leaf/alton/”]

5. Stellar.js

Stellar je doplnok jQuery, prostredníctvom ktorého môžete jednoducho pridať efekty paralaxného rolovania. Ak chcete spustiť, musíte najskôr spustiť funkciu $.stellar(). Nastavenia animácie pre jednotlivé prvky možno konfigurovať pomocou údajových atribútov daného prvku.

Stellar vám dokonca umožňuje mať pozadie paralaxy, čo sú pozadia, ktoré sa menia pri posúvaní. Jednou z najužitočnejších funkcií Stellar.js sú offsety.

Všetky prvky sa vrátia do svojej pôvodnej polohy, keď sa ich odsadený rodič stretne s okrajom obrazovky – plus alebo mínus vaše vlastné voliteľné odsadenie. To vám umožňuje veľmi ľahko vytvárať zložité paralaxové vzory. (Hviezdna dokumentácia)

O:

domovská stránka: http://markdalgleish.com/projects/stellar.js/

Vytvoril: Mark Dalgeish

Inštalácia: [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/markdalgleish/stellar.js”]

6. multiScroll.js

Tento plugin vytvoril ten istý vývojár (alvarotrigo), ktorý vytvoril plugin pagePiling.js. Viacnásobné posúvanie v podstate robí to, že vám umožňuje vytvoriť efekt, pri ktorom sa každá sekcia stránky načíta na dve rozdelené časti, ktoré sa pri načítaní stránky posúvajú na miesto. Pozrite sa na domovskú stránku a zistite, ako to vyzerá vo vašom prehliadači. multiScroll.js vám umožňuje nastaviť rýchlosť posúvania, zjednodušenie, možnosť posúvania klávesnicou a mnoho ďalších vlastností, aby ste si mohli prispôsobiť efekt presne tak, ako ho potrebujete.

O:

domovská stránka: http://alvarotrigo.com/multiScroll/

Vytvoril: alvarotrigo

Inštalácia: [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/alvarotrigo/multiscroll.js”]

7. ScrollMe

ScrollMe je doplnok na pridávanie jednoduchých efektov posúvania paralaxy na vašu stránku. Pri posúvaní nadol môže meniť mierku, otáčať, prekladať a meniť nepriehľadnosť prvkov na stránke. ScrollMe nevyžaduje žiadny Javascript a stačí iba znalosť CSS. Pridaním triedy „animateme“ a požadovaných dátových atribútov môžete animovať akýkoľvek prvok HTML. ScrollMe sa najlepšie používa na pridávanie CSS efektov. Je ľahký a všetky animácie sú plynulé, pokiaľ ich používate s mierou.

O:

domovská stránka: http://scrollme.nckprsn.com/

Vytvoril: Nick Pearson

Inštalácia: [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/nckprsn/scrollme”]

8. Paralaxný zvitok

Parallax Scroll je ľahko použiteľný doplnok jQuery, ktorý vám umožňuje vytvoriť efekt posúvania paralaxy, ktorý sa nachádza na stránkach ako Spotify. Použitie je celkom jednoduché – stačí zadať požadované triedy CSS pre držiteľov obrázkov. Skôr ako používať tagy, ak chcete použiť tento doplnok, musíte použiť prvky, ktoré majú špecifikovaný obrázok na pozadí (pomocou vlastnosti CSS `background-image`. Prvky môžete nastaviť tak, aby boli responzívne pomocou dopytov CSS @media.

O:

domovská stránka: http://parallax-scroll.aenism.com/

Vytvoril: Aen.

Inštalácia: [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/aentan/Parallax-Scroll”]

9. Jarallax

Jarallax je knižnica CSS a Javascript, ktorá sa špecializuje na efekty paralaxného rolovania. Jarallax je nakonfigurovaný pomocou Javascriptu (žiadne jQuery, len čistý vanilkový JS). Podporuje funkcie vyhladeného posúvania, easing a animáciu paralaxy. Jarallax podporuje väčšina prehliadačov naprieč platformami. Webová stránka Jarallax má vynikajúcu dokumentáciu o tom, ako prispôsobiť Jarallax vašim potrebám. Jarallax má tiež videonávody, ktoré ukazujú, ako nastaviť Jarallax pre váš web a ako začať.

O:

domovská stránka: http://www.jarallax.com/

Vytvoril: Jarallax.

Inštalácia: [vc_button title=”Stiahnuť z webovej stránky Jarallax” target=”_blank” color=”default” size=”size_small” href=” http://www.jarallax.com/?page=download”]

10. Superscrollorama

Superscrollorama je doplnok založený na jQuery, ktorý podporuje animácie posúvania. Je poháňaný TweenMax a Greensock Tweening Engine, ktorý zvyšuje výkon animácie a plynulosť. Animácie Superscrollorama sa volajú cez jQuery a môžete použiť aj väčšinu funkcií TweenMax.js. Bohužiaľ, tieto animácie nie sú plne podporované mobilnými zariadeniami (pretože zariadenia s dotykovou obrazovkou zvládajú rolovanie iným spôsobom). Pomocou metódy setScrollContainerOffset je však možné pristupovať k efektom Superscrollorama na mobilných zariadeniach.

Tu je kód, ako to urobiť:

.setScrollContainerOffset(x, y)

(X: posun x rolovacieho kontajnera, y: posun x rolovacieho kontajnera)

O:

domovská stránka: http://johnpolacek.github.io/superscrollorama/

Vytvoril: johnpolacek

Inštalácia: [vc_button title=”Stiahnuť z Github” target=”_blank” color=”default” size=”size_small” href=” https://github.com/johnpolacek/superscrollorama”]

POZRI TIEŽ: 10 najlepších generátorov statických stránok