Animované počítadlá čísel sú na webe populárne ako spôsob zobrazenia čísel. Données zdôrazniť hodnotu služieb, prípadových štúdií atď. divi má vyhradený modul počítadla čísel, ktorý možno použiť na jednoduché generovanie animovaných počítadiel čísel.
V tomto návode vám však ukážeme, ako vytvoriť číselné počítadlá, ktoré sa animujú pri rolovaní divi. Používanie možností polohy a efektov posúvania divi, navrhneme jednoduché rozloženie na zobrazenie dátumu s posúvajúcimi sa číslami.
Časť 1: Vytvorenie nadpisovej časti
V tejto prvej časti vytvoríme jednoduchý názov pre rozloženie.
Najskôr do sekcie pridajte riadok jedného stĺpca.
Potom do riadku pridajte nový textový modul.
Aktualizujte obsah textového modulu s nasledujúcimi prvkami:
Uložiť dátum
Potom aktualizujte štýl textu hlavičky takto:
- Nadpis 2 Písmo: Prata
- Položka 2 Veľkosť textu: 130 pixelov (stolné počítače), 70 pixelov (tablety), 40 pixlov (telefóny)
Časť 2: Vytvorenie počítadiel s pohyblivou animáciou
V tejto ďalšej časti vytvoríme tri počítadlá, ktoré budú animovať posúvané čísla, kým sa nezastavia, aby sa zobrazil dátum (mesiac, deň a rok). Každé počítadlo bude zostavené z celkom 5 textových modulov a oddeľovacieho modulu. Prvý textový modul bude slúžiť ako štítok počítadla (t. J. Mesiac, deň, rok). Nasledujúce štyri textové moduly budú obsahovať každý iný iný počet (prebieha), ktorý sa bude animovať pri rolovaní pomocou posunov vertikálneho pohybu v Divi. Spodný separačný modul pomôže skryť pretečenie čísel.
Tu je návod.
Pridajte druhý riadok
Pod existujúci riadok pridajte do stĺpca ďalší riadok.
Nastavenie linky
Pred pridaním modulu aktualizujte parametre riadku takto:
- Šírka odkvapov: 1
- Výplň: vysoká 0px, nízka 0px
Parametre stĺpca
Potom otvorte nastavenia stĺpcov a aktualizujte výplň nasledovne:
- Výplň (stola): 100px nízka
- Výplň (tablet a telefón): 0px nízka
Pridajte textový modul
Potom do stĺpca pridajte textový modul.
Obsah / štítok
pre obsah z textového modulu pridajte slovo „mesiac“.
Nastavenia textového dizajnu
Raz obsah pridané, aktualizujte nastavenia dizajnu takto:
- Farba pozadia: #ffffff
- Písmo textu: Talk
- Veľkosť textu: 40px
- Výška riadku textu: 2em
- Šírka: 100%
- Výplň: 20 pixelov hore, 20 pixelov dole, 20 pixelov vľavo, 20 pixelov vpravo
- Šírka dolného okraja: 5px
- Farba dolného okraja: #eeeeee
poloha
Potom na karte Rozšírené aktualizujte možnosti pozícií takto:
- Pozícia: relatívna
- Z index 1
Pridajte textový modul pre prvé vydanie
Len čo bude prvý textový modul na mieste, môžeme začať pridávať čísla, ktoré sa budú pohybovať na zvitku. Ak chcete pridať prvé číslo, pridajte do existujúceho textového modulu „Mesiac“ nový textový modul.
Pridajte číslo / obsah
Potom aktualizujte štítok textového modulu tak, aby čítal „num1“ pre ľahšiu orientáciu. Potom aktualizujte obsah číslom „01“.
Dizajnové nastavenie pre číslo
Na karte Dizajn aktualizujte nasledujúce informácie:
- Písmo textu: Prata
- Farba textu: # 8ab2d3
- Veľkosť textu: 70px
- Rozstup písmen: 4px
- Výška riadku textu: 1.5m
- Výplň: 20px vľavo
POZNÁMKA: Čísla majú veľkosť textu 70px a výšku riadku 1.5m, čo znamená, že celková výška textového modulu bude takmer 100px. Toto je dôležité mať na pamäti, kedykoľvek začneme pridávať kompenzácie vertikálneho pohybu. Napríklad pridanie vertikálneho posunu „1“ do textového modulu presunie textový modul presne o 100 pixlov, čo je výška textového modulu.
Posuňte efekty pre prvé číslo
Do textového modulu pridajte nasledujúce efekty posúvania.
Na karte Vertikálny pohyb aktualizujte nasledujúce informácie:
- Povoliť vertikálny pohyb: ÁNO
- Počiatočný posun: 1 (pri 10%)
- Priemerný ofset: 0 (pri 20%)
- Koncový posun: -1 (pri 30%)
Na karte Fade In and Fade Out aktualizujte nasledujúce položky:
- Aktivujte zoslabovanie a vypínanie: ÁNO
- Počiatočná opacita: 0% (pri 10%)
- Priemerná opacita: 100% (pri 20%)
- Konečná opacita: 0% (až 30%)
Nezabudnite nastaviť spúšťač efektu pohybu v hornej časti klipu:
- Spúšťač pohybových efektov: vrchná časť prvku
Vytvorte textový modul pre druhé číslo
Duplikujte prvé číslo
Po vytvorení prvého čísla ho duplikujte, aby ste vytvorili textový modul druhého čísla. Potom aktualizujte štítok v zobrazení vrstiev pre lepšiu orientáciu.
Aktualizujte číslo / obsah
Otvorte parametre druhého digitálneho textového modulu a aktualizujte obsah číslom „02“.
Aktualizovať pozíciu
Potom aktualizujte možnosti pozícií nasledovne:
- Pozícia: Absolútna
- Vertikálne odsadenie: 126 px
Aktualizujte efekty posúvania
Potom aktualizujte posúvacie efekty nasledujúcim spôsobom:
Na karte Vertikálny pohyb aktualizujte nasledujúce položky:
- Počiatočný posun: 1 (pri 20%)
- Priemerný ofset: 0 (pri 30%)
- Koncový posun: -1 (pri 40%)
Na karte Fade In and Fade Out aktualizujte nasledujúce položky:
- Počiatočná opacita: 0% (pri 20%)
- Priemerná opacita: 100% (pri 30%)
- Konečná opacita: 0% (až 40%)
Vytvorte textový modul pre tretie vydanie
Duplikujte druhé číslo
Ak chcete vytvoriť textový modul pre tretie číslo, duplikujte textový modul pre druhé číslo.
Aktualizujte číslo / obsah
Aktualizujte obsah číslom „03“.
Aktualizujte efekty posúvania
Potom aktualizujte posúvacie efekty:
Na karte Vertikálny pohyb aktualizujte nasledujúce položky:
- Počiatočný posun: 1 (pri 30%)
- Priemerný ofset: 0 (pri 40%)
- Koncový posun: -1 (pri 50%)
Na karte Fade In and Fade Out aktualizujte nasledujúce položky:
- Počiatočná opacita: 0% (pri 30%)
- Priemerná opacita: 100% (pri 40%)
- Konečná opacita: 0% (až 50%)
Vytvorte textový modul pre štvrté vydanie
Tretie duplicitné vydanie
Ak chcete vytvoriť štvrté číslo pre posúvacie počítadlo, duplikujte textový modul pre tretie číslo.
Aktualizujte číslo / obsah
Aktualizujte obsah číslom „04“.
Aktualizujte efekty posúvania
Potom aktualizujte posúvacie efekty:
Na karte Vertikálny pohyb aktualizujte nasledujúce položky:
- Počiatočný posun: 1 (pri 40%)
- Priemerný ofset: 0 (pri 50%)
- Koncový posun: 0 (pri 60%)
Na karte Fade In and Fade Out aktualizujte nasledujúce položky:
- Počiatočná opacita: 0% (pri 40%)
- Priemerná opacita: 100% (pri 50%)
- Konečná opacita: 100% (až 60%)
Pridajte dolný oddeľovač
Pod posledný modul textu pridajte nový modul oddeľovača. Toto sa použije na skrytie dolného pretečenia posúvaného textu v zobrazení.
Potom zvoľte NO, aby ste zobrazili oddeľovač.
Nastavenie štýlu a polohy
Aktualizujte návrh oddeľovača takto:
- Farba pozadia: #ffffff
- Šírka: 100%
- Výška: 100px
- Šírka horného okraja: 5px
Na karte Spresnenie aktualizujte nasledujúce položky:
- Deaktivovať: telefón a tablet
- Pozícia: Absolútna
- Umiestnenie: vľavo dole
DÔLEŽITÉ: Priestor, ktorý zaberá oddeľovač, bol vytvorený skôr pridaním dolnej výplne 100 pixelov do stĺpca. Ak nepridáte túto výplň, oddeľovač prekrýva číslice.
Vytvorenie ďalších počítadiel a stĺpcov
Duplikujte stĺpec 1 a aktualizujte obsah
Ak chcete vytvoriť nové počítadlo, duplikujte stĺpec 1. Týmto sa automaticky vytvorí druhý stĺpec so všetkými prvkami na mieste.
Potom stačí len aktualizovať obsah všetkých textových modulov novými textami a číslami.
Duplikujte stĺpec 2 a aktualizujte obsah
Po aktualizácii obsahu všetkých textových modulov v stĺpci 2 duplikujte stĺpec 2 a vytvorte tretie počítadlo pre daný rok. Potom podľa potreby aktualizujte obsah každého textového modulu.
Konečný výsledok
Toto je konečný výsledok.
Ďalšie zdroje
- Ako používať modul počítadla čísel na Divi
- Ako používať modul kruhového počítadla na Divi
- Ako vytvoriť kruhové počítadlá, ktoré na Divi ožívajú
záverečné myšlienky
Toto jednoduché rozloženie s rolovaním animovaných počítadiel čísel by malo byť užitočné pri zobrazovaní Données digitálne novým a jedinečným spôsobom. Neváhajte sa vzdať konceptu dátumu a použite počítadlá na čokoľvek, čo si len môžete vysnívať!
