Come aggiungere animazioni di testo avanzate all'interno di Divi con Letterize.js e Anime.js

Le animazioni integrate di Divi offrono tantissime possibilità quando si tratta di aggiungere quel vantaggio in più al tuo sito web. Queste animazioni, tuttavia, consentono di aggiungere un'animazione a un contenitore alla volta. Mentre nella maggior parte dei casi questo è di solito più che sufficiente, ci sono progetti in cui vorrai fare il possibile. Potresti trovarti a voler aggiungere animazioni di testo avanzate, ad esempio. In questo tutorial, ti mostreremo esattamente come farlo. Questo tutorial è un ottimo trampolino di lancio se vuoi imparare come combinare Divi, come framework, con librerie Javascript esterne. Creeremo il nostro intero design utilizzando gli elementi e le opzioni integrati di Divi, quindi indirizzeremo il nostro modulo di testo con le librerie letterize.js e anime.js per creare animazioni di testo avanzate. Una volta compreso l'approccio, sarai in grado di creare qualsiasi tipo di animazione di testo avanzata che puoi immaginare!

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout avanzato delle animazioni di testo

Per mettere le mani sul layout di animazione del testo avanzato gratuito, 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!

1. Crea il design della sezione dell'eroe

Aggiungi nuova sezione

Spaziatura

Inizia creando una nuova pagina o aprendone una esistente. All'interno della tua pagina, aggiungi una nuova sezione. Apri le impostazioni della sezione e modifica l'imbottitura superiore e inferiore su diverse dimensioni dello schermo.

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

Aggiungi riga n. 1

Struttura della colonna

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

Spaziatura

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e rimuovi tutto il riempimento inferiore predefinito.

• Imbottitura inferiore: 0px

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi copia H1

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di testo. Aggiungi alcuni contenuti H1 a tua scelta.

Impostazioni testo H1

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

• Carattere dell'intestazione: Montserrat
• Colore del testo dell'intestazione: rgba (232,232,232,0.41)
• Dimensione del testo dell'intestazione: 80 px (desktop), 50 px (tablet), 40 px (telefono)
• Spaziatura delle lettere dell'intestazione: -10px (desktop), -4px (tablet), -3px (telefono)
• Altezza della linea di intestazione: 0,6 em (desktop), 0,7 em (tablet), 0,8 em (telefono)

Aggiungi riga #2

Struttura della colonna

Aggiungi un'altra riga subito sotto la precedente utilizzando la seguente struttura a colonne:

Dimensionamento

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

• Larghezza massima: 1680 px

Spaziatura

Rimuovi tutto il margine inferiore e il riempimento successivo.

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

Aggiungi modulo immagine alla colonna

Carica illustrazione

Quindi, aggiungi un modulo immagine e carica l'illustrazione gratuita che puoi trovare nella cartella che hai potuto scaricare all'inizio di questo post.

Dimensionamento

Passa alla scheda di progettazione del modulo e forza l'intera larghezza sull'immagine.

• Forza intera larghezza: Sì

Spaziatura

Aggiungi poi un margine inferiore negativo.

• Margine inferiore: -12%

Animazione

E completa le impostazioni del modulo aggiungendo le seguenti impostazioni di animazione:

• Stile di animazione: dissolvenza
• Ritardo animazione: 3000 ms

Aggiungi riga #3

Struttura della colonna

Alla prossima e ultima riga. Utilizzare la seguente struttura a colonne:

Spaziatura

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%

Scatola ombra

Quindi, abilita un'ombra sottile della scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.06)

Animazione

E completa le impostazioni della riga aggiungendo la seguente animazione:

• Stile di animazione: dissolvenza
• Ritardo animazione: 3000 ms

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

È ora di aggiungere moduli. Il primo modulo di cui abbiamo bisogno è un modulo di testo con un contenuto descrittivo.

Impostazioni testo

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

• Carattere del testo: Lato
• Dimensione del testo: 18px
• Spaziatura delle lettere del testo: 1px
• Altezza riga di testo: 2,7 em

Aggiungi modulo pulsante alla colonna

Aggiungi copia

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

Impostazioni dei pulsanti

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

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

• Carattere pulsante: Montserrat
• Stile carattere pulsante: maiuscolo

Spaziatura

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%

Scatola ombra

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

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

2. Aggiungi la classe CSS al titolo

Apri il modulo di testo n. 1 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'ID CSS al tag H1

All'interno dell'H1 aggiungi un ID CSS personalizzato.

• ID="headlineCopy"

3. Aggiungi lettere e biblioteche di anime

Aggiungi modulo codice alla colonna

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

Aggiungi entrambe le librerie

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

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

4. Aggiungi codice di animazione

Animazione per lettera a livello individuale

Nell'ultima parte di questo tutorial, aggiungeremo il codice di animazione che fa parte delle librerie letterize.js e anime.js. Per ottenere l'effetto che hai potuto vedere nell'anteprima di questo post, applicheremo due tipi di animazioni. La prima animazione viene applicata a ciascuna lettera singolarmente e consecutivamente. Ciò si ottiene con la libreria letterize.js. Questa libreria, in combinazione con la prima parte del codice sottostante, posiziona ogni lettera nella tua copia all'interno di un intervallo separato. Questi intervalli verranno quindi presi di mira separatamente durante il processo di animazione. Assicurati di inserire il codice di seguito tra i tag di script.

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
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 di aggiunta rappresenta un'animazione in una sequenza temporale di animazioni. Queste animazioni si applicano a ogni lettera a livello individuale. Puoi modificare queste funzioni di aggiunta come preferisci, aggiungerne di nuove o rimuovere quelle attuali, 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 scoprire di più sulle proprietà e su come vengono utilizzate negli esempi di documentazione di anime.js. In questo tutorial, abbiamo aggiunto intenzionalmente più animazioni per mostrare come funziona la timeline, ma probabilmente vorrai scegliere qualcosa di più sottile o più breve per i tuoi progetti.

Animazione per la frase

Dopo aver aggiunto la prima parte dell'animazione, che prende di mira ciascuna lettera individualmente, passeremo alla seconda parte della nostra animazione. Questa parte è destinata all'intera copia nel suo insieme. L'approccio all'animazione è lo stesso di sopra; stiamo posizionando l'intero modulo all'interno di un'animazione della timeline. Ogni funzione di aggiunta rappresenta un'animazione diversa all'interno di quella timeline. È possibile modificare queste funzioni di aggiunta, aggiungerne di nuove o rimuovere quelle attuali. 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: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

Aggiungi CSS personalizzato per Span

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

#headlineCopy span {
display: inline-block;
}

Anteprima

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

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare animazioni di testo avanzate per il tuo titolo. Abbiamo creato l'intero design all'interno di Divi e combinato il framework con le librerie letterize.js e anime.js. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.