Compatibilità:
Effetto Parallasse: WebSite X5 Evo e Pro dalla versione 13
Parallasse Inverso e Fisso: WebSite X5 Evo e Pro dalla versione 14


Sicuramente navigando sul Web ti sarai imbattuto in pagine che presentano fasce con grandi immagini di sfondo che, allo scroll, si muovono con una velocità diversa rispetto ai contenuti in primo piano. Queste pagine sfruttano l’effetto parallasse. Noi lo abbiamo usato in diversi nostri template come, per esempio, MyRoseMary o Camping - SilverCamp. Ora lo puoi usare anche tu per rendere speciali i tuoi progetti. 


Creare una fascia sfruttando l’effetto parallasse è più facile di quel che pensi. Per imparare a farlo guarda questo video o, se preferisci, prosegui con la lettura.



Cos'è e perché usare il parallasse?

Il parallasse è una tecnica visuale che, attraverso il movimento di immagini a diverse velocità e prospettive, conferisce profondità e ricchezza al design di una pagina web, creando un'illusione 3D. Questo effetto rende lo scrolling delle pagine un'esperienza più coinvolgente per il visitatore.

In altre parole, nel parallasse è come se la pagina fosse costruita su 2 livelli: il livello con lo sfondo e il livello con i contenuti in primo piano. Per chi guarda la pagina, l’effetto finale varia, anche sensibilmente, a seconda di come si combinano i seguenti parametri:

  • la direzione di scorrimento: le immagini sullo sfondo, a differenza dei contenuti in primo piano, possono scorrere anche verso l’alto;
  • la velocità di scorrimento: sfondo e contenuti in primo piano possono scorrere con velocità diverse;
  • la profondità, ovvero la “distanza” tra i livello di sfondo e il livello in primo piano. Aumentando la profondità, diventa più evidente l’eventuale differenza nella velocità di movimento.


Grazie al parallasse, dunque, puoi dare alle tue pagine un aspetto unico. Usandolo al meglio, troverai nel parallasse uno strumento utile per dare importanza ai contenuti più rilevanti, sviluppare la tua narrazione e condurre i visitatori verso la CTA (Call To Action, ovvero l’azione che vuoi che i visitatori compiano).


Come si preparano le immagini?

Perché l’effetto parallasse funzioni correttamente e i visitatori percepiscano la differenza nella velocità con cui scorrono le immagini interessate rispetto al resto della pagina, è necessario che le immagini impostate come sfondo abbiano un’altezza maggiore a quella della fascia in cui saranno inserite. In linea generale, maggiore è la differenza tra l’altezza dell’immagine di sfondo e l’altezza della fascia, più evidente sarà l’effetto parallasse.


Come si imposta il parallasse? 

Ora che è tutto chiaro e hai pronte le immagini, per impostare l’effetto parallasse devi procedere in questo modo:

  • Apri la pagina su cui ti interessa lavorare al Passo 4 - Creazione della Pagina.
  • Clicca sul pulsante  Stile Righe presente nella Barra degli strumenti.
  • Nella finestra Stile delle Righe clicca sulla riga su cui vuoi lavorare in modo da evidenziarla. 
  • Clicca sul menu Sfondo e seleziona la voce Immagine.


#tip - Formati. Come Sfondo puoi utilizzare un colore, una sfumatura, un’immagine singola, un elenco di immagini, un video o una mappa. 

  • Importa l’immagine da usare come sfondo e posizionala adeguatamente rispetto allo spazio che deve occupare. 
  • Attiva l’opzione Estendi alla larghezza della finestra del Browser per far sì che la tua fascia occupi sempre tutto lo spazio disponibile in larghezza.
  • Clicca sull'opzione Effetto e, a seconda del tipo di effetto che vuoi ottenere, seleziona:
    • Parallasse: l’immagine di sfondo scorre nella stessa direzione dei contenuti in primo piano; 
    • Parallasse inverso: l’immagine di sfondo scorre in direzione opposta rispetto ai contenuti in primo piano;
    • Parallasse fisso: l’immagine di sfondo scorre con la stessa velocità dei contenuti in primo piano e, di conseguenza, sembra rimanere ferma.