Come animare le lettere per disegni di testo unici in Divi

L'animazione è diventata una parte comune dell'esperienza utente per i siti Web moderni. A parte il fatto che sembra interessante, può anche aggiungere un sottile elemento interattivo che coinvolge l'utente dando vita ai contenuti. Gli effetti di animazione incorporati di Divi ti consentono di animare praticamente qualsiasi elemento su una pagina con diversi stili di animazione.

In questo tutorial, ti mostrerò come animare le lettere per alcuni design di testo unici in Divi. Inserendo singole lettere in un modulo di testo, puoi indirizzare l'animazione di ogni lettera con diversi stili di animazione, durata e ritardi che faranno risaltare il contenuto in modo creativo. Questa tecnica è puramente per scopi di progettazione poiché le lettere che compongono il contenuto non saranno molto seo friendly. Tuttavia, le lettere animate ti consentono di condividere la tua storia con gli utenti in modo sorprendente.

Iniziamo.

Sbirciata

Scarica GRATUITAMENTE il layout degli esempi di progettazione dell'animazione della lettera

Per mettere le mani sui disegni di animazione delle lettere 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 i file

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.

SCARICA

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.

Andiamo al tutorial, vero?

Iniziare

Per questo tutorial, tutto ciò di cui hai bisogno è Divi. Costruiremo i progetti da zero utilizzando il costruttore Divi sul front-end. Per iniziare, crea una nuova pagina, assegna un titolo alla tua pagina e distribuisci fai clic per utilizzare Divi Builder. Quindi scegli l'opzione "costruisci da zero" e fai clic per costruire sul front-end.

Ora sei pronto per progettare!

Costruire il layout per animare le lettere

Aggiunta di sezione, riga e colonna

Vai avanti e crea una nuova sezione regolare con una riga a una colonna.

Prima di iniziare ad aggiungere i nostri moduli di testo (che conterranno lettere bianche), aggiungiamo un'immagine di sfondo scuro alla sezione. Apri le impostazioni della sezione e aggiungi un'immagine di sfondo. Sto utilizzando un'immagine di sfondo astratta dal layout predefinito della pagina di destinazione della società di investimento.

Creazione di blocchi di lettere individuali con moduli di testo

