10 nejlepších modulů pro posouvání parallaxu

Dlouhé rolovací weby se staly skutečně běžným trendem webového designu. Jedním z nejchladnějších podtypů tohoto jsou paralaxy rolovací stránky, kde se obrázky pohybují, aby se uvolnil efekt paralaxy. Když uživatel posouvá stránku dolů, animace se spouštějí a celkově dává jakémukoli webu nový vzhled a dojem, pokud je implementován správně.

Vytvoření paralaxy rolovací stránky je často únavné, protože vyžaduje důkladnou znalost CSS, Javascriptu a dobrý webový design, aby se stáhla. Zde je seznam Nejlepší zásuvné moduly pro posouvání parallaxu což vám nejen usnadňuje vytváření rolovacích webů s paralaxou, ale také dobře vybavenou knihovnu efektů paralaxy, takže pro vás bude snazší a rychlejší vytvořit dobře vypadající webovou stránku.

ODMÍTNUTÍ PODMÍNKY: Než začnete, uvědomte si, že k použití těchto pluginů je nutná určitá znalost webových technologií (HTML / CSS / Javascript). Většina uvedených modulů plug-in využívá jquery, proto může být zapotřebí i znalost Jquery.

Parallaxové rolovací pluginy

1. ScrollMagic

ScrollMagic je jedním z nejpopulárnějších a na funkce bohatých doplňků jQuery. Je to javascriptová knihovna, která vám umožňuje vytvářet zdánlivě magické efekty posouvání. Pomocí ScrollMagic můžete animovat na základě pozice posunu. To znamená, že můžete při procházení opravit, přesunout nebo animovat prvky HTML po libovolnou dobu trvání a také snadno přidat efekty paralaxy na svůj web. Je vysoce přizpůsobitelný a je také lehký (6kb při gzipování). Mezi další zásuvné moduly pro parallační posouvání má Scroll Magic nejlepší dokumentaci a externí zdroje. Je také dokonale kompatibilní s mobilem.

ScrollMagic obsahuje mnoho příkladů. Podívejte se na inspiraci a poučení o používání této knihovny.

O:

Domovská stránka: http://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, bez zapojení jQuery. Jde v podstatě o „Scroll Magic zjednodušené pro CSS“. Chcete-li použít skrollr, nemusíte znát Javascript ani jQuery. Stačí HTML a CSS. skrollr používá datové atributy k animaci jakéhokoli prvku HTML, který chcete. Jednou z hlavních nevýhod skrollru je to, že animace fungují pouze během posouvání stránky. Jinak budou všechny efekty pozastaveny. skrollr vám umožní animovat všechny vlastnosti CSS vašich prvků HTML.

O:

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

Vytvořil: Prinzhorn

Instalace: Stáhnout z Githubu

3. pagePiling.js

Page Piling je jQuery plugin, který vám umožní vytvořit váš web do různých sekcí, které se hromadí nad sebou. Po posouvání nebo přístupem k URL se každá sekce odhalí v úhledné animaci posuvného. pagePiling.js je kompatibilní se všemi platformami - stolními, tabletovými a mobilními - a pracuje s většinou prohlížečů. Elegantně degraduje na starších prohlížečích, které nepodporují jeho animace (např. IE 7). Chcete-li použít plugin, musíte do svého HTML zahrnout CSS a soubor Javascript. pagePiling.js je inicializován (document) .ready function:

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

Další pokročilé inicializace najdete v README.md.

O:

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

Vytvořil: alvarotrigo

Instalace: Stáhnout z Githubu

4. Alton

Alton je zásuvný modul jQuery „scroll-jacking to us“. Posunování znamená, že nativní posouvání vašeho prohlížeče je deaktivováno ve prospěch cíleného posouvání, které se po spuštění (kolečkem myši nebo touchpadem) přesune na další vertikální bod na obrazovce nebo na horní část dalšího kontejneru.

Alton umožňuje tři různé druhy funkcí, které se nazývají „hrdina“, „kniha“ a „standardní“. Standard umožňuje použít celé rolování stránek, s každou částí 100% výšky. Posun přenese další sekci nebo předchozí sekci. Služba Bookend umožňuje vytvořit zážitek typu bookend, zatímco Hero vám umožňuje posouvat jack pouze v sekci „Hero“, přičemž zbytek stránky má (znovu povoleno) nativní rolování.

O:

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

Vytvořil: papírový list

Instalace: Stáhnout z Githubu

5. Stellar.js

Hvězdný je plugin jQuery, přes který můžete snadno přidat efekty posouvá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.

Hvězdné dokonce umožňuje mít paralaxy pozadí, což jsou pozadí, která se přemístí na svitek. Jednou z nejužitečnějších funkcí Stellar.js jsou kompenzace.

Všechny prvky se vrátí do svého původního umístění, když se jejich rodičovský ofset setká s okrajem plus nebo mínus vlastní volitelný offset. To vám umožní snadno vytvořit složité vzory paralaxy. (Hvězdná dokumentace)

O:

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. To, co vícenásobné posouvání v podstatě dělá, je, že vám umožňuje vytvořit efekt, kdy se každá část stránky načte do dvou rozdělených částí, 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á v prohlížeči. multiScroll.js vám umožňuje nastavit rychlost rolování, uvolnění, možnost rolování pomocí klávesnice a mnoho dalších vlastností, takže si můžete efekt přizpůsobit přesně tak, jak potřebujete..

O:

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

Vytvořil: alvarotrigo

Instalace: Stáhnout z Githubu

7. ScrollMe

ScrollMe je plugin pro přidání jednoduchých efektů posouvání paralaxy na vaši stránku. Při rolová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 datových atributů můžete animovat jakýkoli prvek HTML. ScrollMe se nejlépe používá pro přidání efektů CSS. Je lehký a všechny animace jsou plynulé, pokud je používáte moderně.

O:

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

Vytvořil: Nick Pearson

Instalace: Stáhnout z Githubu

8. Posun parallaxu

Parallax Scroll je snadno použitelný plugin jQuery, který vám umožní vytvořit efekt posouvání obrazu paralaxe nalezený na webech, jako je Spotify. Použití je poměrně jednoduché - stačí zadat požadované třídy CSS pro držitele obrázků. Spíše než použití

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é rolovací funkce, uvolnění a paralaxy animace. Jarallax je podporován většinou prohlížečů napříč platformami. Web Jarallax obsahuje vynikající dokumentaci o tom, jak Jarallax přizpůsobit vašim potřebám. Jarallax má také videonávody, které ukazují, jak nastavit Jarallax pro váš web a jak začít.

O:

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

Vytvořil: Jarallax

Instalace: Stáhnout 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, který zvyšuje výkon animace a plynulost. Animace Superscrollorama se nazývají pomocí jQuery a můžete také používat většinu funkcí TweenMax.js. Mobilní animace bohužel nejsou plně podporována mobilními zařízeními (protože zařízení s dotykovou obrazovkou zpracovávají rolování jiným způsobem). Pomocí metody setScrollContainerOffset však lze k efektům Superscrollorama přistupovat na mobilních zařízeních.

Zde je kód, jak to provést:

.setScrollContainerOffset (x, y)

(x: ofset x scrollcontainer, y: x offset of scrollcontainer)

O:

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

Vytvořil: johnpolacek

Instalace: Stáhnout z Githubu

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