Parallax Scrolling blev nemt med StickyStack.js

Parallax effekter tag hurtigt opmærksomhed. Disse virkninger bevare visse baggrunde i lyset mens du ruller ned på siden. Du finder parallaxrulle på mange websites og WordPress-temaer, og de er en stor del af moderne webdesign.

Du kan også opbygge en unik parallax stil bruger StickyStack.js plugin. Det er bygget på jQuery og holder hver hovedside sektion fastgjort til toppen, mens du ruller ned.

Dette skaber illusion af et lagdelt websted hvor hver side “stakke” oven på den anden. Det er virkelig køligt og ret nemt at konfigurere på egen hånd.

Selvom det er ret nemt at konfigurere, kræver det en vis forståelse af frontend-udvikling.

Du skal først Opret individuelle sideafsnit inde i hovedbeholderen. På den måde har du det alt vedlagt i HTML'en, så du kan målrette alt sammen med StickyStack jQuery-funktionen.

Det kommer også med et par muligheder, hvor du kan tilpasse forældrebeholder, det elementer, der skal stable, og en mulig boks skygge hvis du kan lide den effekt.

Her er en prøve bit 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 er opdateret om cirka to år, er det stadig et meget pålideligt plugin. Det arbejdede i alle de browsere jeg testede (Chrome, Safari, og Firefox) med støtte til alle versioner af jQuery.

Plus den minificerede fil er kun 2KB hvilket er en anstændig størrelse for et plugin.

For at lære mere, besøg de vigtigste repo og se, hvad StickyStack kan tilbyde. Jeg synes det virker bedst enkeltsidens websteder eller landingssider med store fuldskærm baggrunde.

Du kan også tjekke en live demo på CodePen hvis du vil se, hvordan det ser ud på et levende websted.