Guida definitiva all'uso del parallasse con Divi

Cercare di trovare l'immagine della giusta dimensione per la parallasse può essere un po' frustrante. L'immagine può sembrare ottima come immagine di sfondo standard, ma non appena selezioni "Usa effetto parallasse", l'immagine viene esplosa e nulla sembra a posto. Per evitare questo aggravamento in futuro, è necessario capire cos'è la parallasse e cosa sta succedendo all'immagine quando viene messa in modalità parallasse.

Oggi ho intenzione di approfondire il modo in cui la parallasse funziona con Divi. Spiegherò esattamente cosa succede quando usi i due diversi metodi di parallasse, quale dimensione dell'immagine è la migliore e aggiungerò anche alcuni hack css personalizzati per posizionare le tue immagini proprio come desideri.

Muoviamoci.

Cos'è la parallasse?

Per quanto riguarda il web design, parallasse è un termine usato per descrivere un effetto che dà la percezione della distanza e del movimento realistici usando una sorta di animazione bidimensionale. Ciò si ottiene modificando la velocità di scorrimento di diversi elementi su una pagina Web per creare l'illusione della distanza durante la visualizzazione di un punto fisso. La tecnica è in circolazione da un po' in luoghi diversi dal web. Ricordi Super Mario Brothers? Se hai mai giocato ai videogiochi negli anni '80 (Nintendo NES), la maggior parte dei giochi utilizzava questa tecnica per dare l'impressione di movimento utilizzando solo immagini 2D. Gli oggetti in primo piano si muovevano più velocemente degli alberi/montagne/nuvole sullo sfondo. Creando così un movimento più realistico.

Questo effetto è molto simile al metodo True Parallax in Divi. Tranne il movimento è verticale invece che orizzontale.

Capire come funziona il parallasse con Divi

Con Divi, Parallax è davvero facile da implementare su qualsiasi immagine di sfondo all'interno di qualsiasi sezione, riga, colonna o modulo. Tutto quello che devi fare è impostare l'opzione Effetto di parallasse su "S" e quindi selezionare il tuo metodo di parallasse (CSS o True Parallax).

Il metodo CSS

Il metodo CSS è uno dei due metodi che puoi scegliere per il tuo effetto di parallasse. Probabilmente puoi indovinare cosa sta succedendo solo testando questo metodo sul tuo sito. Viene definito Metodo CSS perché utilizza solo i CSS per creare l'effetto. Questo metodo utilizza i CSS per fissare l'immagine di sfondo in posizione mentre gli altri elementi sulla pagina scorrono normalmente. Ciò dà l'impressione che il contenuto si muova davanti all'immagine di sfondo.

Il vero metodo della parallasse

Il secondo metodo è chiamato True Parallax. Si chiama "True" probabilmente perché esemplifica l'idea convenzionale dell'effetto di parallasse. Questo metodo utilizza CSS e JavaScript per creare un movimento di scorrimento leggermente più lento rispetto agli altri elementi della pagina. Questa è una rappresentazione del movimento più realistica a causa della percezione della distanza che crea tra l'immagine in movimento lento sullo sfondo e gli elementi in movimento più veloce in primo piano.

Cosa succede quando il parallasse è abilitato in Divi?

Questo può essere frustrante se non capisci cosa sta succedendo dietro le quinte. Pertanto è utile sapere esattamente cosa sta succedendo all'immagine quando viene attivata la parallasse.

Cosa succede quando si seleziona il metodo CSS?

Quando CSS Parallax è selezionato, l'immagine viene racchiusa in un nuovo div con una posizione assoluta che copre l'intera dimensione della finestra del browser. Ecco le classi CSS e i frammenti di codice che lo fanno in Divi:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

Poiché la dimensione dello sfondo è impostata su "copri" con un'altezza e una larghezza del 100%, l'immagine "coprirà" sempre ogni parte del suo contenitore. In questo caso, il contenitore è la finestra del browser. Ciò significa che parti dell'immagine verranno nascoste dietro altre sezioni di contenuto poiché l'immagine di sfondo continuerà sempre ad espandersi e contrarsi insieme alle dimensioni della finestra del browser.

Immagina che questa sia una normale immagine di sfondo aggiunta a un modulo di intestazione nella parte superiore di una pagina.

