Pomicanje paralakse postalo jednostavno s StickyStack.js

Učinci paralakse brzo uhvatite pozornost. Ovi učinci zadržati određene pozadine u vidu dok pomičete stranicu. Na mnogim web-mjestima i WordPress temama pronaći ćete pomicanje paralakse i oni su veliki dio modernog web-dizajna.

Također možete izgraditi jedinstveni stil paralakse koristiti StickyStack.js uključiti. to je izgrađena na jQuery i drži svaki dio glavne stranice na vrhu dok se pomičete prema dolje.

To stvara iluzija slojevite web stranice gdje je svaka stranica “hrpe” na vrhu druge. To je stvarno kul i prilično jednostavan za postavljanje na svoju vlastitu.

Iako je vrlo jednostavno postaviti, zahtijeva određeno razumijevanje razvoja sučelja.

Prvo morate izradite pojedinačne odjeljke stranice unutar glavnog spremnika. Ovako ćete imati sve sadržano u HTML-u, tako da sve možete ciljati pomoću funkcije StickyStack jQuery.

Također dolazi s nekoliko opcija gdje možete prilagoditi roditeljski spremnik, elemente koji bi trebali slagati, i moguće kutija sjena ako vam se sviđa taj efekt.

Evo jednog uzorak bit koda sa stranice GitHub:

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

Iako to nije ažurirano za oko dvije godine, to je još uvijek vrlo pouzdan plugin. To radio je u svim preglednicima koje sam testirao (Chrome, Safari i Firefox) s podrška za sve verzije jQuery.

Plus, minificirana datoteka je samo 2 KB što je pristojna veličina za dodatak.

Da biste saznali više, posjetite glavni repo i pogledajte što vam StickyStack može ponuditi. Mislim da najbolje radi web stranice s jednom stranicom ili odredišne ​​stranice s velikim pozadinama na cijelom zaslonu.

Također možete provjeriti a live demo na CodePen ako želite vidjeti kako to izgleda na web-lokaciji uživo.