Animirani brojači brojeva popularni su na webu kao način prikaza brojeva. données digitalno za isticanje vrijednosti usluga, studije slučaja itd. Divi ima poseban modul brojača brojeva koji se može koristiti za jednostavno generiranje animiranih brojača brojeva.
Međutim, u ovom vodiču pokazat ćemo vam kako stvoriti numeričke brojače koji animiraju pri pomicanju pomoću Divi. Korištenje opcija položaja i efekata pomicanja Divi, dizajnirat ćemo jednostavan izgled za prikaz datuma s pomičnim brojevima.
Dio 1: Izrada odjeljka naslova
U ovom prvom dijelu stvorit ćemo jednostavan naslov za izgled.
Prvo dodajte redak od jednog stupca u odjeljak.
Zatim u redak dodajte novi tekstualni modul.
Ažurirajte sadržaj tekstualnog modula sa sljedećim elementima:
Spremite datum
Zatim ažurirajte stil teksta zaglavlja na sljedeći način:
- Naslov 2 Krstionica: Prata
- Stavka 2 Veličina teksta: 130px (radna površina), 70px (tablet), 40px (telefon)
Dio 2: Izrada brojila s animacijom pomicanja
U ovom sljedećem dijelu stvorit ćemo tri brojača koji će animirati brojeve za pomicanje dok se ne zaustave kako bi se prikazao datum (mjesec, dan i godina). Svaki brojač bit će izgrađen pomoću ukupno 5 modula teksta i modula za razdvajanje. Prvi tekstualni modul služit će kao oznaka brojača (tj. Mjesec, dan, godina). Sljedeća četiri modula teksta sadržavat će različiti broj (u tijeku) koji će se animirati na pomicanju pomoću pomicanja vertikalnog pomicanja u Divi. Donji modul za odvajanje pomoći će sakriti preljev brojeva.
Evo kako.
Dodajte drugi redak
Ispod postojećeg retka dodajte još jedan redak u stupac.
Postavke linije
Prije dodavanja modula, ažurirajte parametre retka na sljedeći način:
- Širina oluka: 1
- Padding: 0px visoko, 0px low
Parametri stupca
Zatim otvorite postavke stupca i ažurirajte ispun na sljedeći način:
- Podstava (radni stol): 100 px
- Padding (tablet i telefon): 0px low
Dodajte tekstualni modul
Zatim dodajte tekstualni modul u stupac.
Sadržaj / oznaka
Za sadržaj iz tekstualnog modula dodajte riječ “mjesec”.
Postavke dizajna teksta
Jednom sadržaj dodano, ažurirajte postavke dizajna na sljedeći način:
- Boja pozadine: #ffffff
- Font teksta: Razgovarajte
- Veličina teksta: 40px
- Visina retka teksta: 2em
- Širina: 100%
- Padding: 20 piksela na vrhu, 20 piksela na dnu, 20 piksela na lijevoj strani, 20 piksela s desne strane
- Širina donje granice: 5px
- Boja donje granice: #eeeeee
Položaj
Zatim na kartici Napredno ažurirajte opcije položaja kako slijedi:
- Pozicija: Relativno
- Z indeks 1
Prvom broju dodajte tekstualni modul
Jednom kad je postavljen prvi modul teksta, možemo početi dodavati brojeve koji će se pomicati na pomicanju. Da biste dodali prvi broj, dodajte novi tekstualni modul u postojeći modul za tekst "Mjesec".
Dodajte broj / sadržaj
Zatim ažurirajte naljepnicu modula teksta da biste pročitali "num1" radi lakšeg snalaženja. Zatim ažurirajte sadržaj brojem "01".
Postavke dizajna za broj
Na kartici dizajna ažurirajte sljedeće:
- Tekst teksta: Prata
- Boja teksta teksta: # 8ab2d3
- Veličina teksta teksta: 70px
- Razmak slova u tekstu: 4 px
- Visina retka teksta: 1.5em
- Padding: 20px lijevo
NAPOMENA: Brojevi imaju tekst veličine 70 px i visinu retka 1.5em, što znači da će ukupna visina tekstualnog modula biti blizu 100 px. To je važno imati na umu kad god počnemo dodavati odstupanja od vertikalnog kretanja. Na primjer, dodavanjem vertikalnog pomaka od "1" u tekstualni modul pomaknut će se tekstni modul točno 100 px, što je visina tekstualnog modula.
Pomaknite se efekti za prvi broj
U tekstualni modul dodajte sljedeće efekte pomicanja.
Na kartici Vertical Motion ažurirajte sljedeće:
- Omogući vertikalno kretanje: DA
- Početak pomaka: 1 (na 10%)
- Prosječni odmak: 0 (na 20%)
- Završno odstupanje: -1 (pri 30%)
Na kartici Fade In i Fade Out ažurirajte sljedeće:
- Uključite fade unutra i van: DA
- Početna neprozirnost: 0% (kod 10%)
- Prosječna neprozirnost: 100% (kod 20%)
- Krajnja neprozirnost: 0% (do 30%)
Obavezno postavite okidač za efekt pokreta na vrhu isječka:
- Okidač efekta pokreta: vrh elementa
Napravite tekstualni modul za drugi broj
Umnožavanje prvog broja
Jednom kada je stvoren prvi broj, duplicirajte ga da biste stvorili tekstualni modul drugog broja. Zatim ažurirajte naljepnicu u prikazu slojeva radi bolje reference.
Ažurirajte broj / sadržaj
Otvorite parametre drugog digitalnog modula teksta i ažurirajte sadržaj brojem "02".
Ažurirajte položaj
Zatim ažurirajte opcije položaja na sljedeći način:
- Pozicija: Apsolutno
- Okomiti pomak: 126px
Ažurirajte efekte pomicanja
Zatim ažurirajte efekte pomicanja na sljedeći način:
Na kartici Vertical Motion ažurirajte sljedeće:
- Početak pomaka: 1 (na 20%)
- Prosječni odmak: 0 (na 30%)
- Završno odstupanje: -1 (pri 40%)
Na kartici Fade In i Fade Out ažurirajte sljedeće:
- Početna neprozirnost: 0% (kod 20%)
- Prosječna neprozirnost: 100% (kod 30%)
- Krajnja neprozirnost: 0% (do 40%)
Izradite tekstualni modul za treći broj
Umnožavanje drugog broja
Da biste stvorili tekstualni modul za treći broj, duplicirajte tekstualni modul za drugi broj.
Ažurirajte broj / sadržaj
Ažurirajte sadržaj brojem "03".
Ažurirajte efekte pomicanja
Zatim ažurirajte efekte pomicanja:
Na kartici Vertical Motion ažurirajte sljedeće:
- Početak pomaka: 1 (na 30%)
- Prosječni odmak: 0 (na 40%)
- Završno odstupanje: -1 (pri 50%)
Na kartici Fade In i Fade Out ažurirajte sljedeće:
- Početna neprozirnost: 0% (kod 30%)
- Prosječna neprozirnost: 100% (kod 40%)
- Krajnja neprozirnost: 0% (do 50%)
Za četvrti broj izradite tekstualni modul
Treće izdanje duplikata
Da biste stvorili četvrti broj brojača za pomicanje, duplicirajte tekstualni modul za treći broj.
Ažurirajte broj / sadržaj
Ažurirajte sadržaj brojem "04".
Ažurirajte efekte pomicanja
Zatim ažurirajte efekte pomicanja:
Na kartici Vertical Motion ažurirajte sljedeće:
- Početak pomaka: 1 (na 40%)
- Prosječni odmak: 0 (na 50%)
- Odstupanje kraja: 0 (pri 60%)
Na kartici Fade In i Fade Out ažurirajte sljedeće:
- Početna neprozirnost: 0% (kod 40%)
- Prosječna neprozirnost: 100% (kod 50%)
- Krajnja neprozirnost: 100% (do 60%)
Dodajte donji separator
Ispod posljednjeg modula za tekst dodajte novi modul za razdvajanje. To će se koristiti za skrivanje donjeg preljeva pomičnog teksta u prikazu.
Zatim odaberite NE za prikaz separatora.
Postavke stila i položaja
Ažurirajte dizajn separatora na sljedeći način:
- Boja pozadine: #ffffff
- Širina: 100%
- Visina: 100px
- Širina gornje granice: 5px
Na kartici Napredno ažurirajte sljedeće:
- Deaktiviraj na: telefon i tablet
- Pozicija: Apsolutno
- Lokacija: donje lijevo
VAŽNO: Prostor koji će zauzeti separator stvoren je ranije dodavanjem donjeg ispuna od 100 piksela u stupac. Ako ne dodate ovo popunjavanje, separator će se preklapati sa znamenkama.
Izrada dodatnih brojača i stupaca
Umnožavanje stupca 1 i ažuriranje sadržaja
Da biste stvorili novi brojač, duplicirajte stupac 1. Time će se stvoriti drugi stupac sa svim elementima na mjestu automatski.
Tada trebate samo ažurirati sadržaj svih tekstualnih modula novim tekstovima i brojevima.
Umnožavanje stupca 2 i ažuriranje sadržaja
Nakon što se sadržaj svih tekstualnih modula ažurira u stupcu 2, duplicirajte stupac 2 kako biste stvorili treći brojač za godinu. Zatim ažurirajte sadržaj svakog tekstualnog modula po potrebi.
Konačni rezultat
Evo konačnog rezultata.
Ostali resursi
- Kako koristiti modul brojača brojeva na Divi
- Kako koristiti modul kružnog brojača na Divi
- Kako stvoriti kružne brojače koji oživljavaju na Diviju
Završne misli
Ovaj jednostavan izgled s pomičnim animiranim brojačima brojeva trebao bi biti koristan za prikaz données digitalno na nov i jedinstven način. Slobodno odbacite koncept datuma i koristite brojače za sve što zamislite!
