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.

Înregistrați un modul de secțiune divi

Apoi adăugați un nou modul text la linie.

Actualizați cuprins a modulului de text cu următoarele elemente:

Salvează data
Salvați data 1

Apoi actualizați stilul textului antetului după cum urmează:

  • Rubrica 2 Font: Prata
  • Articol 2 Dimensiunea textului: 130px (desktop), 70px (tabletă), 40px (telefon)
Modificarea titlului Divi

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ă.

Adăugați un nou modul divi

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ă
Configurare frontieră Divi

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
Configurarea spațiului coloanei Divi

Adăugați un modul de text

Apoi adăugați un modul de text la coloană.

Adăugați un modul de text divi

Conținut / etichetă

pentru cuprins din modulul de text, adăugați cuvântul „lună”.

Specificați luna divi

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
Modulul wordpress Prata

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 un modul de text pentru povestitor

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”.

Adăugați modul de număr divi

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
Configurarea culorii Divi

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
Modul de animație de configurare divi text

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ță.

Modul text duplicat divi 1

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”.

Salvați numărul 2 divi

Actualizare poziție

Apoi actualizați opțiunile de poziție după cum urmează:

  • Poziție: Absolut
  • Offset vertical: 126px
Modificarea poziției modulului de text divi

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%)
Divi efect de derulare a animației

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.

Duplicați numărul modulului de text 3

Număr / conținut actualizare

Actualizați conținutul cu numărul "03".

Modificați modulul de text divi

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%)
Editați animația modulului text

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.

Modul text duplicat divi numărul 4

Număr / conținut actualizare

Actualizați conținutul cu numărul "04".

Configurați valoarea modulului de text divi

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%)
Modul de configurare animație 4 divi

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.

Adăugați modul separator divi

Apoi selectați NU pentru a afișa separatorul.

Nu afișați separatorul divi

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.

Duplicați întreaga coloană divi

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

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!