Animerte talltellere er populære på nettet som en måte å vise tall på. données for å synliggjøre verdien av tjenester, casestudier, etc. Divi har en dedikert talltellermodul som kan brukes til å enkelt generere animerte talltellere.
I denne opplæringen skal vi imidlertid vise deg hvordan du lager numeriske tellere som animerer ved rulling ved hjelp av Divi. Bruke posisjonsalternativene og rulleeffektene til Divi, vil vi designe en enkel layout for å vise en dato med rullende tall.
Del 1: Opprette tittelseksjonen
I denne første delen vil vi lage en enkel tittel for oppsettet.
Først legger du til en rad med en kolonne i seksjonen.
Legg deretter til en ny tekstmodul på linjen.
Oppdater innhold av tekstmodulen med følgende elementer:
Lagre datoen
Oppdater deretter topptekststil som følger:
- Overskrift 2 Font: Prata
- Element 2 Tekststørrelse: 130px (stasjonær), 70px (nettbrett), 40px (telefon)
Del 2: Opprettelse av tellere med rulleanimasjon
I denne neste delen oppretter vi de tre tellerne som vil animere rulletallene til de stopper for å vise en dato (måned, dag og år). Hver teller vil bli bygget med totalt 5 tekstmoduler og en skillemodul. Den første tekstmodulen vil fungere som merkelapp for telleren (dvs. måned, dag, år). De neste fire tekstmodulene vil hver inneholde et annet tall (pågår) som vil bli animert når du blar ved hjelp av de vertikale bevegelsesforskyvningene i Divi. Den nedre separasjonsmodulen vil bidra til å skjule overløp av tall.
Slik gjør du det.
Legg til en andre linje
Legg til en ny rad i en kolonne under den eksisterende raden.
Linjeinnstillinger
Før du legger til en modul, oppdaterer du radparametrene som følger:
- Rennesteinsbredde: 1
- Polstring: 0px høy, 0px lav
Kolonneparametere
Åpne deretter kolonneinnstillingene og oppdater fyllet som følger:
- Polstring (skrivebord): 100px lav
- Polstring (nettbrett og telefon): 0px lavt
Legg til en tekstmodul
Legg deretter til en tekstmodul i kolonnen.
Innhold / etikett
for innhold fra tekstmodulen legger du til ordet "måned".
Innstillinger for tekstdesign
Når innhold lagt til, oppdater designinnstillingene som følger:
- Bakgrunnsfarge: #ffffff
- Tekst font: Snakk
- Tekststørrelse: 40px
- Høyde på tekstlinjen: 2em
- Bredde: 100%
- Polstring: 20 piksler øverst, 20 piksler nederst, 20 piksler til venstre, 20 piksler til høyre
- Nederste kantbredde: 5px
- Farge på bunnen: #eeeeee
Stilling
Deretter oppdaterer du posisjonsalternativene under den avanserte fanen som følger:
- Stilling: Relativ
- Z-indeks 1
Legg til en tekstmodul for den første utgaven
Når den første tekstmodulen er på plass, kan vi begynne å legge til tallene som vil bevege seg på rullen. For å legge til det første tallet, legg til en ny tekstmodul under den eksisterende "Måned" -tekstmodulen.
Legg til nummer / innhold
Oppdater deretter tekstmoduletiketten for å lese “num1” for enklere referanse. Oppdater deretter innholdet med nummeret “01”.
Designinnstillinger for nummer
Oppdater følgende under designfanen:
- Tekst Font: Prata
- Tekst Tekstfarge: # 8ab2d3
- Tekst Tekststørrelse: 70px
- Avstand mellom tekstbokstaver: 4px
- Tekstlinje høyde: 1.5 em
- Polstring: 20px igjen
MERKNAD: Tallene har en tekststørrelse på 70px og en linjehøyde på 1.5 em, noe som betyr at den totale høyden på tekstmodulen vil være nær 100px. Dette er viktig å huske på når vi begynner å legge vertikale bevegelsesforskyvninger. Hvis du for eksempel legger til en vertikal forskyvning av “1” til tekstmodulen, flyttes tekstmodulen nøyaktig 100px, som er høyden på tekstmodulen.
Rulleeffekter for første nummer
Legg til følgende rulleeffekter i tekstmodulen.
Oppdater følgende under kategorien Vertikal bevegelse:
- Aktiver vertikal bevegelse: JA
- Start offset: 1 (ved 10%)
- Gjennomsnittlig forskyvning: 0 (ved 20%)
- Sluttforskyvning: -1 (ved 30%)
I kategorien Fade In og Fade Out oppdaterer du følgende:
- Aktiver fade inn og ut: JA
- Opprinnelig opacitet: 0% (ved 10%)
- Gjennomsnittlig opacitet: 100% (ved 20%)
- Endelig opacitet: 0% (til 30%)
Sørg for å sette utløseren for bevegelseseffekten øverst på klippet:
- Motion Effect Trigger: Element Top
Lag tekstmodulen for det andre nummeret
Dupliser det første tallet
Når det første tallet er opprettet, dupliser det for å opprette den andre nummertekstmodulen. Oppdater deretter etiketten i lagvisningen for bedre referanse.
Oppdater nummer / innhold
Åpne parametrene for den andre digitale tekstmodulen og oppdater innholdet med nummeret "02".
Oppdater posisjon
Oppdater deretter posisjonsalternativene som følger:
- Posisjon: Absolutt
- Vertikal forskyvning: 126px
Oppdater rulleeffekter
Oppdater deretter rulleeffektene som følger:
Oppdater følgende i kategorien Vertikal bevegelse:
- Start offset: 1 (ved 20%)
- Gjennomsnittlig forskyvning: 0 (ved 30%)
- Sluttforskyvning: -1 (ved 40%)
I kategorien Fade In og Fade Out oppdaterer du følgende:
- Opprinnelig opacitet: 0% (ved 20%)
- Gjennomsnittlig opacitet: 100% (ved 30%)
- Endelig opacitet: 0% (til 40%)
Lag en tekstmodul for den tredje utgaven
Dupliser det andre tallet
Hvis du vil lage tekstmodulen for det tredje nummeret, dupliserer du tekstmodulen for det andre nummeret.
Oppdater nummer / innhold
Oppdater innholdet med nummeret "03".
Oppdater rulleeffekter
Oppdater deretter rulleeffektene:
Oppdater følgende i kategorien Vertikal bevegelse:
- Start offset: 1 (ved 30%)
- Gjennomsnittlig forskyvning: 0 (ved 40%)
- Sluttforskyvning: -1 (ved 50%)
I kategorien Fade In og Fade Out oppdaterer du følgende:
- Opprinnelig opacitet: 0% (ved 30%)
- Gjennomsnittlig opacitet: 100% (ved 40%)
- Endelig opacitet: 0% (til 50%)
Lag en tekstmodul for fjerde utgave
Tredje duplikatutgave
Hvis du vil opprette det fjerde tallet for bladetelleren, dupliserer du tekstmodulen for det tredje nummeret.
Oppdater nummer / innhold
Oppdater innholdet med nummeret "04".
Oppdater rulleeffekter
Oppdater deretter rulleeffektene:
Oppdater følgende i kategorien Vertikal bevegelse:
- Start offset: 1 (ved 40%)
- Gjennomsnittlig forskyvning: 0 (ved 50%)
- Sluttforskyvning: 0 (ved 60%)
I kategorien Fade In og Fade Out oppdaterer du følgende:
- Opprinnelig opacitet: 0% (ved 40%)
- Gjennomsnittlig opacitet: 100% (ved 50%)
- Endelig opacitet: 100% (til 60%)
Legg til en nedre separator
Legg til en ny skillemodul under den siste tekstmodulen. Dette vil bli brukt til å skjule det nederste overløpet av rulleteksten i visningen.
Velg deretter NO for å vise separatoren.
Stil- og posisjonsinnstillinger
Oppdater skilletegningen slik:
- Bakgrunnsfarge: #ffffff
- Bredde: 100%
- Høyde: 100px
- Øvre kantbredde: 5px
I kategorien Avansert oppdaterer du følgende:
- Deaktiver på: telefon og nettbrett
- Posisjon: Absolutt
- Sted: nederst til venstre
VIKTIG: Plassen som skilletegn vil oppta ble opprettet tidligere ved å legge til 100 piksler bunnfyll i kolonnen. Hvis du ikke legger til denne polstringen, vil skilletegnene overlappe sifrene.
Opprettelse av flere tellere og kolonner
Dupliser kolonne 1 og oppdater innholdet
Du oppretter en ny teller ved å duplisere kolonne 1. Dette vil opprette en andre kolonne med alle elementene på plass automatisk.
Så alt du trenger å gjøre er å oppdatere innholdet i alle tekstmodulene med nye tekster og nummer.
Dupliser kolonne 2 og oppdater innholdet
Når innholdet i alle tekstmodulene er oppdatert i kolonne 2, dupliser kolonne 2 for å opprette en tredje teller for året. Oppdater deretter innholdet i hver tekstmodul etter behov.
Endelig resultat
Her er det endelige resultatet.
Andre ressurser
- Slik bruker du telleren-modulen på Divi
- Slik bruker du den sirkulære tellermodulen på Divi
- Hvordan lage sirkulære tellere som blir levende på Divi
avslutt~~POS=TRUNC tanker
Denne enkle layouten med rullende animerte talltellere bør være nyttig for visning données digital på en ny og unik måte. Gjør deg fri fra datokonseptet og bruk tellerne til alt du kan drømme om!
