Come animare il testo utilizzando Animate.js e Letterize.js su Divi

DIVI offre tantissime possibilità di animazione quando si tratta di dare dinamismo a un sito web. Tuttavia, puoi aggiungere queste animazioni solo una volta alla volta a un contenitore. Se per qualche animazione è perfettamente sufficiente, tempo in tempo, puoi trovarlo rapidamente limitato. Ad esempio, a volte, potresti voler aggiungere più di un'animazione di testo ed è quello che tratteremo oggi utilizzando il modulo di testo, Letterize.js e Animate.js, che sono librerie javascript che danno l'animazione CSS agli elementi DOM. Con questo approccio, sarai in grado di creare tale animazione con qualsiasi altro modulo Divi.

Iniziamo.

Possibile risultato finale

Ecco un possibile risultato che possiamo raggiungere alla fine del tutorial.

1. Crea un design per la sezione Hero

Inizieremo creando una grande sezione chiamata anche "Sezione Eroe" e aggiungendovi una sezione unica.

Aggiungi nuova sezione

Spacing

Inizia creando una nuova pagina. All'interno di quella pagina, aggiungi una nuova sezione. Apri le impostazioni della sezione e modifica il riempimento superiore e inferiore come segue:

• Riempimento superiore: 180 px (desktop), 100 px (tablet), 50 px (telefono)
• Imbottitura inferiore: 180 px (desktop), 100 px (tablet), 50 px (telefono)

Aggiungi una riga

Single Column Structure

Procedi aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Configure Spacing

Non aggiungeremo alcun modulo ora, ma definiremo invece le impostazioni di riempimento.

• Imbottitura inferiore: 0 px

Aggiungi modulo di testo alla prima colonna

Add H1 Copy

L'unico modulo che aggiungeremo a questa riga è un modulo di testo. Aggiungi alcuni contenuti H1 a tua scelta.

H1 Text Settings

Passa alle schede di progettazione del modulo e cambiamo le seguenti impostazioni di testo:

• Carattere dell'intestazione: Montserrat
• Colore del testo dell'intestazione: rgba (232,232,232,0.41)
• Dimensioni del testo dell'intestazione: 80px (desktop), 50px (tablet), 40px (telefono)
• Spaziatura lettere di intestazione: -10px (desktop), -4px (tablet), -3px (telefono)
• Altezza riga di intestazione: 0.6em (desktop), 0.7em (tablet), 0.8em (telefono)

Aggiungi una seconda riga

Column Structure

Aggiungiamo un'altra riga proprio sotto la precedente con la seguente struttura di colonne:

Sizing

Apri le impostazioni della riga e modifica la larghezza massima nelle impostazioni di dimensionamento.

• Larghezza massima: 1680 px

Spacing

Rimuovi tutto il margine inferiore e il riempimento successivo.

• Margine inferiore: 0 px
• Imbottitura inferiore: 0 px

Aggiungi un modulo immagine alla seconda colonna

Upload An Illustration

Quindi, aggiungiamo un modulo immagine e carichiamo un'illustrazione a tua scelta. Dovrebbe apparire come un'illustrazione di sfondo.

Sizing

Ora passa alla scheda di progettazione del modulo e forza la larghezza intera sull'immagine.

• Forza a larghezza intera: sì

Spacing

Aggiungi un po 'di margine inferiore negativo dopo.

• Margine inferiore: -12%

Animation

Completiamo le impostazioni del modulo aggiungendo le seguenti impostazioni di animazione:

• Stile animazione: dissolvenza
• Ritardo animazione: 3000 ms

Aggiungi la terza riga

Define The Column Structure

Alla prossima e ultima riga. Utilizza la seguente struttura di colonne:

Spacing

Passa alla scheda di progettazione della riga e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 10%
• Imbottitura inferiore: 5%
• Imbottitura sinistra: 3%
• Imbottitura destra: 3%

Box Shadow

Quindi, seleziona un'ombra sottile della scatola.

• Box Shadow Blur Strength: 80px
• Colore dell'ombra: rgba (0,0,0,0.06)

Animation

E completa le impostazioni della riga aggiungendo la seguente animazione:

• Stile animazione: dissolvenza
• Ritardo animazione: 3000 ms

Aggiungi modulo di testo alla terza riga

Provide Content

Non aggiungiamo moduli. Il primo modulo di cui abbiamo bisogno è un modulo di testo con alcuni contenuti.

Text Settings

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere testo: Lato
• Dimensioni del testo: 18 px
• Spaziatura lettere del testo: 1 px
• Altezza riga di testo: 2.7em

Aggiungi un modulo pulsante alla colonna

Provide Text

L'ultimo modulo di cui abbiamo bisogno è un modulo pulsante. Inserisci un testo a tua scelta.

Button Settings

Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensioni del testo del pulsante: 16px
• Colore testo pulsante: # 171cff
• Larghezza bordo pulsante: 0 px
• Raggio del bordo del pulsante: 0 px

• Carattere pulsante: Montserrat
• Stile carattere pulsante: maiuscolo

Spacing

Quindi, applica i seguenti valori di riempimento all'interno delle impostazioni di spaziatura:

• Imbottitura superiore: 2%
• Imbottitura inferiore: 2%
• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Box Shadow