Le proporzioni dell'immagine sono corrette (1920×1080) e la dimensione dell'immagine copre e si adatta perfettamente alla sezione senza alcuna sovrapposizione se visualizzata su uno schermo di 1366×766. L'area bianca sotto l'immagine è il resto del contenuto della pagina.

Questo è ciò che accade quando selezioni la parallasse per la tua immagine.

Come puoi vedere, l'immagine si espande sia verticalmente (per raggiungere la parte inferiore della finestra del browser) che orizzontalmente (per mantenere le proporzioni dell'immagine). Il quadrato nero rappresenta il tuo monitor, quindi tutto all'interno del quadrato nero è ciò che vede lo spettatore. Ho reso semitrasparente la sezione del contenuto bianco in basso in modo che tu possa vedere dove si trova l'immagine di sfondo nascosta dietro di essa. Lì l'immagine rimane fissa mentre scorri e altri elementi si spostano su e giù davanti all'immagine.

Cosa succede quando viene selezionato il metodo True Parallax?

Se hai impostato True Parallax, l'immagine viene racchiusa in un nuovo div con la stessa classe CSS:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Tuttavia, tramite l'uso di un po' di JavaScript, l'altezza e la posizione dell'immagine vengono impostate dinamicamente in base alle dimensioni della finestra del browser e durante lo scorrimento della pagina. I due valori che vengono aggiunti dinamicamente all'immagine di sfondo sono il valore px per la proprietà height e il valore translate per la proprietà transform. Il valore della proprietà height determina l'altezza dell'immagine mentre il valore translate della proprietà transform determina l'esatto posizionamento dell'immagine sulla pagina secondo gli assi x e y.

Ecco il codice che viene inserito nel tag immagine della mia immagine di sfondo parallasse con la finestra del mio browser 1366 × 766:

    height: 960.8px;
    transform: translate(0px, 220.5px);

Notare i due numeri nella proprietà di trasformazione. Questi due numeri controllano il posizionamento dell'immagine di sfondo. Il primo numero (0px) posiziona l'immagine lungo l'asse x (orizzontalmente). Poiché è impostato su 0px, l'immagine non verrà spostata. Il secondo numero posiziona l'immagine lungo l'asse y (verticale). Poiché attualmente è 220,5 px, ciò significa che l'immagine viene spostata verso il basso della pagina 220,5 px.

Nota anche che il valore dell'altezza (960.8px) è maggiore dell'altezza della finestra del mio browser (766px) di circa 200px. Questo serve per far sì che l'immagine venga spinta a 220.5px oltre la parte inferiore della finestra del browser.

Quando viene selezionato il metodo True Parallax, potresti aver notato che la tua immagine viene ingrandita ancora di più rispetto al metodo CSS. Questo perché la posizione dell'immagine viene allungata di un ulteriore 30% dell'altezza del browser.

Ricordi la nostra normale illustrazione di sfondo?

Ecco cosa succede all'immagine dopo aver selezionato True Parallax (prima di iniziare a scorrere ovviamente):

Come puoi vedere, l'immagine viene tirata un po' più oltre la parte inferiore della finestra del browser. Questa finestra del browser è di circa 1080×700 quindi è abbastanza piccola, ma volevo mostrarti cosa sta succedendo su una finestra del desktop più piccola.

Perché True Parallax allunga l'immagine finora?

Bene, la mia ipotesi migliore è quella di adattarsi a schermi di dimensioni maggiori. Una volta che la finestra del browser raggiunge una dimensione dello schermo 1920×1080, l'immagine di sfondo non si estende più oltre la parte inferiore della finestra e si adatta bene.

Perché True Parallax usa JavaScript?

Il motivo principale per cui True Parallax richiede JavaScript è perché l'immagine di sfondo deve muoversi a una velocità diversa rispetto agli altri elementi durante lo scorrimento. Ricordi Mario Brothers?

Con True Parallax, se aumento le dimensioni del mio browser, anche il valore dell'altezza aumenta dinamicamente tramite JavaScript assicurandoti che la mia immagine sia sempre abbastanza grande per il browser.

