Come animare le immagini di sfondo di parallasse con gli effetti di scorrimento di Divi
Pubblicato: 2020-03-05La combinazione di effetti di scorrimento con immagini di sfondo parallasse può creare un design davvero magico per i tuoi visitatori. Poiché l'effetto di parallasse mette già in movimento l'immagine mentre l'utente scorre la pagina, l'aggiunta di ulteriori effetti di scorrimento (come il movimento orizzontale e la rotazione) può davvero distinguere il design e aprire le porte a layout più creativi.
In questo tutorial, esamineremo come animare le immagini di sfondo di parallasse utilizzando gli effetti di scorrimento di Divi. Utilizzeremo la stessa immagine di sfondo su più moduli di testo per progettare un layout unico per la visualizzazione di un breve blocco di testo.
Iniziamo.
Sbirciata
Scarica GRATUITAMENTE il layout animato dell'immagine di sfondo della parallasse
Per mettere le mani sul layout di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file JSON nel Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Creazione di immagini di sfondo con parallasse animate con gli effetti di scorrimento di Divi
Aggiunta della colonna
Per iniziare, crea una riga a una colonna.
Creazione del modulo di testo
Quindi aggiungi un modulo di testo alla colonna.
Contenuto del testo
Aggiungi la lettera "p" al contenuto del corpo.
Aggiungi immagine di sfondo parallasse al modulo di testo
Quindi, aggiungi un'immagine di sfondo parallasse al modulo di testo come segue:
- Immagine di sfondo: inserisci immagine
- Usa effetto parallasse: S
- Metodo di parallasse: CSS
Progettare il testo
Nella scheda Progettazione, aggiorna quanto segue:
- Carattere del testo: Montserrat
- Stile del carattere del testo: TT
- Colore del testo del testo: #ffffff
- Testo Dimensioni testo: 100 px (desktop), 70 px (telefono)
- Spaziatura delle lettere del testo: 5px (telefono)
- Altezza riga di testo: 1em
- Allineamento del testo: centro
- Imbottitura: 250 px in alto, 250 px in basso
L'imbottitura è ciò che crea l'altezza necessaria per esporre l'immagine di sfondo parallasse.
Impostazioni riga
Ora che il nostro modulo di testo è terminato, apri le impostazioni della riga e aggiorna quanto segue:
- Usa larghezza grondaia personalizzata: S
- Larghezza grondaia: 1
- Larghezza: 100%
Impostazioni colonna 1
Quindi fare clic per aprire le impostazioni della colonna.
Nella scheda Avanzate, aggiorna i seguenti effetti di scorrimento:
Nella scheda Effetti di movimento orizzontale...
- Abilita Orizzontale: S
- Scostamento iniziale: -2 (a 0% viewport)
- Scostamento medio: 0 (al 40%-60%)
- Scostamento finale: -2 (al 100%)
Nella scheda Effetti di rotazione...
- Abilita rotazione: SI
- Rotazione iniziale: 20° (a 0% viewport)
- Rotazione media: 0 gradi (al 40%-60%)
- Rotazione finale: -20 gradi (al 100%)
Creazione della colonna 2
Anche se abbiamo iniziato con un layout a una colonna, creeremo un totale di 5 colonne. È semplicemente più semplice duplicare la colonna con tutto il suo contenuto e le impostazioni per creare i successivi quattro necessari per il design.
Duplica l'intera prima colonna (con il modulo di testo) per creare la seconda colonna.
Aggiornamento degli effetti di scorrimento della colonna 2
Quindi aggiorna gli effetti di scorrimento per la colonna 2 come segue:
Nella scheda Effetti di rotazione...
- Rotazione iniziale: -20deg
- Rotazione finale: 20deg
Creazione della colonna 3
Per creare la colonna 3, duplica la colonna 2.
Aggiornamento degli effetti di scorrimento della colonna 3
Quindi aggiorna le impostazioni della colonna 3 come segue:
Nella scheda Effetti di movimento orizzontale...
- Abilita movimento orizzontale: NO
Nella scheda Effetto di rotazione...
- Rotazione iniziale: 20°
- Rotazione finale: 10 gradi
Creazione della colonna 4
Per creare la colonna 4, duplica la colonna 2 e trascinala in basso.
Aggiornamento degli effetti di scorrimento della colonna 4
Quindi apri le impostazioni per la colonna 4 e aggiorna quanto segue:
Nella scheda Effetti di movimento orizzontale...
- Scostamento iniziale: 2
- Scostamento finale: 2
Nella scheda Effetti di rotazione...
- Rotazione iniziale: -15deg
- Rotazione finale: 20deg
Creazione della colonna 5
Infine, per creare la colonna 5, duplica la colonna 4.
Aggiornamento degli effetti di scorrimento della colonna 5
Quindi aggiorna le impostazioni della colonna 5 come segue:
Nella scheda Effetti di rotazione...
- Rotazione iniziale: 15°
- Rotazione finale: -15deg
Aggiornamento delle lettere del modulo di testo
Quindi, usa l'opzione di testo in linea per cambiare le lettere in ogni colonna in modo che scrivono collettivamente la parola "potere".
Aggiornamento del design del modulo di testo centrale
Apri le impostazioni del modulo di testo nella colonna 3 e aggiorna quanto segue:
- Carattere del testo: Montserrat Subrayada
- Colore del testo del testo: #e0e722
- Dimensione del testo del testo: 150 px (desktop)
- Altezza riga di testo: 100 px
Aggiorna il contenuto del primo modulo di testo per dispositivi mobili
Per visualizzare un singolo modulo di testo sul cellulare, dobbiamo aggiornare il modulo di testo nella colonna 1 con il seguente contenuto sul display del tablet e del telefono:
Contenuto del corpo su tablet e telefono:
<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>
Aggiorna le impostazioni della colonna 1
Quindi, apri le impostazioni per la colonna 1 e aggiorna quanto segue:
- Angoli arrotondati (desktop): 100% in alto a sinistra
- Angoli arrotondati (tablet e telefono): 40% in alto a sinistra, 40% in basso a destra
Nella scheda Avanzate, aggiungi il seguente CSS personalizzato alla visualizzazione del tablet dell'elemento principale:
width: 100% !important;
Ciò assicurerà che la colonna occupi l'intera larghezza della riga sul display del tablet e del telefono.
Nascondi il resto delle colonne sul display del tablet e del telefono
Ora che la colonna 1 coprirà l'intera larghezza della riga su tablet e telefono, possiamo nascondere/disabilitare il resto delle colonne su tablet e telefono. Per fare ciò, apri le impostazioni per le colonne 2-5 e disabilita la visibilità di ciascuna delle colonne su telefono e tablet.
Aggiorna le impostazioni della colonna 5
Quindi apri le impostazioni della colonna 5 e aggiungi un angolo arrotondato complementare come segue:
- Angoli arrotondati (desktop): 100% in basso a destra
Aggiunta di un design di sfondo alla sezione
Per completare il design, aggiorna le impostazioni della sezione con un design di sfondo come segue:
- Colore di sfondo: #e0e722
- Stile divisore superiore: vedi screenshot
- Colore divisore superiore: #222222
- Altezza divisore superiore: 650 px (desktop), 500 px (tablet e telefono)
- Stile divisore inferiore: vedi screenshot
- Colore divisore inferiore: #222222
- Altezza divisore inferiore: 500 px (desktop), 400 px (tablet e telefono)
Risultato finale
Ecco il progetto finale sul desktop.
Ed ecco il design di fallback sul display del tablet e del telefono.
Pensieri finali
Le immagini di sfondo parallasse si combinano con gli effetti di scorrimento in modi davvero magici. L'unico aspetto negativo dell'utilizzo di immagini di sfondo con parallasse è la mancanza di supporto per i dispositivi mobili, ma con le impostazioni reattive fornite da Divi, possiamo facilmente creare un fallback. Spero che questo design elegante aggiunga un po' di ispirazione alla tua giornata.
Non vedo l'ora di sentirti nei commenti.
Saluti!