Paralaksno pomikanje je bilo enostavno z StickyStack.js

Učinki paralakse hitro vzemite pozornost. Ti učinki ohranjanje nekaterih ozadij med pomikanjem po strani. Na mnogih spletnih mestih in WordPress temah boste našli pomikanje z paralakso in velik del sodobnega spletnega oblikovanja.

Prav tako lahko zgradite a edinstven slog paralakse uporabljati StickyStack.js vključiti. To je zgrajena na jQuery in obdrži vsak del glavne strani na vrhu, ko se pomaknete navzdol.

To ustvari iluzijo večplastne spletne strani kjer je vsaka stran “nizov” na drugo. To je res kul in precej enostavno nastavite sami.

Čeprav je nastavitev precej enostavna, zahteva razumevanje razvoja frontendov.

Najprej morate ustvarite posamezne dele strani v glavni posodi. Tako boste imeli vse, kar je zajeto v HTML, tako da lahko ciljate na vse s funkcijo StickyStack jQuery.

Prav tako prihaja z nekaj možnostmi, kjer lahko prilagodite starševski vsebnik, elemente, ki naj bi se zlagali, in možno box shadow če ti je všeč ta učinek.

Tukaj je a vzorčni del kode s strani GitHub:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', stackingElement: 'section', boxShadow: '0-3px 20px rgba (0, 0, 0, 0,25)' ); 

Čeprav to ni bilo posodobljeno v približno dveh letih, je še vedno zelo zanesljiv vtičnik. To delal v vseh brskalnikih, ki sem jih testiral (Chrome, Safari in Firefox) z podpora za vse različice jQuery.

Poleg tega je minirana datoteka samo 2 KB kar je primerna velikost za plugin.

Če želite izvedeti več, obiščite glavni repo in si oglejte, kaj lahko ponudi StickyStack. Mislim, da najbolje deluje enostranske spletne strani ali ciljne strani z velikim polnim zaslonom.

Lahko si ogledate tudi a živi demo na CodePen če želite videti, kako to izgleda na spletnem mestu v živo.