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, Photogram 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 rimani nella sezione Generale e 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. Con uno sfondo colorato, però, non è possibile utilizzare il parallasse perché su una tinta uniforme e monocromatica non si percepisce lo spostamento dell'immagine in primo piano.    
  • Importa l’immagine da usare come sfondo e posizionala adeguatamente rispetto allo spazio che deve occupare. 
  • Clicca sul pulsante Estendi alla larghezza della finestra del Browser per far sì che la tua fascia occupi sempre tutto lo spazio disponibile in larghezza.
  • Clicca pulsante Parallasse e, nella finestra richiamata, 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.
  • Imposta la Profondità, ovvero la distanza tra i contenuti e lo sfondo.
  • Quando sei soddisfatto, conferma cliccando su Ok.  


#tip - Alternative. Se non vuoi creare una fascia orizzontale ma semplicemente applicare l'effetto parallasse a un'immagine singola, prova l'Oggetto Opzionale Parallax Image.