Se scorro verso il basso la pagina, il valore della posizione di traduzione (i 220.5px nell'esempio sopra) aumenta, spostando la posizione verticale (asse y) dell'immagine lungo la pagina.

Se scorro verso l'alto, il valore della posizione di traduzione diminuisce, riportando l'immagine in alto nella pagina. Ma poiché l'immagine viene spinta verso il basso e verso l'alto a una velocità diversa rispetto agli altri elementi durante lo scorrimento, si ottiene l'effetto di parallasse reale.

Che tipo di immagine dovrei usare?

Se stai cercando di utilizzare l'effetto di parallasse sul tuo sito, la scelta dell'immagine di sfondo giusta è fondamentale. Non vuoi che lo sfondo sia troppo disordinato o distraente. Ma d'altra parte non vuoi nemmeno che sia una nota a margine noiosa.

Ecco 5 consigli generali per scegliere il giusto tipo di immagine per il parallasse

1. Evita di distrarre le foto. Le immagini che hanno troppo da fare creano confusione e distraggono dal contenuto.
2. Assicurati che la tua foto corrisponda al tema del tuo sito. Il tuo sito dovrebbe raccontare una storia. Questa immagine di parallasse (come il resto delle tue immagini) dovrebbe adattarsi al tema.
3. Mantienilo grande e semplice. Ricorda, la tua immagine di parallasse verrà visualizzata anche su schermi di dimensioni più piccole. Assicurati che i dettagli della foto non siano così piccoli da non essere riconosciuti su dispositivi più piccoli.
4. Aggiungi un colore di sovrapposizione quando necessario. A volte una buona immagine di parallasse avrà aspetti sia scuri che chiari che potrebbero finire per nascondere il testo durante lo scorrimento. L'aggiunta di una sovrapposizione scura o chiara garantirà che il tuo testo possa essere letto ovunque sull'immagine
   
5. Rendilo interessante. Ci sono molte foto là fuori per accontentarsi di qualcosa di noioso. Prenditi il ​​​​tempo per trovarne uno che coinvolga il tuo pubblico e attiri la loro attenzione.

Che dimensione dell'immagine di sfondo parallasse dovresti usare?

Questo è un po' difficile rispondere. Non ci sono una taglia adatta a tutte le immagini di parallasse. In effetti non esiste una taglia unica nel web design, almeno non da quando è nato il responsive design. Ma, anche se potrei non essere in grado di darti una regola ferma, posso offrire alcune linee guida generali per scegliere le immagini di sfondo con parallasse della giusta dimensione con Divi.

Poiché la dimensione dello schermo più popolare è di circa 1366 × 766, mi assicurerei sicuramente che tutte le immagini di parallasse di sfondo siano almeno di questa dimensione. Ma a causa della popolarità dei monitor più grandi, sceglierei dimensioni maggiori come 1920×1080. Ciò assicurerà agli utenti di vedere un'immagine di alta qualità su desktop più grandi.

Il problema con l'avere un'immagine con le dimensioni 1920×1080 è che raramente avrai una sezione visibile di 1080px di altezza. Quindi puoi contare sul fondo di quelle immagini che rimangono nascoste.

Suggerimenti utili per far sì che l'immagine di sfondo con parallasse appaia corretta

Per intestazioni e sezioni superiori

Il modo più semplice per assicurarti che la tua immagine sia completamente visibile e abbia un bell'aspetto è utilizzare il modulo di intestazione a larghezza intera. In questo modo la tua immagine di sfondo avrà sempre un bell'aspetto, indipendentemente dalle dimensioni dello schermo. Tuttavia, se stai utilizzando un'immagine di sfondo parallasse utilizzando il modulo di intestazione a larghezza intera, potrebbe essere necessario aggiungere un po' di imbottitura nella parte superiore e inferiore del modulo per mostrare più immagine. Puoi farlo usando il Visual Builder. Vai alle Impostazioni del modulo di intestazione. Nella scheda Avanzate, inserisci quanto segue nella casella di testo Elemento principale:

Padding: 250px 0 250px;

Questo dovrebbe farti andare nella giusta direzione.

Se non hai ancora abbastanza dell'immagine mostrata, ti suggerirei di ritagliare la parte superiore dell'immagine e quindi caricarla di nuovo. Questo può aiutare.

Inoltre, prova a selezionare le foto che hanno un contenuto insignificante nella parte inferiore dell'immagine e il contenuto più importante nella parte superiore. Per le intestazioni, dovresti aspettarti di vedere solo i 700 px superiori dell'immagine di parallasse.

Per sezioni normali/medie

Assicurati di lasciare abbastanza spazio intorno ai tuoi contenuti per esporre lo sfondo a sufficienza in modo da poter ottenere un'immagine completa quando la sezione raggiunge il punto di vista centrale dell'utente. Usa l'imbottitura a tuo vantaggio. Se hai intenzione di utilizzare la parallasse, non lasciare che i tuoi utenti si confondano e debbano scorrere su e giù solo per vedere qual è l'immagine. Meglio mostrarli la prima volta.

Per sezioni inferiori/piè di pagina

Se stai utilizzando il metodo CSS, puoi aspettarti di vedere più parte inferiore dell'immagine di sfondo (a seconda di quanto spazio hai). Proverei a ritagliare la parte inferiore della foto per mostrare più in alto in queste sezioni.

Se stai usando il metodo True Parallax, vedrai principalmente la parte superiore delle tue immagini, quindi le tratterei come le tue intestazioni.

Ecco un esempio di immagini di sfondo True Parallax nella parte superiore, centrale e inferiore della pagina.

Questo tipo di immagine di un ponte funziona bene perché ha un bel punto focale laterale e la parte inferiore dell'immagine non è significativa come la parte superiore, quindi il messaggio non viene mai perso dall'utente.

Ecco la stessa pagina usando il metodo CSS. Puoi davvero vedere il fatto che l'immagine di sfondo è fissa e si espande nella finestra del browser. Sembra anche che sia la stessa immagine fissata sullo sfondo per tutto il tempo.

Se non sei ancora soddisfatto dopo aver cercato l'immagine perfetta, aggiunto l'imbottitura necessaria e ritagliata, puoi sempre ricorrere a qualche hacking.

Hack di immagini parallasse: modifica della posizione dell'immagine con CSS personalizzati

Se vuoi cambiare la posizione dello sfondo di parallasse, puoi usare il selettore css “.et_parallax_bg”. Ecco il css predefinito che posiziona l'immagine per l'effetto di parallasse.

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Se noti che, per impostazione predefinita, la proprietà background position per il metodo css parallax è la seguente impostata su "top center". Ma se volessi cambiare la posizione originale dell'immagine di sfondo, puoi regolare i valori della proprietà background-position.

Se vuoi mantenere il tuo CSS personalizzato condensato in una determinata immagine e non avere effetto su tutto il tuo sfondo di parallasse, dovrai aggiungere una classe alla tua sezione in modo che possiamo identificare nel css quale sfondo dobbiamo personalizzare.

Vai alle impostazioni della sezione, nella scheda Avanzate, e inserisci una classe CSS chiamata "parahacks".
Ora vai su Impostazioni pagina e seleziona la scheda Avanzate.

Quindi utilizzare la casella CSS personalizzato per inserire uno dei seguenti esempi di CSS personalizzato:

Se usi il metodo CSS, puoi rendere l'immagine di sfondo centrata verticalmente aggiungendo il seguente CSS personalizzato:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

Per rendere l'immagine di sfondo allineata in basso, aggiungi il seguente CSS personalizzato:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

Per fare in modo che l'immagine di sfondo si sposti verso l'alto di un certo numero di pixel, aggiungi il seguente CSS personalizzato:

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

Se si utilizza il metodo True Parallax, è necessario tenere conto dei 220 pixel in più (più o meno a seconda dell'altezza del browser) dell'immagine nascosta nella parte inferiore. Per rendere l'immagine di sfondo più centrata verticalmente, è necessario regolare la proprietà background-position utilizzando un valore di pixel negativo in questo modo:

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

Per rendere l'immagine di sfondo più allineata in basso, aggiungi il seguente CSS personalizzato:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL; DR? Ecco un video riassunto dei punti principali

Iscriviti al nostro canale Youtube

In chiusura

Spero sinceramente che questa guida sia stata utile per acquisire una profonda comprensione di come funziona la parallasse con Divi. Per fortuna Divi fa quasi tutto il lavoro pesante fornendoci funzionalità di parallasse. Il metodo CSS e il metodo True Parallax creano entrambi grandi effetti realistici fuori dagli schemi. Tuttavia, sta a noi trovare le immagini giuste e modificarle nel modo giusto per farle funzionare per il nostro sito. Fallo! Scommetto che creerai qualcosa di straordinario.

Non vedo l'ora di sentirti nei commenti.

Saluti!