Parallax Scrolling Made Easy cu StickyStack.js

Efecte parallaxice atrage atenția rapid. Aceste efecte să păstreze anumite medii în vedere în timp ce defilați pagina. Veți găsi scrolling parallax pe multe site-uri web și teme WordPress și ele sunt o mare parte din designul web modern.

Puteți construi, de asemenea, o un stil paralaxant unic folosind StickyStack.js conecteaza. este construit pe jQuery și păstrează fiecare secțiune a paginii principale lipită în partea de sus pe măsură ce defilați în jos.

Aceasta creează iluzia unui site stratificat unde fiecare pagină “stive” deasupra celuilalt. Este foarte cool și destul de ușor de configurat pe cont propriu.

În timp ce este destul de ușor de configurat, necesită o înțelegere a dezvoltării frontend.

Trebuie mai întâi creați secțiuni individuale de pagini în interiorul containerului principal. În felul ăsta o vei avea totul inclus în HTML, astfel încât să puteți orienta totul cu funcția jQuery StickyStack.

De asemenea, vine cu câteva opțiuni în care puteți personaliza părinte container, elemente care ar trebui să stivuiască, și un posibil box umbra dacă vă place acest efect.

Iată a bit exemplu de cod de pe pagina GitHub:

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

În timp ce acest lucru nu a fost actualizat în aproximativ doi ani, este încă un plugin foarte sigur. Aceasta a lucrat în toate browserele testate (Chrome, Safari și Firefox) cu suport pentru toate versiunile de jQuery.

În plus, fișierul miniaturat este numai 2KB care este o dimensiune decentă pentru un plugin.

Pentru a afla mai multe, vizitați repo-ul principal și vedeți ce poate oferi StickyStack. Cred că funcționează cel mai bine site-uri web cu o singură pagină sau pagini de destinație cu fundaluri mari pe ecran complet.

Puteți, de asemenea, verifica a live demo pe CodePen dacă doriți să vedeți cum arată acest lucru pe un site live.