I contatori di numeri animati sono popolari sul web come un modo per visualizzare i numeri. dati per evidenziare il valore di servizi, casi di studio, ecc. Divi dispone di un modulo contatore di numeri dedicato che può essere utilizzato per generare facilmente contatori di numeri animati.
Tuttavia, in questo tutorial, ti mostreremo come creare contatori numerici che si animano durante lo scorrimento Divi. Utilizzando le opzioni di posizione e gli effetti di scorrimento di Divi, progetteremo un layout semplice per visualizzare una data con numeri scorrevoli.
Parte 1: creazione della sezione del titolo
In questa prima parte, creeremo un titolo semplice per il layout.
Innanzitutto, aggiungi una riga di una colonna alla sezione.
Quindi aggiungi un nuovo modulo di testo alla riga.
Aggiorna il contenuto del modulo testuale con i seguenti elementi:
Salva la data
Quindi aggiorna lo stile del testo dell'intestazione come segue:
- Titolo intestazione 2: Prata
- Voce 2 Dimensioni del testo: 130 px (desktop), 70 px (tablet), 40 px (telefono)
Parte 2: Creazione di contatori con animazione a scorrimento
In questa parte successiva, creeremo i tre contatori che animeranno i numeri a scorrimento finché non smetteranno di visualizzare una data (mese, giorno e anno). Ogni contatore sarà costruito utilizzando un totale di 5 moduli di testo e un modulo separatore. Il primo modulo di testo fungerà da etichetta del contatore (cioè mese, giorno, anno). I successivi quattro moduli di testo conterranno ciascuno un numero diverso (in corso) che verrà animato durante lo scorrimento utilizzando gli offset del movimento verticale in Divi. Il modulo di separazione inferiore aiuterà a nascondere l'overflow di numeri.
Ecco come.
Aggiungi una seconda riga
Sotto la riga esistente, aggiungi un'altra riga a una colonna.
Impostazioni linea
Prima di aggiungere un modulo, aggiorna i parametri di riga come segue:
- Larghezza della grondaia: 1
- Imbottitura: 0px alta, 0px bassa
Parametri della colonna
Quindi aprire le impostazioni della colonna e aggiornare il riempimento come segue:
- Imbottitura (scrivania): 100px bassa
- Imbottitura (tablet e telefono): 0px basso
Aggiungi un modulo di testo
Quindi aggiungere un modulo di testo alla colonna.
Contenuto / etichetta
per contenuto dal modulo di testo aggiungere la parola “mese”.
Impostazioni di progettazione del testo
Una volta che il contenuto aggiunto, aggiorna le impostazioni di progettazione come segue:
- Colore di sfondo: #ffffff
- Carattere testo: parla
- Dimensione del testo: 40px
- Altezza della riga di testo: 2em
- Larghezza: 100%
- Imbottitura: 20 pixel nella parte superiore, 20 pixel nella parte inferiore, 20 pixel a sinistra, 20 pixel a destra
- Larghezza del bordo inferiore: 5px
- Colore del bordo inferiore: #eeeeee
Posizione
Quindi, nella scheda Avanzate, aggiorna le opzioni di posizione come segue:
- Posizione: relativa
- Indice Z 1
Aggiungi un modulo di testo per il primo numero
Una volta che il primo modulo di testo è a posto, possiamo iniziare ad aggiungere i numeri che si sposteranno sullo scorrimento. Per aggiungere il primo numero, aggiungi un nuovo modulo di testo sotto il modulo di testo "Mese" esistente.
Aggiungi numero / contenuto
Quindi aggiornare l'etichetta del modulo di testo per leggere "num1" per un riferimento più semplice. Quindi aggiornare il contenuto con il numero "01".
Impostazioni di progettazione per il numero
Nella scheda progettazione, aggiorna quanto segue:
- Carattere testo: Prata
- Testo Colore testo: # 8ab2d3
- Testo Dimensione del testo: 70px
- Spaziatura lettere di testo: 4px
- Altezza della riga di testo: 1.5em
- Imbottitura: 20 px a sinistra
NOTA: i numeri hanno una dimensione del testo di 70px e un'altezza della linea di 1.5em, il che significa che l'altezza totale del modulo di testo sarà vicina a 100px. Questo è importante da tenere a mente ogni volta che iniziamo ad aggiungere gli offset del movimento verticale. Ad esempio, l'aggiunta di un offset verticale di "1" al modulo di testo sposterà il modulo di testo esattamente 100px, che è l'altezza del modulo di testo.
Effetti di scorrimento per il primo numero
Aggiungi i seguenti effetti di scorrimento al modulo di testo.
Nella scheda Movimento verticale, aggiorna quanto segue:
- Abilita movimento verticale: SÌ
- Avvia offset: 1 (al 10%)
- Offset medio: 0 (al 20%)
- Fine offset: -1 (all'30%)
Nella scheda Fade In e Fade Out, aggiorna quanto segue:
- Attiva dissolvenza in entrata e in uscita: SÌ
- Opacità iniziale: 0% (al 10%)
- Opacità media: 100% (al 20%)
- Opacità finale: 0% (al 30%)
Assicurati di impostare il trigger per l'effetto di movimento nella parte superiore della clip:
- Trigger effetto movimento: elemento superiore
Crea il modulo di testo per il secondo numero
Duplica il primo numero
Una volta creato il primo numero, duplicalo per creare il secondo modulo di testo numerico. Quindi aggiorna l'etichetta nella vista dei livelli per una migliore consultazione.
Aggiorna numero / contenuto
Apri i parametri del secondo modulo di testo digitale e aggiorna il contenuto con il numero "02".
Posizione di aggiornamento
Quindi aggiornare le opzioni di posizione come segue:
- Posizione: assoluta
- Offset verticale: 126px
Aggiorna effetti di scorrimento
Quindi aggiorna gli effetti di scorrimento come segue:
Nella scheda Movimento verticale, aggiorna quanto segue:
- Avvia offset: 1 (al 20%)
- Offset medio: 0 (al 30%)
- Fine offset: -1 (all'40%)
Nella scheda Fade In e Fade Out, aggiorna quanto segue:
- Opacità iniziale: 0% (al 20%)
- Opacità media: 100% (al 30%)
- Opacità finale: 0% (al 40%)
Crea un modulo di testo per il terzo numero
Duplica il secondo numero
Per creare il modulo di testo per il terzo numero, duplicare il modulo di testo per il secondo numero.
Aggiorna numero / contenuto
Aggiorna il contenuto con il numero "03".
Aggiorna effetti di scorrimento
Quindi aggiorna gli effetti di scorrimento:
Nella scheda Movimento verticale, aggiorna quanto segue:
- Avvia offset: 1 (al 30%)
- Offset medio: 0 (al 40%)
- Fine offset: -1 (all'50%)
Nella scheda Fade In e Fade Out, aggiorna quanto segue:
- Opacità iniziale: 0% (al 30%)
- Opacità media: 100% (al 40%)
- Opacità finale: 0% (al 50%)
Crea un modulo di testo per il quarto numero
Terzo problema duplicato
Per creare il quarto numero per il contatore di scorrimento, duplicare il modulo di testo per il terzo numero.
Aggiorna numero / contenuto
Aggiorna il contenuto con il numero "04".
Aggiorna effetti di scorrimento
Quindi aggiorna gli effetti di scorrimento:
Nella scheda Movimento verticale, aggiorna quanto segue:
- Avvia offset: 1 (al 40%)
- Offset medio: 0 (al 50%)
- Fine offset: 0 (al 60%)
Nella scheda Fade In e Fade Out, aggiorna quanto segue:
- Opacità iniziale: 0% (al 40%)
- Opacità media: 100% (al 50%)
- Opacità finale: 100% (al 60%)
Aggiungi un separatore inferiore
Sotto l'ultimo modulo di testo, aggiungi un nuovo modulo separatore. Questo verrà utilizzato per nascondere l'overflow inferiore del testo scorrevole in vista.
Quindi selezionare NO per visualizzare il separatore.
Impostazioni di stile e posizione
Aggiorna il design del separatore come segue:
- Colore di sfondo: #ffffff
- Larghezza: 100%
- Altezza: 100px
- Larghezza del bordo superiore: 5 px
Nella scheda Avanzate, aggiorna quanto segue:
- Disattiva su: telefono e tablet
- Posizione: assoluta
- Posizione: in basso a sinistra
IMPORTANTE: lo spazio che occuperà il separatore è stato creato in precedenza aggiungendo un riempimento inferiore di 100 pixel alla colonna. Se non aggiungi questo riempimento, il separatore si sovrapporrà alle cifre.
Creazione di contatori e colonne aggiuntivi
Duplica la colonna 1 e aggiorna il contenuto
Per creare un nuovo contatore, duplicare la colonna 1. Ciò creerà una seconda colonna con tutti gli elementi in posizione automaticamente.
Quindi tutto ciò che devi fare è aggiornare il contenuto di tutti i moduli di testo con nuovi testi e numeri.
Duplica la colonna 2 e aggiorna il contenuto
Dopo aver aggiornato il contenuto di tutti i moduli di testo nella colonna 2, duplicare la colonna 2 per creare un terzo contatore per l'anno. Quindi aggiorna il contenuto di ogni modulo di testo secondo necessità.
Risultato finale
Ecco il risultato finale.
Altre risorse
- Come utilizzare il modulo contatore numeri su Divi
- Come utilizzare il modulo contatore circolare su Divi
- Come creare banconi circolari che prendono vita su Divi
Considerazioni finali
Questo semplice layout con contatori numerici animati a scorrimento dovrebbe essere utile per la visualizzazione dati digitale in un modo nuovo e unico. Sentiti libero di abbandonare il concetto di data e usa i contatori per qualsiasi cosa tu possa immaginare!
