Parallax Scrolling gjorde det enkelt med StickyStack.js

Parallax effekter grip oppmerksomheten fort. Disse effektene holde visse bakgrunner i sikte mens du ruller nedover siden. Du finner parallaxrulling på mange nettsteder og WordPress-temaer, og de er en stor del av moderne webdesign.

Du kan også bygge en unik parallax stil bruker StickyStack.js plugg inn. Det er bygget på jQuery og holder hver hovedside seksjon klistret til toppen mens du ruller nedover.

Dette skaper illusjon av et lagdelt nettsted hvor hver side “stabler” på toppen av den andre. Det er veldig kult og ganske enkelt å sette opp på egen hånd.

Selv om det er ganske enkelt å sette opp, krever det litt forståelse av frontendutviklingen.

Du må først lag individuelle sidestykker inne i hovedbeholderen. På denne måten har du alt vedlagt i HTML-koden, slik at du kan målrette alt med StickyStack jQuery-funksjonen.

Det kommer også med noen få muligheter hvor du kan tilpasse foreldrebeholder, de elementer som skal stable, og en mulig boks skygge hvis du liker den effekten.

Her er en prøvebit av kode fra GitHub-siden:

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

Selv om dette ikke har blitt oppdatert om to år, er det fortsatt et veldig pålitelig plugin. Den jobbet i alle nettleserne jeg testet (Chrome, Safari, og Firefox) med støtte for alle versjoner av jQuery.

I tillegg er den minifiserte filen kun 2KB som er en anstendig størrelse for et plugin.

For å lære mer, besøk hovedrekorden og se hva StickyStack kan tilby. Jeg tror det fungerer best på enkeltsidede nettsteder eller destinasjonssider med store fullskjermbakgrunner.

Du kan også sjekke ut en live demo på CodePen hvis du vil se hvordan dette ser ut på et levende nettsted.