10 nejlepších pluginů pro rolování paralaxy

Weby s dlouhým posouváním se staly skutečně běžným trendem webového designu. Jedním z nejúžasnějších podtypů jsou paralaxové rolovací weby, kde se obrázky pohybují a vytvářejí paralaxový efekt. Jak se uživatel posouvá dolů po stránce, animace se spouštějí a celkově poskytuje nový vzhled a dojem na jakýkoli web, pokud je implementován správně.

Vytvoření stránky s rolováním paralaxy je často zdlouhavé, protože vyžaduje důkladnou znalost CSS, Javascript a dobrého webového designu. Zde je seznam Nejlepší posouvací pluginy Paralaxy které vám nejen usnadňují vytváření stránek s rolováním paralaxy, ale mají také dobře vybavenou knihovnu efektů paralaxy, takže vám bude snazší a rychlejší vytvořit dobře vypadající webovou stránku.

Zřeknutí se odpovědnosti: Než začnete, nezapomeňte, že pro použití těchto pluginů je nutná určitá znalost webových technologií (HTML / CSS / Javascript). Většina z uvedených pluginů využívá jquery, takže může být také zapotřebí znalost Jquery.

Paralaxové rolovací pluginy

1. ScrollMagic

ScrollMagic je jeden z nejpopulárnějších a na funkce bohatých jquery pluginů. Je to knihovna javascriptů, která vám umožňuje vytvářet zdánlivě magické rolovací efekty. Pomocí ScrollMagic můžete animovat na základě vaší polohy posouvání. To znamená, že můžete při posouvání opravovat, přesouvat nebo animovat prvky HTML, jakkoli chcete, a také snadno přidat paralaxové efekty na svůj web. Je vysoce přizpůsobitelný a je také lehký (6 kB při gzipování). Mezi dalšími posouvacími pluginy paralaxy má Scroll Magic nejlepší dokumentaci a externí zdroje. Je také dokonale kompatibilní s mobilními telefony.

ScrollMagic obsahuje mnoho příkladů. Vyzkoušejte je, abyste získali inspiraci a pokyny k používání této knihovny.

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

Vytvořil: Jan Paepke

Instalace:

1. CDN:

2. Stáhnout z Githubu

2. skrollr

skrollr je lehká čistá knihovna Javascript a CSS bez zapojení jQuery. Je to v podstatě „Scroll Magic zjednodušený pro CSS“. Abyste mohli používat skrollr, nemusíte znát Javascript ani jQuery. Stačí HTML a CSS. skrollr používá datové atributy k animaci libovolného prvku HTML, který chcete. Jednou z hlavních nevýhod skrollru je, že animace fungují pouze při rolování stránky. Jinak budou všechny efekty pozastaveny. skrollr umožňuje animovat všechny vlastnosti CSS vašich prvků HTML.

Domovská stránka: http://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 váš web do různých sekcí, které se hromadí nad sebou. Při posouvání nebo přístupu na adresu URL se každá sekce odhalí v úhledné klouzavé animaci. pagePiling.js je kompatibilní se všemi platformami - stolními, tabletovými i mobilními - a funguje s většinou prohlížečů. U starších prohlížečů, které nepodporují jeho animace (jako IE 7), se degraduje elegantně. Chcete-li použít plugin, musíte do svého HTML zahrnout soubor CSS a Javascript. pagePiling.js je inicializován funkcí (document) .ready:

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

Pokročilejší inicializace najdete v souboru README.md.

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

Vytvořil: alvarotrigo

Instalace: Stáhnout z Githubu

4. Alton

Alton je plugin jQuery „scroll-jacking to us“. Posuvné zvedání znamená, že nativní posouvání vašeho prohlížeče je deaktivováno ve prospěch cíleného posouvání, které vás při spuštění (kolečkem myši nebo touchpadem) přenese k dalšímu svislému bodu na obrazovce nebo k horní části dalšího kontejneru.

Alton umožňuje tři různé druhy funkcí, které se nazývají „Hero“, „Bookend“ a „Standard“. Standard umožňuje používat rolování na celou stránku, přičemž každá sekce má 100% výšku. Posouváním se zobrazí další část nebo předchozí část. Bookend vám umožní vytvořit zážitek typu bookend, zatímco Hero vám umožní posouvat jack pouze v sekci „Hero“, přičemž zbytek stránky bude mít (znovu povoleno) nativní rolování.

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

