Parallax Scrolling gjorde det enkelt med StickyStack.js

Parallax effekter ta snabb uppmärksamhet. Dessa effekter behålla vissa bakgrunder i sikte medan du rullar ner sidan. Du hittar parallax rullning på många webbplatser och WordPress teman och de är en stor del av modern webbdesign.

Du kan också bygga en unik parallax stil använda StickyStack.js plugin. Dess byggt på jQuery och håller varje huvudsida sektion klibbigt upptill när du rullar ner.

Detta skapar illusion av en lagrad webbplats var varje sida “stackar” ovanpå varandra. Det är väldigt coolt och ganska enkelt att sätta upp på egen hand.

Även om det är ganska lätt att installera, krävs det viss förståelse för frontend-utveckling.

Du behöver först skapa enskilda sidavsnitt inuti huvudbehållaren. På så sätt får du allt bifogat i HTML, så du kan rikta in allt med StickyStack jQuery-funktionen.

Det kommer också med några alternativ där du kan anpassa förälderbehållare, de element som ska stapla, och en möjlig boxskugga om du gillar den effekten.

Här är en provbit kod från GitHub-sidan:

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

Även om detta inte har uppdaterats på ungefär två år är det fortfarande en mycket pålitlig plugin. Det arbetade i alla webbläsare jag testade (Chrome, Safari, och Firefox) med stöd för alla versioner av jQuery.

Dessutom är den minifierade filen endast 2KB vilket är en anständig storlek för ett plugin.

För att lära dig mer, besök huvudrepo och se vad StickyStack kan erbjuda. Jag tycker att det fungerar bäst webbsidor på en sida eller målsidor med stora fullskärmsbakgrund.

Du kan också kolla in en lev demo på CodePen om du vill se hur det ser ut på en levande webbplats.