Effetto parallasse su più elementi all’interno della stessa pagina compatibile con mobile

CodeTutorial | 27 Febbraio 2019 di Giovanni Invernizzi
 - Paperplane

L’effetto parallasse non è particolarmente complesso da realizzare: facendo una ricerca su Google si trovano numerosi tutorial ben fatti.

In questo articolo andremo a vedere come realizzare un effetto parallasse su più elementi all’interno della stessa pagina che funziona anche da mobile.

La maggior parte dei tutorial esistenti si basa su un mix di CSS e JavaScript; il problema legato a questa tecnica è che la proprietà CSS background-attachment: fixed non è supportata dalla versione mobile di tutti i principali browser ed è quindi impossibile declinare l’effetto parallasse su smartphone e tablet.

Per ovviare a questo problema possiamo strutturare gli elementi che vogliamo utilizzare nella pagina con l’effetto parallasse in modo cha abbiano un contenitore con posizione relativa e al loro interno un elemento con posizione fissa e un’immagine di sfondo e gestire poi tramite JavaScript l’effetto parallasse.

Di seguito una breve analisi del codice nessario per mettere assieme il tutto. Vi avviso che potrebbe essere scritto mooolto meglio e che una funzione l’ho rubata (ma non mi ricordo dove).

Se volete saltare questa frittura di informazioni a fine articolo trovate il link al CodePen.

La struttura html:

Ogni elemento con funzione parallasse deve essere preceduto e seguito da un blocco con un colore di sfondo e uno z-index superiore al contenitore del parallasse. Questa gestione degli z-index è necessaria perchè ogni elemento con classe “fix-box” ha posizione fissa e quindi l’ultimo presente nella pagina coprirebbe tutti gli altri.

CSS elementi prima e dopo il parallasse:

Lato CSS non c’è nulla di particolare; l’unica cosa importante è che se nella pagina è presente più di un elemento con funzione parallasse questi stessi elementi devono essere separati da un blocco che sia alto almeno quanto l’intero viewport, altrimenti l’effetto parallasse non funzionerà.

CSS contenitore parallasse:

Potete stabilire liberamente l’altezza del contenitore del parallasse, ovvero della maschera che renderà visibile l’immagine con effetto parallasse. È importante impostare l’opacità a 0 per poter poi gestire visibilità e z-index con lo script.

CSS immagine parallasse:

Il box che conterrà l’effetto deve avere posizione fissa ed essere largo e alto quanto il viewport.

JavaScript / jQuery:

La prima cosa necessaria è una funzione che permette di verificare se un determinato elemento si trova all’interno del viewport man mano che scrolliamo la pagina.
Oltre a questa funzione per ogni elemento “parallax-box” presente nella pagina devo verificare le sue dimensioni. Poi sfruttando la funzione dichiarata in precedenza se l’elemento si trova all’interno del viewport determino:

  • il suo posizionamento in base allo scroll per ottenre l’effetto parallasse;
  • il suo z-index;

altrimenti se si trova fuori dal viewport imposto 1 come z-index.
Subito dopo richiamo la funzione nel caso in cui venga fatto un refresh della pagina quando è già stata scrollata.

Qui trovate un un magnifico CodePen(is) di esempio!

Qui invece un’applicazione pratica.

Conclusioni

Se volete vedere come funziona trovate un esempio qui. Questo tutorial dal punto di vista del codice non è sicuramente la cosa più elegante e raffinata che vedrete in vista vostra, però funziona.
Oltre al codice tenete conto di questi punti se decidete di usare l’effetto parallasse sul vostro sito:

  1. ogni immagine con effetto parallasse per avere una buona resa deve essere grande quanto lo schermo: questo aumenta i tempi di caricamento ed incide quindi negativamente sulle perfromance;
  2. lo script che gestisce l’effetto parallasse manipola il comportamento predefinito della pagina: su mobile potrebbe causare qualche problema di prestazioni sui modelli di smartphone più datati. Per questo motivo ho inserito la condizione “if ( winWidth >= 1)”: verificate che il vostro target non usi telefono prodotti più di 5 anni fa per essere sicuri di non avere problemi.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Se l'hai trovato interessante condividi con questi obsoleti pulsanti
CI SONO ALTRI ARTICOLI, CHE FAI NON LI LEGGI?

Vuoi saperne di più? Contattaci!