Numëruesit e animuar të numrave janë të njohur në ueb si një mënyrë për të shfaqur numrat. données për të nxjerrë në pah vlerën e shërbimeve, rastet studimore etj. Divi ka një modul të dedikuar numërues numrash i cili mund të përdoret për të gjeneruar lehtësisht numërues të animuar numrash.
Sidoqoftë, në këtë tutorial, ne do t'ju tregojmë se si të krijoni numërues numerikë që animojnë në lëvizje duke përdorur Divi. Përdorimi i opsioneve të pozicionit dhe efektet e lëvizjes së Divi, ne do të hartojmë një plan urbanistik të thjeshtë për të shfaqur një datë me numra lëvizës.
Pjesa 1: Krijimi i seksionit të titullit
Në këtë pjesë të parë, ne do të krijojmë një titull të thjeshtë për paraqitjen.
Së pari, shtoni një rresht të një kolone në seksion.
Pastaj shtoni një modul të ri teksti në rresht.
Përditësoni përmbajtje të modulit të tekstit me elementët e mëposhtëm:
Ruaje datën
Pastaj azhurnoni stilin e tekstit të kokës si më poshtë:
- Titulli 2 Font: Prata
- Pika 2 Madhësia e tekstit: 130px (desktop), 70px (tabletë), 40px (telefon)
Pjesa 2: Krijimi i sporteleve me animacion lëvizës
Në këtë pjesë tjetër, ne do të krijojmë tre sportele që do të gjallërojnë numrat lëvizës derisa të ndalojnë për të shfaqur një datë (muaj, ditë dhe vit). Secili sportel do të ndërtohet duke përdorur gjithsej 5 module të tekstit dhe një modul ndarës. Moduli i parë i tekstit do të shërbejë si etiketë e banakut (d.m.th. muaji, dita, viti). Katër modulet e ardhshme të tekstit do të përmbajnë secili një numër tjetër (në progres) i cili do të animohet gjatë lëvizjes duke përdorur ndërprerjet e lëvizjes vertikale në Divi. Moduli më i ulët i ndarjes do të ndihmojë në fshehjen e tejmbushjes së numrave.
Ja se si.
Shtoni një rresht të dytë
Nën rreshtin ekzistues, shtoni një rresht tjetër në një kolonë.
Cilësimet e linjës
Para se të shtoni një modul, azhurnoni parametrat e rreshtit si më poshtë:
- Gjerësia e zorrës së trashë: 1
- Mbushje: 0px e lartë, e ulët 0px
Parametrat e kolonës
Pastaj hapni cilësimet e kolonës dhe azhurnoni plotësimin si më poshtë:
- Mbushje (tavolinë): 100px ulët
- Mbushje (tabletë dhe telefon): 0 pikë e ulët
Shto një modul teksti
Pastaj shtoni një modul teksti në kolonë.
Përmbajtja / etiketa
Hidh le përmbajtje nga moduli i tekstit, shtoni fjalën "muaj".
Cilësimet e hartimit të tekstit
Pasi të përmbajtje shtuar, përditësoni cilësimet e dizajnit si më poshtë:
- Ngjyra e sfondit: #ffffff
- Shkronja e tekstit: Flasim
- Madhësia e tekstit: 40px
- Lartësia e vijës së tekstit: 2em
- Gjerësia: 100%
- Padding: 20 pixel në krye, 20 pixel në fund, 20 pixel në të majtë, 20 pixel në të djathtë
- Gjerësia e poshtme e kufirit: 5px
- Ngjyra e kufirit të poshtëm: #eeeeee
pozitë
Pastaj nën skedën e përparuar, azhurnoni opsionet e pozicionit si më poshtë:
- Pozicioni: Relativ
- Indeksi Z 1
Shtoni një modul teksti për numrin e parë
Pasi të jetë vendosur moduli i parë i tekstit, ne mund të fillojmë të shtojmë numrat që do të lëvizin në lëvizje. Për të shtuar numrin e parë, shtoni një modul të ri teksti nën modulin ekzistues të tekstit "Muaji".
Shtoni numrin / përmbajtjen
Pastaj azhurnoni etiketën e modulit të tekstit për të lexuar "num1" për referencë më të lehtë. Pastaj azhurnoni përmbajtjen me numrin "01".
Cilësimet e projektimit për numrin
Nën skedën e dizajnit, azhurnoni sa vijon:
- Shkronja e tekstit: Prata
- Ngjyra e tekstit të tekstit: # 8ab2d3
- Madhësia e tekstit të tekstit: 70px
- Hapësira e shkronjave të tekstit: 4px
- Lartësia e vijës së tekstit: 1.5em
- Mbushja: 20px majtas
SHENIM: Numrat kanë një madhësi të tekstit prej 70px dhe një lartësi prej 1.5em, që do të thotë që lartësia totale e modulit të tekstit do të jetë afër 100px. Kjo është e rëndësishme të mbani në mend sa herë që fillojmë të shtojmë kompensimet lëvizëse vertikale. Për shembull, shtimi i një kompensimi vertikal të "1" në modulin e tekstit do të lëvizë modulin e tekstit saktësisht 100px që është lartësia e modulit të tekstit.
Efektet lëvizni për numrin e parë
Shtoni efektet e mëposhtme të lëvizjes në modulin e tekstit.
Nën skedën vertikale të lëvizjes, azhurnoni sa vijon:
- Aktivizoni lëvizjen vertikale: PO
- Fillimi i kompensimit: 1 (me 10%)
- Kompensimi mesatar: 0 (me 20%)
- Përfundimi i kompensimit: -1 (me 30%)
Në skedën Fade In dhe Fade Out, azhurnoni sa vijon:
- Aktivizoni zbehet brenda dhe jashtë: PO
- Opaciteti fillestar: 0% (me 10%)
- Opaciteti mesatar: 100% (me 20%)
- Hapësia e mbarimit: 0% (në 30%)
Sigurohuni që të vendosni këmbëzën për efektin e lëvizjes në krye të klipit:
- Shkak i efektit të lëvizjes: Elementi i sipërm
Krijoni modulin e tekstit për numrin e dytë
Kopjoni numrin e parë
Pasi të krijohet numri i parë, kopjoni atë për të krijuar modulin e tekstit të numrit të dytë. Pastaj azhurnoni etiketën në pamjen e shtresave për referencë më të mirë.
Përditësoni numrin / përmbajtjen
Hapni parametrat e modulit të dytë të tekstit dixhital dhe azhurnoni përmbajtjen me numrin "02".
Pozicioni i azhurnuar
Pastaj azhurnoni opsionet e pozicionit si më poshtë:
- Pozicioni: Absolut
- Kompensimi vertikal: 126px
Azhurnoni efektet lëvizëse
Pastaj azhurnoni efektet lëvizëse si më poshtë:
Në skedën Lëvizja vertikale, azhurnoni sa vijon:
- Fillimi i kompensimit: 1 (me 20%)
- Kompensimi mesatar: 0 (me 30%)
- Përfundimi i kompensimit: -1 (me 40%)
Në skedën Fade In dhe Fade Out, azhurnoni sa vijon:
- Opaciteti fillestar: 0% (me 20%)
- Opaciteti mesatar: 100% (me 30%)
- Hapësia e mbarimit: 0% (në 40%)
Krijoni një modul teksti për numrin e tretë
Kopjoni numrin e dytë
Për të krijuar modulin e tekstit për numrin e tretë, kopjoni modulin e tekstit për numrin e dytë.
Përditësoni numrin / përmbajtjen
Përditësoni përmbajtjen me numrin "03".
Azhurnoni efektet lëvizëse
Pastaj azhurnoni efektet lëvizëse:
Në skedën Lëvizja vertikale, azhurnoni sa vijon:
- Fillimi i kompensimit: 1 (me 30%)
- Kompensimi mesatar: 0 (me 40%)
- Përfundimi i kompensimit: -1 (me 50%)
Në skedën Fade In dhe Fade Out, azhurnoni sa vijon:
- Opaciteti fillestar: 0% (me 30%)
- Opaciteti mesatar: 100% (me 40%)
- Hapësia e mbarimit: 0% (në 50%)
Krijoni një modul teksti për numrin e katërt
Ështja e tretë e kopjuar
Për të krijuar numrin e katërt për banakun lëvizës, kopjoni modulin e tekstit për numrin e tretë.
Përditësoni numrin / përmbajtjen
Përditësoni përmbajtjen me numrin "04".
Azhurnoni efektet lëvizëse
Pastaj azhurnoni efektet lëvizëse:
Në skedën Lëvizja vertikale, azhurnoni sa vijon:
- Fillimi i kompensimit: 1 (me 40%)
- Kompensimi mesatar: 0 (me 50%)
- Përfundimi i kompensimit: 0 (me 60%)
Në skedën Fade In dhe Fade Out, azhurnoni sa vijon:
- Opaciteti fillestar: 0% (me 40%)
- Opaciteti mesatar: 100% (me 50%)
- Hapësia e mbarimit: 100% (në 60%)
Shtoni një ndarës më të ulët
Nën modulin e fundit të tekstit, shtoni një modul të ri ndarës. Kjo do të përdoret për të fshehur tejmbushjen e poshtme të tekstit lëvizës në pamje.
Pastaj zgjidhni JO për të shfaqur ndarësin.
Cilësimet e stilit dhe pozicionit
Përditësoni modelin e ndarësit si më poshtë:
- Ngjyra e sfondit: #ffffff
- Gjerësia: 100%
- Lartësia: 100px
- Gjerësia e kufirit të sipërm: 5px
Në skedën Advanced, azhurnoni sa vijon:
- Actaktivizoni në: telefon dhe tablet
- Pozicioni: Absolut
- Vendndodhja: majtas
E RANTNDSISHME: Hapësira që do të zërë ndarësi u krijua më herët duke shtuar mbushjen e poshtme të 100 pikselëve në kolonë. Nëse nuk e shtoni këtë mbushje, ndarësi do të mbivendosë shifrat.
Krijimi i sporteleve dhe kolonave shtesë
Kopjoni kolonën 1 dhe azhurnoni përmbajtjen
Për të krijuar një banak të ri, kopjoni kolonën 1. Kjo do të krijojë një kolonë të dytë me të gjitha elementet në vend automatikisht.
Atëherë gjithçka që duhet të bëni është të azhurnoni përmbajtjen e të gjitha moduleve të tekstit me tekste dhe numra të rinj.
Kopjoni kolonën 2 dhe azhurnoni përmbajtjen
Sapo përmbajtja e të gjitha moduleve të tekstit të azhurnohet në kolonën 2, kopjoni kolonën 2 për të krijuar një numërues të tretë për vitin. Pastaj azhurnoni përmbajtjen e secilit modul teksti sipas nevojës.
Rezultati përfundimtar
Këtu është rezultati përfundimtar.
Burime të tjera
- Si të përdorim modulin e numrave të numrave në Divi
- Si të përdorim modulin e banakut rrethor në Divi
- Si të krijoni sportele rrethore që bëhen të gjalla në Divi
Mendimet e fundit
Ky plan urbanistik i thjeshtë me numërues numrash të animuar në lëvizje duhet të jetë i dobishëm për t'u shfaqur données dixhitale në një mënyrë të re dhe unike. Mos ngurroni të hiqni dorë nga koncepti i datës dhe të përdorni numëruesit për gjithçka që mund të ëndërroni!
