Dlhé scrolling stránky sa stali skutočným trendom webového dizajnu. Jedným z najkvalitnejších podtypov tohto typu sú paralaktické scrollingové miesta, kde sa obrazy pohybujú, aby vylučovali parallaxový efekt. Keď používateľ posúva stránku nadol, animácie sa spustia a celkovo prinášajú nový vzhľad a pocit na akékoľvek webové stránky, ak sú správne implementované.
Vytváranie stránky rolovania paralaxy je často zdĺhavé, pretože vyžaduje hĺbkovú znalosť CSS, Javascriptu a dobrého dizajnu webových stránok. Tu je zoznam najlepších doplnkov pre rolovanie Parallax, ktoré nielen uľahčujú vytváranie webových stránok s paralaxami, ale aj dobre vybavené knižnice efektov paralaxy, takže sa stáva jednoduchšie a rýchlejšie, aby ste vytvorili dobre vyzerajúcu webovú stránku,
UPOZORNENIE : Pred spustením si všimnite, že pri používaní týchto doplnkov sú potrebné znalosti webových technológií (HTML / CSS / Javascript). Väčšina z uvedených pluginov využíva jquery, takže znalosť Jquery môže byť tiež potrebná.
Paralaxové rolovanie zásuvných modulov
1. ScrollMagic
ScrollMagic je jedným z najobľúbenejších a bohatých doplnkov jquery. Je to javascript knižnica umožňuje vytvárať zdanlivo magické zvitkové efekty. Pomocou aplikácie ScrollMagic môžete animovať na základe posúvacej polohy. To znamená, že môžete upravovať, presúvať alebo animovať prvky HTML pri prechode, akejkoľvek dĺžke trvania chcete, a tiež ľahko pridávať paralaktické efekty na vaše webové stránky. Je vysoko prispôsobiteľný a je tiež ľahký (6kb pri gzipovaní). Spolu s ďalšími paralaxovými scroll plug-inmi má Scroll Magic najlepšiu dokumentáciu a externé zdroje. Je tiež dokonale kompatibilný s mobilným telefónom.
ScrollMagic obsahuje veľa príkladov. Pozrite sa na ich inšpiráciu a návod na používanie tejto knižnice.
o:
Domovská stránka: //janpaepke.github.io/ScrollMagic/
Vytvoril: Jan Paepke
inštalácie:
1. CDN:
2. Stiahnite si z Github
2. skroller
skrollr je ľahká čistá Javascript a CSS knižnica, bez zapojenia jQuery. V podstate je to "Scroll Magic zjednodušený pre CSS". Ak chcete použiť nástroj skroller, nemusíte ovládať Javascript ani jQuery. Len HTML a CSS stačí. Skroller používa atribúty údajov na animáciu ľubovoľného požadovaného elementu HTML. Jednou z hlavných nevýhod skrollerov je to, že animácie fungujú iba pri rolovaní stránky. V opačnom prípade sa všetky efekty pozastavia. skroller umožňuje animovať všetky vlastnosti CSS vašich prvkov HTML.
o:
Domovská stránka: //prinzhorn.github.io/skrollr/
Vytvoril: Prinzhorn
Inštalácia: Stiahnite si z Github
3. pagePiling.js 
Page Piling je doplnok jQuery, ktorý vám umožňuje vytvoriť webové stránky do rôznych sekcií, ktoré sa navzájom zviažu. Pri rolovaní alebo pri prístupe k adrese URL sa každá sekcia zobrazí v úhľadnej animácii. pagePiling.js je kompatibilný so všetkými platformami - desktop, tablet a mobil - a pracuje s väčšinou prehliadačov. To ladne degraduje na starších prehliadačoch, ktoré nepodporujú jeho animácie (ako IE 7). Ak chcete použiť doplnok, musíte do kódu HTML vložiť súbor CSS a Javascript. stránkaPiling.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: //alvarotrigo.com/pagePiling/
Vytvoril: alvarotrigo
Inštalácia: Stiahnite si z Github
4. Alton
Alton je doplnok jQuery "posúvanie na nás". Skrátené zdvíhanie znamená, že natívne posúvanie vášho prehliadača je zakázané v prospech cieleného rolovania, ktoré pri spustení (pomocou kolieska myši alebo touchpadu) vás vedie k ďalšiemu vertikálnemu bodu na obrazovke alebo k hornej časti ďalšieho kontajnera.
Alton umožňuje tri rôzne funkcie, nazývané "Hero", "Bookend" a "Standard". Štandard umožňuje používať rolovanie po celej stránke s každou sekciou 100% výšky. Posuvník prináša ďalšiu sekciu alebo predchádzajúcu časť. Bookend vám umožňuje vytvoriť zážitok typu bookend-kind, zatiaľ čo Hero vám umožňuje posúvať iba v sekcii 'Hero', pričom zvyšok stránky má (opätovne aktivované) natívne posúvanie.
o:
Domovská stránka: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Vytvoril: papier-list
Inštalácia: Stiahnite si z Github
5. Stellar.js
Stellar je plugin jQuery, pomocou ktorého môžete jednoducho pridať scrolling efekt paralaxy. Ak chcete spustiť, najprv musíte spustiť funkciu $ .stellar (). Nastavenia animácie pre jednotlivé prvky je možné konfigurovať pomocou atribútov údajov na danom prvku.
Stellar dokonca umožňuje mať paralaxové pozadie, ktoré sú pozadia, ktoré sa premiestňujú na posuv. Jednou z najužitočnejších funkcií Stellar.js je kompenzácia.
Všetky prvky sa vrátia do pôvodného umiestnenia, keď ich offsetový rodič splní okraj obrazovky - plus alebo mínus vlastný voliteľný offset. To vám umožní veľmi ľahko vytvárať zložité paralaxy. (Hviezdna dokumentácia)
o:
Domovská stránka: //markdalgleish.com/projects/stellar.js/
Vytvoril: Mark Dalgeish
Inštalácia: Stiahnite si z Github
6. multiScroll.js
Tento doplnok je vytvorený tým istým vývojárom (alvarotrigo), ktorý vytvoril plugin pagePiling.js. Čo v podstate robí viacúčelový pohyb, umožňuje vytvoriť efekt, pri ktorom sa každá časť stránky načíta v dvoch rozdelených častiach, ktoré sa zasunú na miesto pri načítaní stránky. Pozrite si domovskú stránku a zistite, ako to vyzerá vo vašom prehliadači. program multiScroll.js umožňuje nastaviť rýchlosť posúvania, uvoľňovanie, možnosť posúvania klávesnice a mnoho ďalších vlastností, takže môžete efekt prispôsobiť presne tak, ako to potrebujete.
o:
Domovská stránka: //alvarotrigo.com/multiScroll/
Vytvoril: alvarotrigo
Inštalácia: Stiahnite si z Github
7. ScrollMe
ScrollMe je plugin na pridanie jednoduchých scrollovacích efektov paralaxu na vašu stránku. Môžete meniť, otáčať, prekladať a meniť nepriehľadnosť prvkov na stránke pri posúvaní nadol. ScrollMe nevyžaduje žiadne Javascript a stačí len znalosť CSS. Pridaním triedy "animateme" a požadovaných dátových atribútov môžete animovať ľubovoľný prvok HTML. ScrollMe sa najlepšie používa na pridávanie efektov CSS. Je to ľahké a všetky animácie sú hladké, pokiaľ ich používate s mierou.
o:
Domovská stránka: //scrollme.nckprsn.com/
Vytvoril: Nick Pearson
Inštalácia: Stiahnite si z Github
8. Parallax Scroll
Parallax Scroll je ľahko použiteľný doplnok jQuery, ktorý vám umožní vytvoriť efekt scrollingu paralaxy, ktorý sa nachádza na stránkach ako Spotify. Je pomerne jednoduché - stačí špecifikovať požadované triedy CSS pre držiaky obrázkov. Skôr ako používať tagy, aby ste mohli použiť tento plugin, musíte použiť elementy, ktoré majú špecifikovaný obrázok na pozadí (pomocou vlastností CSS `background-image`). Tieto elementy môžete reagovať pomocou dotácií CSS @media.
o:
Domovská stránka: //parallax-scroll.aenism.com/
Vytvoril: Aen
Inštalácia: Stiahnite si z Github
9. Jarallax
Jarallax je knižnica CSS a Javascript, ktorá sa špecializuje na efekty rolovania paralaxy. Jarallax je nakonfigurovaný pomocou Javascriptu (Žiadne jQuery, len čistá vanilka JS). Podporuje plynulé posúvanie, uvoľňovanie a animáciu paralaxy. Jarallax podporuje väčšina prehliadačov, naprieč platformami. Webová stránka spoločnosti Jarallax má vynikajúcu dokumentáciu o tom, ako prispôsobiť Jarallax pre vaše potreby. Jarallax má tiež video tutoriály, ktoré ukazujú, ako nastaviť Jarallax pre vaše webové stránky a ako začať.
o:
Domovská stránka: //www.jarallax.com/
Vytvoril: Jarallax
Inštalácia: Stiahnite si z internetovej stránky spoločnosti Jarallax
10. Superscrollorama
Superscrollorama je plugin založený na jQuery, ktorý podporuje posúvanie animácií. Je poháňaný systémom TweenMax a Greensock Tweening Engine, čo zvyšuje výkon animácie a plynulosť. Animácie Superscrollorama sa volajú prostredníctvom 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 na dotykovom displeji zvládajú posúvanie iným spôsobom). Použitím metódy setScrollContainerOffset je možné na mobilných zariadeniach pristupovať k efektom Superscrollorama.
Tu je kód pre toto:
.setScrollContainerOffset(x, y)
(x: x odsadenie posuvného kontajnera, y: x posunutie posuvného zásobníka)
o:
Domovská stránka: //johnpolacek.github.io/superscrollorama/
Vytvoril: johnpolacek
Inštalácia: Stiahnite si z Github
POZRI TIEŽ 10 najlepších generátorov statických stránok
