Contoarele de numere animate sunt populare pe web ca modalitate de a afișa numere. données digital pentru a evidenția valoarea serviciilor, studii de caz etc. Divi are un modul dedicat contor de numere care poate fi folosit pentru a genera cu ușurință contoare de numere animate.
Cu toate acestea, în acest tutorial, vă vom arăta cum să creați contoare numerice care se anime pe defilare folosind Divi. Utilizarea opțiunilor de poziție și a efectelor de defilare ale Divi, vom proiecta un aspect simplu pentru a afișa o dată cu numere de defilare.
Partea 1: Crearea secțiunii titlu
În această primă parte, vom crea un titlu simplu pentru aspect.
Mai întâi, adăugați un rând dintr-o coloană la secțiune.
Apoi adăugați un nou modul text la linie.
Actualizați cuprins a modulului de text cu următoarele elemente:
Salvează data
Apoi actualizați stilul textului antetului după cum urmează:
- Rubrica 2 Font: Prata
- Articol 2 Dimensiunea textului: 130px (desktop), 70px (tabletă), 40px (telefon)
Partea 2: Crearea de contoare cu animație de defilare
În această parte următoare, vom crea cele trei contoare care vor anima numerele care derulează până când se opresc pentru a afișa o dată (lună, zi și an). Fiecare contor va fi construit folosind un total de 5 module text și un modul separator. Primul modul de text va servi ca etichetă a contorului (adică lună, zi, an). Următoarele patru module de text vor conține fiecare un număr diferit (în curs de desfășurare) care va fi animat la derulare utilizând deplasările de mișcare verticală din Divi. Modulul de separare inferior va ajuta la ascunderea depășirii numerelor.
Iată cum.
Adăugați o a doua linie
Sub rândul existent, adăugați un alt rând la o coloană.
Setări de linie
Înainte de a adăuga un modul, actualizați parametrii rândului după cum urmează:
- Lățimea jgheabului: 1
- Garnitură: 0px înaltă, 0px mică
Parametrii coloanei
Apoi, deschideți setările coloanei și actualizați completarea după cum urmează:
- Garnitură (birou): 100px redusă
- Căptușire (tabletă și telefon): 0px scăzut
Adăugați un modul de text
Apoi adăugați un modul de text la coloană.
Conținut / etichetă
pentru cuprins din modulul de text, adăugați cuvântul „lună”.
Setări de proiectare text
Odată ce cuprins adăugat, actualizați setările de design după cum urmează:
- Culoare fundal: #ffffff
- Font text: Discuție
- Dimensiunea textului: 40px
- Înălțimea liniei de text: 2em
- Lățime: 100%
- Padding: 20 pixeli în partea de sus, 20 pixeli în partea de jos, 20 pixeli în stânga, 20 pixeli în dreapta
- Lățimea marginii inferioare: 5px
- Culoarea marginii de jos: #eeeeee
Poziţie
Apoi, sub fila avansată, actualizați opțiunile de poziție după cum urmează:
- Poziție: relativă
- Indicele Z 1
Adăugați un modul text pentru prima problemă
Odată ce primul modul de text este la locul său, putem începe să adăugăm numerele care se vor deplasa pe scroll. Pentru a adăuga primul număr, adăugați un nou modul de text sub modulul de text existent „Luna”.
Adăugați număr / conținut
Apoi actualizați eticheta modulului text pentru a citi „num1” pentru o referință mai ușoară. Apoi actualizați conținutul cu numărul „01”.
Setări de proiectare pentru număr
Sub fila design, actualizați următoarele:
- Font de text: Prata
- Culoare text text: # 8ab2d3
- Dimensiunea textului text: 70px
- Spațiu de scrisori de text: 4px
- Înălțimea liniei de text: 1.5em
- Căptușire: 20px stânga
NOTĂ: Numerele au o dimensiune a textului de 70px și o înălțime a liniei de 1.5em, ceea ce înseamnă că înălțimea totală a modulului de text va fi aproape de 100px. Acest lucru este important să țineți cont de fiecare dată când începem să adăugăm compensări de mișcare verticală. De exemplu, adăugarea unei compensări verticale de „1” la modulul text va muta modulul text exact 100px, care este înălțimea modulului text.
Efecte de derulare pentru primul număr
Adăugați următoarele efecte de derulare la modulul text.
Sub fila Mișcare verticală, actualizați următoarele:
- Activați mișcarea verticală: DA
- Start offset: 1 (la 10%)
- Offset mediu: 0 (la 20%)
- Decalaj final: -1 (la 30%)
În fila Fade In și Fade Out, actualizați următoarele:
- Activați decolorarea și intrarea: DA
- Opacitate inițială: 0% (la 10%)
- Opacitate medie: 100% (la 20%)
- Opacitatea finală: 0% (până la 30%)
Asigurați-vă că setați declanșatorul efectului de mișcare în partea de sus a clipului:
- Declanșatorul efectului de mișcare: elementul de sus
Creați modulul text pentru al doilea număr
Duplică primul număr
Odată ce primul număr este creat, copiați-l pentru a crea modulul text al doilea număr. Apoi actualizați eticheta în vizualizarea straturilor pentru o mai bună referință.
Număr / conținut actualizare
Deschideți parametrii celui de-al doilea modul de text digital și actualizați conținutul cu numărul „02”.
Actualizare poziție
Apoi actualizați opțiunile de poziție după cum urmează:
- Poziție: Absolut
- Offset vertical: 126px
Actualizați efectele de derulare
Apoi actualizați efectele de defilare după cum urmează:
În fila Mișcare verticală, actualizați următoarele:
- Start offset: 1 (la 20%)
- Offset mediu: 0 (la 30%)
- Decalaj final: -1 (la 40%)
În fila Fade In și Fade Out, actualizați următoarele:
- Opacitate inițială: 0% (la 20%)
- Opacitate medie: 100% (la 30%)
- Opacitatea finală: 0% (până la 40%)
Creați un modul text pentru a treia problemă
Duplică al doilea număr
Pentru a crea modulul de text pentru al treilea număr, dublați modulul text pentru al doilea număr.
Număr / conținut actualizare
Actualizați conținutul cu numărul "03".
Actualizați efectele de derulare
Apoi actualizați efectele de derulare:
În fila Mișcare verticală, actualizați următoarele:
- Start offset: 1 (la 30%)
- Offset mediu: 0 (la 40%)
- Decalaj final: -1 (la 50%)
În fila Fade In și Fade Out, actualizați următoarele:
- Opacitate inițială: 0% (la 30%)
- Opacitate medie: 100% (la 40%)
- Opacitatea finală: 0% (până la 50%)
Creați un modul text pentru a patra problemă
A treia problemă duplicată
Pentru a crea al patrulea număr pentru contorul de derulare, dublați modulul text pentru al treilea număr.
Număr / conținut actualizare
Actualizați conținutul cu numărul "04".
Actualizați efectele de derulare
Apoi actualizați efectele de derulare:
În fila Mișcare verticală, actualizați următoarele:
- Start offset: 1 (la 40%)
- Offset mediu: 0 (la 50%)
- Decalaj final: 0 (la 60%)
În fila Fade In și Fade Out, actualizați următoarele:
- Opacitate inițială: 0% (la 40%)
- Opacitate medie: 100% (la 50%)
- Opacitatea finală: 100% (până la 60%)
Adăugați un separator inferior
Sub ultimul modul text, adăugați un nou modul separator. Aceasta va fi utilizată pentru a ascunde revărsarea de jos a textului derulant în vizualizare.
Apoi selectați NU pentru a afișa separatorul.
Setări de stil și poziție
Actualizați designul separatorului după cum urmează:
- Culoare fundal: #ffffff
- Lățime: 100%
- Înălțime: 100px
- Lățimea marginii superioare: 5px
În fila Advanced, actualizați următoarele:
- Dezactivați pe: telefon și tabletă
- Poziție: Absolut
- Locație: stânga jos
IMPORTANT: Spațiul pe care îl va ocupa separatorul a fost creat mai devreme prin adăugarea a 100 de pixeli de umplere de jos în coloană. Dacă nu adăugați această umplutură, separatorul va suprapune cifrele.
Crearea de contoare și coloane suplimentare
Duplică coloana 1 și actualizează conținutul
Pentru a crea un contor nou, dublați coloana 1. Aceasta va crea o a doua coloană cu toate elementele în loc automat.
Atunci tot ce trebuie să faceți este să actualizați conținutul tuturor modulelor de text cu noi texte și numere.
Duplică coloana 2 și actualizează conținutul
Odată ce conținutul tuturor modulelor de text este actualizat în coloana 2, copiați coloana 2 pentru a crea un al treilea contor pentru an. Apoi actualizați conținutul fiecărui modul de text după cum este necesar.
Rezultat final
Iată rezultatul final.
Alte resurse
- Cum se utilizează modulul contorului de numere de pe Divi
- Cum se utilizează modulul de contor circular pe Divi
- Cum să creați contoare circulare care prind viață pe Divi
Ultimele gânduri
Acest aspect simplu cu contoare de numere animate defilante ar trebui să fie util pentru afișare données digital într-un mod nou și unic. Simțiți-vă liber să renunțați la conceptul de întâlnire și să folosiți contoarele pentru orice puteți visa!