Compatibilità:
WebSite X5 Evo e Pro

Vuoi creare una fascia in cui l’immagine di sfondo si muove durante lo scroll con un ritmo diverso rispetto ai contenuti in primo piano?


Con l’effetto parallasse puoi dare maggiore profondità alla Pagina e mettere in evidenza una Sezione durante la navigazione. In WebSite X5 puoi applicare l’effetto allo sfondo di una Sezione e scegliere tra Parallasse, Parallasse inverso e Parallasse fisso.


Cos'è e perché usare il parallasse?

L’effetto parallasse sfrutta il movimento differente dello sfondo e dei contenuti in primo piano per creare una sensazione di profondità durante lo scroll.


In WebSite X5 puoi scegliere fra tre tipi di effetto:

  • Parallasse: l’immagine di sfondo scorre nella stessa direzione dei contenuti in primo piano, ma con un movimento differente;
  • Parallasse inverso: l’immagine di sfondo scorre nella direzione opposta rispetto ai contenuti;
  • Parallasse fisso: lo sfondo appare fermo mentre i contenuti scorrono sopra di esso.


Puoi inoltre regolare la Profondità, ovvero la distanza percepita tra lo sfondo e i contenuti in primo piano: modificando questo valore puoi rendere l’effetto più o meno evidente.



Come scegliere l’immagine di sfondo

Per rendere percepibile il movimento dell’effetto parallasse, è 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.


Verifica anche che l’immagine abbia una qualità sufficiente per essere visualizzata nelle dimensioni previste senza perdere definizione.



Come impostare l’effetto parallasse 

Per applicare il parallasse allo sfondo di una Sezione devi procedere in questo modo:

  • Vai al Passo 4 - Pagine e apri la pagina su cui vuoi lavorare.
  • Assicurati che i contenuti interessati siano organizzati nella Sezione alla quale vuoi applicare l’effetto.
  • Clicca sul pulsante Stile sezioni.
  • Seleziona la Sezione che vuoi personalizzare.
  • Nel menu Sfondo, seleziona Immagine.
  • Importa l’immagine che vuoi utilizzare e definiscine le impostazioni.
  • Clicca sul pulsante Parallasse.
  • Nella finestra richiamata, scegli l’effetto che vuoi utilizzare fra:
    • Parallasse;
    • Parallasse inverso;
    • Parallasse fisso.
  • Imposta la Profondità per regolare l’intensità dell’effetto. 
  • Conferma le impostazioni.


#tip - L’effetto parallasse si basa sul movimento dello sfondo e non può essere percepito utilizzando uno sfondo uniforme in tinta unita.    


Come estendere lo sfondo a tutta larghezza

L’effetto parallasse non richiede necessariamente che la fascia occupi tutta la larghezza della finestra del Browser.


Se, però, vuoi ottenere questo risultato, nella finestra Stile sezioni attiva anche Estendi alla larghezza della finestra del Browser.


In questo modo lo sfondo della Sezione, compreso l’effetto parallasse, viene esteso fino ai bordi della finestra, mentre gli Oggetti continuano a essere organizzati secondo la struttura della Griglia di impaginazione.


#tip - Per maggiori informazioni, vedi Come creare una fascia a tutta larghezza?


Accessibilità

Per rendere accessibili le pagine del tuo sito, valuta se prevedere un testo alternativo per le immagini utilizzate.


Puoi impostare un’immagine come decorativa oppure inserire un ALT text attraverso il pulsante disponibile nel campo in cui importi il file.


#tip - Per maggiori informazioni, vedi Come scrivere il testo alternativo per i contenuti non testuali delle pagine.


Suggerimenti pratici

Per ottenere un buon risultato:

  • scegli immagini sufficientemente grandi e di buona qualità;
  • regola la Profondità in modo che il movimento sia percepibile senza risultare eccessivo;
  • evita di applicare il parallasse a troppe Sezioni della stessa Pagina;
  • verifica che testi e altri contenuti rimangano ben leggibili sullo sfondo;
  • controlla sempre il risultato in Anteprima e a diverse dimensioni della finestra del Browser.


#tip - Alternative. Se non vuoi applicare il parallasse allo sfondo di una Sezione ma a una singola immagine inserita nella Pagina, prova l'Oggetto Opzionale Parallax Image.