Parallax rolování snadno a rychle se StickyStack.js

Parallax účinky upoutat pozornost rychle. Tyto účinky udržet určité prostředí v pohledu při posouvání stránky dolů. Naleznete paralaxa rolování na mnoha webových stránkách a WordPress témata a jsou velkou součástí moderního web design.

Můžete také postavit jedinečný styl paralaxy za použití StickyStack.js zapojit. To je postavený na jQuery a udržuje každou část hlavní stránky nalepenou nahoře při posouvání dolů.

Tím se vytvoří iluze vrstvené webové stránky kde každá stránka “hromádky” na druhé straně. Je to opravdu cool a docela snadno nastavit na vlastní pěst.

I když je to velmi snadné nastavit, to vyžaduje určité pochopení vývoje frontend.

Musíte nejdřív vytvářet jednotlivé sekce stránek uvnitř hlavního kontejneru. Tímto způsobem budete mít vše v HTML, takže můžete cílit vše pomocí funkce StickyStack jQuery.

To také přichází s několika možnostmi, kde si můžete přizpůsobit rodičovský kontejner, prvky, které by měly stohovat, a možné box stín pokud se vám líbí tento efekt.

Tady je ukázkový bit kódu ze stránky GitHub:

 $. ); 

I když to nebylo aktualizováno asi za dva roky, je to stále velmi spolehlivý plugin. To pracoval ve všech prohlížečích, které jsem testoval (Chrome, Safari a Firefox) s podpora pro všechny verze jQuery.

A navíc, minifikovaný soubor je pouze 2KB což je slušná velikost pro plugin.

Chcete-li se dozvědět více, navštivte hlavní repo a uvidíte, co může StickyStack nabídnout. Myslím, že to funguje nejlépe stránek nebo vstupní stránky s velkým celoobrazovkovým pozadím.

Můžete se také podívat na živé demo na CodePen Pokud chcete vidět, jak to vypadá na živém webu.