Dlouhé rolování stránky se staly opravdu běžný trend web design. Jedním z nejúžasnějších podtypů tohoto typu jsou paralaxní scrollovací místa, kde se obrazy pohybují, aby vydaly efekt paralaxy. Jak uživatel posouvá stránku dolů, animace se spouští a celkově poskytuje nový vzhled, pokud je správně implementován.
Dělat paralaxu rolování stránky je často únavné, protože to vyžaduje in-hloubkové znalosti CSS, Javascript a dobrý web design se dostat pryč. Zde je seznam nejlepších rolovacích zásuvných modulů Parallax, které vám nejen usnadňují vytváření stránek paralaxového posouvání, ale mají také dobře obdařenou knihovnu efektů paralaxy, takže pro vás bude snazší a rychlejší vytvořit dobře vypadající webovou stránku .
ODMÍTNUTÍ : Před zahájením práce si uvědomte, že pro použití těchto pluginů je vyžadována znalost webových technologií (HTML / CSS / Javascript). Většina z uvedených pluginů využívá jquery, takže znalost Jquery může být také potřebná.
Parallax rolovací pluginy
1. ScrollMagic
ScrollMagic je jeden z nejpopulárnějších plug-inů jquery s bohatými funkcemi. Je to javascript knihovna vám umožní vytvořit zdánlivě magické efekty. Pomocí funkce ScrollMagic můžete animovat podle pozice posouvání. To znamená, že můžete upravovat, přesouvat nebo animovat prvky HTML při posouvání, po jakoukoli dobu, kterou chcete, a také snadno přidat efekty paralaxy na vaše webové stránky. Je vysoce přizpůsobitelný a je také lehký (6kb při gzipped). Mezi další pluginy paralaxového posuvníku má Scroll Magic nejlepší dokumentaci a externí zdroje. Je také dokonale kompatibilní s mobilním telefonem.
ScrollMagic obsahuje mnoho příkladů. Podívejte se na inspiraci a rady ohledně používání této knihovny.
O:
Hlavní stránka: //janpaepke.github.io/ScrollMagic/
Vytvořil: Jan Paepke
Instalace:
1. CDN:
2. Stáhnout z Githubu
2. skrollr
skrollr je odlehčená čistá knihovna Javascript a CSS, do které není zapojen žádný jQuery. Je to v podstatě „Scroll Magic zjednodušené pro CSS“. Chcete-li použít skrollr, nemusíte znát Javascript nebo jQuery. Stačí HTML a CSS. skrollr používá k animaci libovolného elementu HTML požadované atributy dat. Jednou z hlavních nevýhod skrollr je, že animace fungují pouze při posouvání stránky. Jinak budou všechny efekty pozastaveny. skrollr umožňuje animovat všechny vlastnosti CSS prvků HTML.
O:
Hlavní stránka: //prinzhorn.github.io/skrollr/
Vytvořil: Prinzhorn
Instalace: Stáhnout z Githubu
3. pagePiling.js 
Page Piling je plugin jQuery, který vám umožní vytvořit vaše webové stránky do různých sekcí, které se hromadí na sebe. Po rolování nebo přístupu k URL, každá sekce dostane odhalil v elegantní posuvné animace. pagePiling.js je kompatibilní se všemi platformami - desktop, tablet a mobilní - a pracuje s většinou prohlížečů. Degraduje ladně na starších prohlížečích, které nepodporují jeho animace (např. IE 7). Chcete-li použít plugin, musíte do kódu HTML zahrnout soubor CSS a soubor Javascript. pagePiling.js je inicializován (document) .ready function:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Další pokročilé inicializace naleznete v README.md.
O:
Domovská stránka: //alvarotrigo.com/pagePiling/
Vytvořil: alvarotrigo
Instalace: Stáhnout z Githubu
4. Alton
Alton je plugin jQuery 'scroll-jacking to us'. Scroll jacking znamená, že nativní svitek vašeho prohlížeče je deaktivován ve prospěch cíleného rolování, které, když je iniciováno (kolečkem myši nebo touchpadem), přejde na další vertikální bod na obrazovce nebo na horní část dalšího kontejneru.
Alton umožňuje tři samostatné funkce, tzv. „Hero“, „Bookend“ a „Standard“. Standard vám umožňuje používat celé posouvání stránek, přičemž každá sekce má 100% výšku. Svitek představuje další část nebo předchozí část. Bookend vám umožní vytvořit zážitek z bookendu, zatímco Hero vám umožní posouvat jack pouze v sekci 'Hero', přičemž zbytek stránky má (znovu povolený) nativní rolování.
O:
Hlavní stránka: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Vytvořil: list papíru
Instalace: Stáhnout z Githubu
5. Stellar.js
Hvězdný je jQuery plugin, přes který můžete snadno přidat efekty paralaxy rolování. Chcete-li spustit, musíte nejprve spustit funkci $ .stellar (). Nastavení animace pro jednotlivé prvky lze konfigurovat pomocí datových atributů na daném prvku.
Hvězdná dokonce umožňuje mít paralaxa pozadí, které jsou pozadí, které přemístění na svitek. Jednou z nejužitečnějších funkcí Stellar.js je posunutí.
Všechny prvky se vrátí do své původní polohy, když se jejich ofsetový okraj setká s okrajem obrazovky - plus nebo mínus vlastní volitelný posun. To vám umožní vytvořit složité paralaxové vzory velmi snadno. (Hvězdná dokumentace)
O:
Hlavní stránka: //markdalgleish.com/projects/stellar.js/
Vytvořil: Mark Dalgeish
Instalace: Stáhnout z Githubu
6. multiScroll.js
Tento plugin je vytvořen stejným vývojářem (alvarotrigo), který vytvořil plugin pagePiling.js. Co vícenásobný posun v podstatě dělá, je to, že vám umožní vytvořit efekt, kdy se každá sekce stránky načte ve dvou rozdělených částech, které se posunou na místo jako stránka načte. Podívejte se na domovskou stránku a zjistěte, jak to vypadá ve vašem prohlížeči. multiScroll.js umožňuje nastavit rychlost posouvání, uvolnění, možnost posouvání klávesnice a mnoho dalších vlastností, takže můžete efekt přizpůsobit přesně tak, jak potřebujete.
O:
Hlavní stránka: //alvarotrigo.com/multiScroll/
Vytvořil: alvarotrigo
Instalace: Stáhnout z Githubu
7. ScrollMe
ScrollMe je plugin pro přidání jednoduchých efektů paralaxového posuvu na vaši stránku. Je možné škálovat, otáčet, překládat a měnit neprůhlednost prvků na stránce při posouvání dolů. ScrollMe nevyžaduje žádný Javascript a stačí pouze znalost CSS. Přidáním třídy „animateme“ a požadovaných datových atributů můžete animovat libovolný prvek HTML. ScrollMe se nejlépe používá pro přidání CSS efektů. Je lehký a všechny animace jsou hladké, pokud je používáte s mírou.
O:
Hlavní stránka: //scrollme.nckprsn.com/
Vytvořil: Nick Pearson
Instalace: Stáhnout z Githubu
8. Parallax Scroll
Parallax Scroll je snadno použitelný plugin jQuery, který vám umožní vytvořit efekt paralaxového obrazu, který naleznete na stránkách jako Spotify. Je to docela jednoduché použití - stačí zadat požadované CSS třídy pro držitele obrazu. Spíše než používat Chcete-li použít tento plugin, musíte použít prvky, které mají specifikovaný obrázek na pozadí (pomocí vlastnosti "background-image" CSS. Prvky, které budou reagovat, můžete provádět pomocí dotazů CSS @media.
O:
Hlavní stránka: //parallax-scroll.aenism.com/
Vytvořil: Aen
Instalace: Stáhnout z Githubu
9. Jarallax
Jarallax je knihovna CSS a Javascript, která se specializuje na efekty posouvání paralaxy. Jarallax je konfigurován pomocí Javascriptu (No jQuery, jen čistá vanilka JS). Podporuje vyhlazené rolování, uvolňování a animaci paralaxy. Jarallax je podporován většinou prohlížečů, napříč platformami. Webové stránky Jarallax mají výbornou dokumentaci, jak přizpůsobit Jarallax vašim potřebám. Jarallax má také video tutoriály ukazující, jak nastavit Jarallax pro vaše webové stránky a jak začít.
O:
Hlavní stránka: //www.jarallax.com/
Vytvořil: Jarallax
Instalace: Stáhnout z webových stránek Jarallax
10. Superscrollorama
Superscrollorama je plugin založený na jQuery, který podporuje rolování animací. To je poháněno TweenMax a Greensock Tweening Engine, který zvyšuje výkon animace a plynulost. Superscrollorama animace jsou volány přes jQuery, a vy můžete používat většinu TweenMax.js funkcí také. Tyto animace bohužel nejsou plně podporovány mobilními zařízeními (protože zařízení s dotykovou obrazovkou zvládají posouvání jiným způsobem). Pomocí metody setScrollContainerOffset však lze na mobilní zařízení přistupovat k efektům Superscrollorama.
Zde je kód tohoto postupu:
.setScrollContainerOffset(x, y)
(x: posunutí x posuvníku, y: posunutí x posuvníku)
O:
Hlavní stránka: //johnpolacek.github.io/superscrollorama/
Vytvořil: johnpolacek
Instalace: Stáhnout z Githubu
Viz také: 10 nejlepších statických stránek generátory
