Come impilare e animare il testo usando Divi Scroll Effects
Pubblicato: 2020-02-22L'utilizzo degli effetti di scorrimento di Divi per impilare e animare il testo sullo scorrimento è una tecnica di progettazione unica che può essere utilizzata per dare vita alle intestazioni delle pagine. Il trucco è usare le opzioni di posizione di Divi per impilare le lettere in modo che si trovino direttamente una sopra l'altra. Quindi puoi spostare le lettere orizzontalmente e verticalmente usando gli effetti di scorrimento.
Controlla!
Sbirciata
Ecco una rapida occhiata all'animazione del testo che creeremo in questo tutorial.
Iscriviti al nostro canale Youtube
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni 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.
Come impilare e animare il testo in Divi
Impostazione della sezione e della riga
Innanzitutto, crea una riga a una colonna nella sezione normale.
Impostazioni della sezione
Prima di aggiungere qualsiasi modulo, apri le impostazioni della sezione e aggiorna quanto segue:
- Colore di sfondo: rgba (201,245,255,0.35)
- Imbottitura: 14vw superiore, 14vw inferiore
Impostazioni riga
Quindi, apri le impostazioni della riga e aggiorna quanto segue:
- Larghezza massima: 60%
- Allineamento righe: Centro
- Altezza: 20vw
Stiamo impostando l'altezza su un valore specificato perché posizioneremo i moduli di testo all'interno della riga in modo assoluto.
Aggiunta dei moduli di testo impilati che si animano durante la passeggiata
Ora che la sezione e la riga sono impostate, possiamo iniziare ad aggiungere i moduli di testo che comporranno il nostro design dell'intestazione. Il primo modulo di testo includerà il testo dell'intestazione principale. I prossimi tre moduli di testo conterranno una singola lettera che verrà utilizzata per impilare sopra la prima intestazione dell'intestazione e quindi animare sullo scorrimento.
Iniziamo aggiungendo il modulo di testo con l'intestazione principale.
Aggiungi testo Modulo n. 1
Aggiungi un nuovo modulo di testo alla riga.
Quindi aggiorna il modulo di testo con il seguente contenuto.
<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2> that jumps off the page
- Carattere di testo: Bungee Hairline
- Peso del carattere del testo: grassetto
- Dimensione del testo del testo: 4vw
- Altezza riga di testo: 1,5 em
- Intestazione 2 Font: Bungee Shade
- Intestazione 2 Peso del carattere: grassetto
- Colore testo titolo 2:
- Intestazione 2 Dimensione del testo: 12vw
- Larghezza: 100%
- Posizione: Assoluta
Aggiungi testo Modulo #2
Il modulo di testo successivo verrà utilizzato come prima lettera per sovrapporsi alla prima lettera dell'intestazione. Per avviare rapidamente il design del modulo di testo, duplica il primo modulo di testo.
Quindi aggiorna il contenuto del modulo di testo duplicato con la prima lettera del testo dell'intestazione ("D").
Quindi aggiorna le impostazioni di progettazione come segue:
- Carattere del testo: Bungee Shade
- Peso del carattere del testo: grassetto
- Colore del testo del testo: rgba (83,144,193,0.3)
- Dimensione del testo del testo: 12vw
- Altezza riga di testo: 1em
Effetti di scorrimento
Il modulo di testo con la lettera "D" è ora impilato direttamente sopra la lettera "D" nel primo modulo di testo. Sposteremo leggermente la lettera sullo scorrimento usando una combinazione di movimento verticale e orizzontale.
Movimento verticale
Nella scheda Avanzate, seleziona la scheda Movimento verticale e aggiorna quanto segue:
- Abilita movimento verticale: S
- Scostamento iniziale: 0 (al 20%)
- Offset centrale: -0,5 (tra 40% e 60%)
- Scostamento finale: 0 (all'80%)
Se non conosci le opzioni dell'effetto di scorrimento in Divi, i valori percentuali superiori indicano i punti di posizione all'interno della finestra del browser. Ciascun valore percentuale corrisponde agli offset sottostanti (inizio, metà e fine). Quindi, mentre l'utente scorre, la lettera "D" inizierà ad animare (da un offset iniziale "0") quando raggiunge il 20% dalla parte inferiore della finestra. Continuerà ad animarsi (verso l'alto) fino a raggiungere il 40% dalla parte inferiore della finestra e quindi manterrà l'offset "-0,5" fino a raggiungere il 60% dalla parte inferiore della finestra. Una volta raggiunto il punto del 60%, inizierà ad animare di nuovo all'offset "0" originale e interromperà l'animazione quando raggiunge l'80% dalla parte inferiore della finestra.
Movimento orizzontale
Per dare al modulo di testo un movimento orizzontale, seleziona la scheda del movimento orizzontale e aggiorna quanto segue (i valori saranno gli stessi del movimento verticale):
- Abilita movimento orizzontale: S
- Scostamento iniziale: 0 (al 20%)
- Offset centrale: -0,5 (tra 40% e 60%)
- Scostamento finale: 0 (all'80%)
Aggiungi testo Modulo n. 3
Crea il terzo modulo di testo (o lettera "D") duplicando il modulo di testo precedente.
Aggiorna effetti di scorrimento
Quindi aggiorna i seguenti effetti di scorrimento.
Movimento verticale
- Offset centrale: -1
Movimento orizzontale
- Offset centrale: 1
Aggiorna il colore del testo
Aggiorna il colore del testo come segue:
- Colore del testo del testo: rgba (83,144,193,0,5)
Aggiungi testo Modulo #4
Le cose potrebbero diventare più difficili da selezionare a questo punto nella visualizzazione desktop. Distribuisci la modalità di visualizzazione wireframe e duplica il modulo di testo precedente per creare la nostra lettera finale.
Aggiorna il colore del testo
Aggiorna il colore del testo come segue:
- Colore del testo del testo: #5390c1
Aggiorna effetti di scorrimento
Quindi passa alla scheda Avanzate e regola gli effetti di scorrimento come segue:
Movimento verticale
- Offset centrale: -1.5
Movimento orizzontale
- Offset centrale: 1.5
Aggiungi margine alla sezione per il test
Per testare il design su una pagina live, avrai bisogno di un po' di spazio per scorrere. Possiamo farlo facilmente aggiungendo un margine superiore e inferiore alla sezione. Apri le impostazioni della sezione e aggiorna quanto segue:
- Margine: 40vw in alto, 40vw in basso
Risultato finale
Ora possiamo finalmente controllare il risultato finale su una pagina live.
Eccolo sul cellulare.
Sentiti libero di sperimentare diversi tipi di carattere usando la funzione trova e sostituisci di Divi.
Pensieri finali
Questo post dovrebbe far funzionare la tua creatività per nuovi modi di animare il testo sullo scorrimento. Questo funzionerà bene per le intestazioni delle sezioni poiché l'utente dovrà scorrere la sezione (dall'alto verso il basso) e sperimentare l'intera durata dell'effetto di scorrimento.
E, a pensarci bene, questo stesso concetto funzionerebbe anche per immagini e icone.
Non vedo l'ora di sentirti nei commenti qui sotto.
Saluti!