Scorrimento parallasse reso facile con StickyStack.js

Effetti di parallasse attira l'attenzione velocemente. Questi effetti mantenere alcuni sfondi in vista mentre scorri verso il basso la pagina. Troverete lo scrolling di parallasse su molti siti Web e temi WordPress e sono una parte importante del moderno web design.

Puoi anche costruire un stile unico di parallasse usando il StickyStack.js collegare. Suo costruito su jQuery e mantiene ciascuna sezione della pagina principale attaccata verso l'alto mentre scorri verso il basso.

Questo crea il illusione di un sito Web a più livelli dove ogni pagina “pile” sopra l'altro. È davvero bello e facile da configurare da solo.

Sebbene sia abbastanza facile da configurare, richiede una certa comprensione dello sviluppo del frontend.

Devi prima crea sezioni di pagina individuali all'interno del contenitore principale. In questo modo avrai tutto racchiuso nell'HTML, in modo da poter indirizzare tutto con la funzione jQuery di StickyStack.

Inoltre è dotato di alcune opzioni in cui è possibile personalizzare il contenitore genitore, il elementi che dovrebbero impilare, e un possibile scatola ombra se ti piace quell'effetto.

Ecco un esempio di codice dalla pagina GitHub:

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

Anche se questo non è stato aggiornato in circa due anni, è ancora un plugin molto affidabile. esso ha funzionato in tutti i browser che ho provato (Chrome, Safari e Firefox) con supporto per tutte le versioni di jQuery.

Inoltre, il file minificato è solo 2 KB che è una dimensione decente per un plugin.

Per saperne di più, visita il repository principale e scopri cosa StickyStack può offrire. Penso che funzioni meglio siti Web a pagina singola o pagine di destinazione con grandi sfondi a schermo intero.

Puoi anche controllare a live demo su CodePen se vuoi vedere come appare su un sito live.