Completa le impostazioni del modulo aggiungendo la seguente ombra della casella:

• Posizione verticale casella ombra: 5px
• Forza di diffusione dell'ombra della scatola: -2px
• Colore ombra: # 171cff

2. Aggiungi classe CSS al titolo

Apri il primo modulo di testo e fai clic sulla scheda Testo

Ora che abbiamo tutti gli elementi di design a posto, è il momento di aggiungere le animazioni di testo avanzate al nostro titolo. Apri il modulo di testo contenente la copia H1 e seleziona la scheda di testo.

Aggiungi l'attributo ID al tag H1

All'interno di H1 aggiungi un attributo ID personalizzato.

• ID = "headline-copy"

3. Aggiungi Letterize e Anime Libraries

Aggiungi modulo codice alla colonna

Per creare le animazioni, stiamo usando le librerie letterize.js e anime.js. Per aggiungere queste librerie, inserisci un nuovo modulo di codice nella colonna dell'ultima riga.

Includi entrambe le librerie

Quindi, aggiungi due diversi tag di script contenenti le seguenti fonti che riconducono alle librerie:

• <script src = "https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js"> </script>
• <script src = "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"> </script>

4. Aggiungere il codice di animazione

Animazione per Lettera a livello individuale

Per l'ultima parte di questo tutorial, aggiungeremo il codice di animazione e funzionerà per entrambe le librerie letterize.js e anime.js. Per ottenere un bell'effetto sui testi, applicheremo due tipi di animazioni. La prima animazione viene applicata a ciascuna lettera individualmente e consecutivamente. Ciò si ottiene con la libreria letterize.js. Questa libreria, in combinazione con la prima parte del codice di seguito, inserisce ciascuna lettera nella tua copia in un intervallo separato. Questi intervalli saranno, quindi, presi di mira separatamente durante il processo di animazione. Assicurati di inserire il codice sottostante tra i tag di script.

jQuery(function ($) {
   $(document).ready(function () {
          var headlineCopy = new Letterize({
          targets: "#headline-copy"
       });
       var animation = anime.timeline({
          targets: headlineCopy.listAll(),
          delay: anime.stagger(20),
          loop: false
       });
      animation.add({
          opacity: [0, 1],
          scale: [0, 1.2, 1],
          duration: 1500,
          elasticity: 600,
          color: '#000',
      }).add({
          color: '#00FFF7',
      }).add({
          color: '#D2BEFB',
      }).add({
         color: '#171cff',
      });
   });
});

Ogni funzione "aggiungi" rappresenta un'animazione in una sequenza temporale di animazioni. Queste animazioni si applicano a ciascuna lettera singolarmente. Puoi modificare queste funzioni di aggiunta come desideri seguendo Letterize API, aggiungerne di nuove o rimuovere quelle correnti, assicurati solo che l'ultima funzione di aggiunta sia chiusa correttamente con un ';' alla fine (come puoi vedere nel codice sopra) .

Puoi aggiungere diverse proprietà CSS all'interno di queste funzioni di "aggiunta". Puoi trovare ulteriori informazioni sulle proprietà e su come vengono utilizzate nel Esempi di documentazione di anime.js.

In questo tutorial, abbiamo aggiunto di proposito più animazioni per mostrare come funziona la sequenza temporale, ma potresti voler optare per qualcosa di più sottile o più breve per i tuoi progetti.

Animazione per frase

Dopo aver aggiunto la prima parte dell'animazione, che ha come target ogni lettera individualmente, passeremo alla seconda parte della nostra animazione. Questa parte si rivolge all'intera copia nel suo insieme. L'approccio all'animazione è lo stesso di sopra; stiamo inserendo l'intero modulo all'interno di un'animazione della sequenza temporale. Ogni funzione di aggiunta rappresenta un'animazione diversa all'interno di quella sequenza temporale. È possibile modificare queste funzioni di aggiunta, aggiungerne di nuove o rimuovere quelle correnti. Assicurati di inserire questo nuovo codice prima della fine del codice dello script, come puoi notare nella schermata di stampa qui sotto.

anime.timeline({loop: false}) 
   .add({targets: '#headline-copy',lineHeight: '1em',delay: '1500' }) 
   .add({targets: '#headline-copy',translateX: ['-5%', 0],letterSpacing: '-2px',});

Aggiungi CSS personalizzato per Span

Ora, poiché abbiamo creato un intervallo separato per ciascuna delle nostre lettere, avremo bisogno di modificare la proprietà di visualizzazione di ogni intervallo per consentire alle lettere di apparire l'una accanto all'altra. A tal fine, aggiungeremo del codice CSS al nostro modulo di codice. Assicurati di inserire il codice tra i tag di stile.

#headline-copy span {display: inline-block;}

Anteprima finale

Ora che abbiamo completato tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di dimensioni diverse.

Pensieri finali

Quindi in questo post ti abbiamo mostrato come creare animazioni di testo per il tuo titolo. Abbiamo costruito l'intero design all'interno di Divi e combinato il framework con le librerie Letterize.js e Anime.js. Proverai questa animazione sul tuo blog? Hai altre animazioni da condividere con noi? Facci sapere.