Prima di poter iniziare ad aggiungere animazioni alle lettere, dobbiamo prima creare un modulo di testo separato per ogni lettera che vogliamo aggiungere. Per questo esempio, creeremo il testo "Divi Design". Poiché questa frase di testo include 11 spazi di caratteri (incluso lo spazio tra le lettere, dovremo aggiungere 11 diversi moduli di testo.

Vai avanti e aggiungi un modulo di testo alla colonna.

Nella casella del contenuto, aggiungi la prima lettera del tuo testo che in questo caso è la lettera "d".

Quindi aggiorna le impostazioni di progettazione del testo come segue:

• Carattere del testo: Rubik
• Stile del carattere del testo: TT
• Colore del testo del testo: #ffffff
• Testo Dimensioni testo: 80 px (desktop), 50 px (tablet), 30 px (telefono)
• Altezza riga di testo: 1,6 em
• Orientamento del testo: centro

Quindi aggiungi un'animazione al modulo di testo come segue:

• Stile di animazione: diapositiva
• Direzione dell'animazione: su
• Durata dell'animazione: 600 ms
• Ritardo animazione: 100 ms
• Opacità iniziale dell'animazione: 100%

Duplica il modulo di testo e aggiorna il contenuto con la lettera "i". Quindi aumentare il ritardo dell'animazione di 100 ms come segue:

• Ritardo animazione: 200 ms

Duplica il modulo di testo e aggiorna il contenuto con la lettera “v”. Quindi aumentare il ritardo dell'animazione a 300 ms.

• Ritardo animazione: 300 ms

Duplica il modulo di testo e aggiorna il contenuto con la lettera "i". Quindi aumentare il ritardo dell'animazione a 400 ms.

• Ritardo animazione: 400 ms

Per questo prossimo modulo di testo vogliamo aggiungere uno spazio vuoto. Duplica il modulo di testo e aggiungi il seguente html alla casella del contenuto:

 

Non è necessario aggiornare il ritardo dell'animazione per questo.

Quindi duplica il modulo di testo e aggiorna il contenuto con la lettera "d". Questa è la prima lettera della parola "design". Quindi aumentare il ritardo dell'animazione a 500 ms.

• Ritardo animazione: 500 ms

Continua il processo di duplicazione del modulo di testo e aumenta il ritardo dell'animazione di 100 ms per ciascuna delle lettere rimanenti che compongono la parola "design".

• Lettera “e”: ritardo animazione 600ms
• Lettera “s”: ritardo animazione 700ms
• Lettera “i”: ritardo animazione 800ms
• Lettera “g”: ritardo animazione 900ms
• Lettera “n”: ritardo animazione 1000ms

Ecco come appare il design finora.

Aggiunta della proprietà Flex per allineare i moduli orizzontalmente

Non è ancora il risultato che stiamo cercando. Ma tutto ciò che dobbiamo fare magicamente per mettere insieme il design è aggiungere un piccolo frammento di css alla colonna della riga. Per fare ciò, apri le impostazioni della riga e aggiungi il seguente CSS personalizzato all'elemento principale della colonna.

display: flex;

La proprietà display: flex allinea tutti i moduli orizzontalmente in una tabella flessibile che si adatterà magnificamente alle diverse larghezze del browser. E poiché i moduli sono in una riga di una colonna, il design non si romperà su tablet o dispositivi mobili.

Abbiamo anche bisogno di aggiungere una larghezza della grondaia personalizzata per togliere il margine inferiore sotto le lettere e aggiungere un po' di imbottitura superiore e inferiore alla riga in modo che le lettere abbiano un po' di spazio per l'animazione.

• Larghezza grondaia: 1
• Imbottitura personalizzata: 5vw in alto, 5vw in basso

Questo è il risultato finale.

Aggiunta di diversi stili di animazione

Con questa configurazione, puoi facilmente aggiungere nuovi stili di animazione per effetti completamente unici. Per fare ciò, puoi sfruttare la funzione di selezione multipla di Divi per aggiornare tutti i moduli contemporaneamente. Sul front-end, tieni premuto Maiusc e fai clic sul primo e sull'ultimo modulo di testo. Quindi apri le impostazioni per uno dei moduli selezionati.

Questo aprirà il modale delle impostazioni dell'elemento che ti consentirà di aggiornare le impostazioni per tutti i moduli selezionati. Non vogliamo modificare il ritardo dell'animazione perché vogliamo mantenere l'effetto a cascata su ciascuna delle lettere. Tuttavia, possiamo aggiornare le altre opzioni di animazione in modi diversi per creare risultati completamente unici.

Suggerisco di duplicare la sezione prima di testare una nuova animazione in modo da poter mantenere gli esempi precedenti.

Ecco alcuni esempi.

Animazione del testo con zoom inverso

Per animare le lettere con un effetto zoom inverso, aggiorna le impostazioni dell'elemento (le impostazioni per tutti i moduli) con quanto segue:

• Stile di animazione: Zoom
• Direzione dell'animazione: Centro
• Intensità animazione: 200%

Questo è il risultato finale.

Animazione del testo a onde rotolanti

Per animare le lettere con un effetto onda rotante, aggiorna le impostazioni dell'elemento (le impostazioni per tutti i moduli) con quanto segue:

• Stile di animazione: Ruota
• Direzione dell'animazione: su
• Intensità animazione: 100%

Questo è il risultato finale.

Animazione del testo Domino

Per animare il testo con un effetto domino, aggiorna le impostazioni dell'elemento (le impostazioni per tutti i moduli) con quanto segue:

• Stile di animazione: Flip
• Direzione animazione: Sinistra
• Intensità animazione: 100%

Questo è il risultato finale.

Animazione di testo in piedi

Per animare il testo con un effetto domino, aggiorna le impostazioni dell'elemento (le impostazioni per tutti i moduli) con quanto segue:

• Stile di animazione: piega
• Direzione dell'animazione: su
• Intensità animazione: 100%

Quindi aggiungi la prospettiva per creare un elemento di design 3d aggiungendo il seguente css all'elemento della colonna principale sotto le impostazioni della riga.

CSS elemento colonna principale:

perspective: 1000px;

Questo è il risultato finale.

Animare le lettere utilizzando una combinazione di direzioni di animazione

Se vuoi essere più creativo, puoi animare le lettere usando una combinazione di effetti di animazione. Per questo esempio, utilizzerò una combinazione di direzioni e intensità dell'animazione per lo stile della diapositiva. Questo ci darà una presentazione completamente unica.

Ecco come farlo.

Innanzitutto, duplica una delle sezioni che abbiamo creato in precedenza in modo da poter iniziare con un vantaggio sul processo di progettazione.

Quindi eliminare i primi 4 moduli di testo in modo che venga visualizzato solo il testo "disegno".

Impostazioni della sezione

Successivamente, poiché vogliamo che alcune delle lettere nell'animazione inizino al di fuori della vista della sezione, dovremo aggiungere un piccolo frammento di css alle impostazioni della sezione come segue:

overflow: hidden;

Ciò manterrà le lettere nascoste fino all'ingresso nella sezione.

Impostazioni riga

Ora, per assicurarci che i nostri moduli di testo (lettere) rimangano centrati, dobbiamo aggiungere il seguente css alle impostazioni della riga:

display:flex;
justify-content: center;

Impostazioni comuni del modulo di testo

Utilizzando la selezione multipla, aggiorna tutti e sei i moduli di testo con le seguenti impostazioni degli elementi:

• Margine personalizzato: 3% sinistro, 3% destro
• Larghezza bordo: 1px
• Colore bordo: #ffffff

• Stile di animazione: diapositiva
• Durata dell'animazione: 2000 ms
• Ritardo animazione: 100 ms
• Intensità animazione: 300%

Questo si occupa delle impostazioni di base dell'animazione che saranno comuni a tutti i moduli di testo. Ora possiamo modificare le impostazioni di animazione per loro individualmente.

Impostazioni individuali del modulo di testo

A questo punto, possiamo divertirci a modificare le impostazioni dei singoli moduli di testo per cambiare la direzione dell'animazione per ciascuno. Questo ci permetterà di animare le lettere in un modo completamente unico. Per ogni lettera, aggiorna la direzione e l'intensità dell'animazione come segue:

• lettera D
  Direzione dell'animazione: su
• lettera E
  Direzione animazione: Giù
• lettera S
  Direzione animazione: Sinistra
  Intensità animazione: 80%
• Lettera I
  Direzione dell'animazione: destra
  Intensità animazione: 80%
• lettera G
  Direzione animazione: Giù
• lettera n
  Direzione dell'animazione: su

Ecco il disegno definitivo.

Ed ecco come appare sui dispositivi mobili.

Pensieri finali

Penso che sia sicuro dire che Divi ha molti modi per animare le lettere una volta che hai la configurazione corretta. E devo dire che è stato piuttosto difficile smettere di giocare con le impostazioni di animazione durante la creazione di questi esempi. Ci sono così tante possibili varianti da provare! Comunque, spero che questo ti dia un po' di ispirazione per il tuo prossimo progetto. Semmai, potresti volerlo costruire solo per il gusto di farlo.

Non vedo l'ora di sentirti nei commenti.

Saluti!