Vytvořil: paper-leaf

Instalace: Stáhnout z Githubu

5. Stellar.js

Stellar je plugin jQuery, jehož prostřednictvím můžete snadno přidávat efekty rolování paralaxy. Chcete-li spustit, musíte nejprve spustit funkci $ .stellar (). Nastavení animace pro jednotlivé prvky lze konfigurovat pomocí datových atributů na tomto prvku.

Stellar vám dokonce umožňuje mít pozadí paralaxy, což jsou pozadí, která se přemisťují na svitku. Jednou z nejužitečnějších funkcí souboru Stellar.js jsou kompenzace.

Všechny prvky se vrátí do původního umístění, když se jejich offsetový rodič setká s okrajem obrazovky - plus nebo minus váš vlastní volitelný offset. Díky tomu můžete velmi snadno vytvářet složité vzory paralaxy. (Hvězdná dokumentace)

Domovská stránka: http://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 multi scroll v zásadě dělá, je to, že vám umožní vytvořit efekt, kdy se každá část stránky načte ve dvou rozdělených částech, které se při načítání stránky zasunou na místo. Podívejte se na domovskou stránku a podívejte se, jak to vypadá ve vašem prohlížeči. multiScroll.js vám umožní nastavit rychlost posouvání, náběh, možnost posouvání pomocí klávesnice a mnoho dalších vlastností, takže můžete efekt přizpůsobit přesně tak, jak to potřebujete.

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

Vytvořil: alvarotrigo

Instalace: Stáhnout z Githubu

7. ScrollMe

ScrollMe je plugin pro přidávání jednoduchých paralaxních efektů posouvání na vaši stránku. Při posouvání dolů může měnit měřítko, otáčet, překládat a měnit neprůhlednost prvků na stránce. ScrollMe nevyžaduje žádný Javascript a stačí pouze znalost CSS. Přidáním třídy „animateme“ a požadovaných atributů dat můžete animovat jakýkoli prvek HTML. ScrollMe se nejlépe používá pro přidávání efektů CSS. Je lehký a všechny animace jsou plynulé, pokud je používáte s mírou.

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

Vytvořil: Nick Pearson

Instalace: Stáhnout z Githubu

8. Posun paralaxy

Parallax Scroll je snadno použitelný plugin jQuery, který vám umožní vytvořit efekt posouvání obrazu paralaxy, který se nachází na webech, jako je Spotify. Používání je poměrně jednoduché - stačí zadat požadované třídy CSS pro držitele obrázků. Spíše než používat tagy, pro použití tohoto pluginu musíte použít prvky, které mají specifikovaný obrázek pozadí (pomocí vlastnosti CSS „background-image“. Elementy můžete nastavit tak, aby reagovaly pomocí dotazů CSS @media.

Domovská stránka: http://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 rolování paralaxy. Jarallax je konfigurován pomocí Javascript (No jQuery, jen čistá vanilková JS). Podporuje funkce plynulého posouvání, náběh a paralaxovou animaci. Jarallax je podporován většinou prohlížečů napříč platformami. Webové stránky Jarallax mají vynikající dokumentaci, jak přizpůsobit Jarallax vašim potřebám. Jarallax má také videonávody, které ukazují, jak nastavit Jarallax pro váš web a jak začít.

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

Vytvořil: Jarallax

Instalace: Stažení z webu Jarallax

10. Superscrollorama

Superscrollorama je plugin založený na jQuery, který podporuje posouvání animací. Je poháněn TweenMax a Greensock Tweening Engine, což zvyšuje výkon animace a plynulost. Animace Superscrollorama se nazývají prostřednictvím jQuery a můžete také použít většinu funkcí TweenMax.js. Bohužel tyto animace mobilní zařízení plně nepodporují (protože zařízení s dotykovou obrazovkou zvládají posouvání jiným způsobem). Pomocí metody setScrollContainerOffset však lze efekty Superscrollorama zpřístupnit na mobilních zařízeních.

Zde je kód:

.setScrollContainerOffset (x, y)

(x: posun x posuvného kontejneru, y: posun x posuvného kontejneru)

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

Vytvořil: johnpolacek

Instalace: Stáhnout z Githubu

VIZ TÉŽ: 10 nejlepších generátorů statických stránek