Animované počítadla čísel jsou na webu populární jako způsob zobrazení čísel. données vyzdvihnout hodnotu služeb, případových studií atd. divi má vyhrazený modul počítadla čísel, který lze použít ke snadnému generování animovaných počítadel čísel.
V tomto tutoriálu vám však ukážeme, jak vytvořit numerické čítače, které se animují při rolování divi. Použití možností polohy a efektů posouvání divi, navrhneme jednoduché rozložení pro zobrazení data s rolujícími čísly.
Část 1: Vytvoření nadpisové sekce
V této první části vytvoříme jednoduchý název pro rozvržení.
Nejprve do sekce přidejte řádek jednoho sloupce.
Poté do řádku přidejte nový textový modul.
Aktualizujte obsah textového modulu s následujícími prvky:
Uložit datum
Poté aktualizujte styl textu záhlaví následujícím způsobem:
- Nadpis 2 Písmo: Prata
- Položka 2 Velikost textu: 130 pixelů (stolní), 70 pixelů (tablet), 40 pixelů (telefon)
Část 2: Vytvoření čítačů s posouvací animací
V této další části vytvoříme tři čítače, které budou animovat posouvající se čísla, dokud se nezastaví, aby se zobrazilo datum (měsíc, den a rok). Každý čítač bude sestaven pomocí celkem 5 textových modulů a oddělovacího modulu. První textový modul bude sloužit jako štítek počitadla (tj. Měsíc, den, rok). Další čtyři textové moduly budou každý obsahovat jiné číslo (probíhá), které bude při posouvání animováno pomocí vertikálních posunů pohybu v Divi. Spodní separační modul pomůže skrýt přetečení čísel.
Zde je návod.
Přidejte druhý řádek
Pod existující řádek přidejte do sloupce další řádek.
Nastavení linky
Před přidáním modulu aktualizujte parametry řádku následujícím způsobem:
- Šířka okapu: 1
- Výplň: 0px vysoká, 0px nízká
Parametry sloupce
Poté otevřete nastavení sloupce a aktualizujte výplň následovně:
- Polstrování (stůl): 100px nízké
- Výplň (tablet a telefon): 0px nízká
Přidat textový modul
Poté do sloupce přidejte textový modul.
Obsah / štítek
pro obsah z textového modulu přidejte slovo „měsíc“.
Nastavení návrhu textu
Jakmile obsah přidáno, aktualizujte nastavení návrhu následovně:
- Barva pozadí: #ffffff
- Textové písmo: Talk
- Velikost textu: 40px
- Výška řádku textu: 2em
- Šířka: 100%
- Výplň: 20 pixelů nahoře, 20 pixelů dole, 20 pixelů vlevo, 20 pixelů vpravo
- Šířka dolního okraje: 5px
- Barva dolního okraje: #eeeeee
Pozice
Poté na kartě Upřesnit aktualizujte možnosti polohy následujícím způsobem:
- Pozice: Relativní
- Z index 1
Přidejte textový modul pro první vydání
Jakmile je první textový modul na místě, můžeme začít přidávat čísla, která se budou pohybovat na svitku. Chcete-li přidat první číslo, přidejte nový textový modul pod stávající textový modul „Měsíc“.
Přidat číslo / obsah
Poté aktualizujte štítek textového modulu tak, aby byl pro snadnější orientaci čitelný „num1“. Poté aktualizujte obsah číslem „01“.
Nastavení návrhu pro číslo
Na kartě Návrh aktualizujte následující:
- Textové písmo: Prata
- Barva textu textu: # 8ab2d3
- Velikost textu: 70px
- Rozestup písmen: 4px
- Výška řádku textu: 1.5m
- Výplň: 20px vlevo
POZNÁMKA: Čísla mají velikost textu 70px a výšku řádku 1.5em, což znamená, že celková výška textového modulu bude téměř 100px. To je důležité mít na paměti, kdykoli začneme přidávat vertikální posunutí posunu. Například přidání svislého posunu „1“ k textovému modulu posune textový modul přesně o 100 pixelů, což je výška textového modulu.
Posuňte efekty pro první číslo
Přidejte následující textové efekty do textového modulu.
Na kartě Vertikální pohyb aktualizujte následující:
- Povolit vertikální pohyb: ANO
- Počáteční posun: 1 (při 10%)
- Průměrný ofset: 0 (při 20%)
- Koncový offset: -1 (při 30%)
Na kartě Fade In a Fade Out aktualizujte následující:
- Aktivace vyblednutí a vystoupení: ANO
- Počáteční krytí: 0% (na 10%)
- Průměrná neprůhlednost: 100% (při 20%)
- Konečná krytí: 0% (až 30%)
Nezapomeňte nastavit spoušť pohybového efektu v horní části klipu:
- Motion Effect Trigger: Element Top
Vytvořte textový modul pro druhé číslo
Duplikujte první číslo
Jakmile je vytvořeno první číslo, duplikujte ho a vytvořte textový modul druhého čísla. Poté aktualizujte štítek v zobrazení vrstev pro lepší referenci.
Aktualizujte číslo / obsah
Otevřete parametry druhého digitálního textového modulu a aktualizujte obsah číslem "02".
Aktualizovat pozici
Poté aktualizujte možnosti polohy následujícím způsobem:
- Pozice: Absolutní
- Svislé odsazení: 126 pixelů
Aktualizujte efekty posouvání
Poté aktualizujte efekty posouvání následujícím způsobem:
Na kartě Vertikální pohyb aktualizujte následující:
- Počáteční posun: 1 (při 20%)
- Průměrný ofset: 0 (při 30%)
- Koncový offset: -1 (při 40%)
Na kartě Fade In a Fade Out aktualizujte následující:
- Počáteční krytí: 0% (na 20%)
- Průměrná neprůhlednost: 100% (při 30%)
- Konečná krytí: 0% (až 40%)
Vytvořte textový modul pro třetí vydání
Duplikujte druhé číslo
Chcete-li vytvořit textový modul pro třetí číslo, duplikujte textový modul pro druhé číslo.
Aktualizujte číslo / obsah
Aktualizujte obsah číslem „03“.
Aktualizujte efekty posouvání
Poté aktualizujte efekty posouvání:
Na kartě Vertikální pohyb aktualizujte následující:
- Počáteční posun: 1 (při 30%)
- Průměrný ofset: 0 (při 40%)
- Koncový offset: -1 (při 50%)
Na kartě Fade In a Fade Out aktualizujte následující:
- Počáteční krytí: 0% (na 30%)
- Průměrná neprůhlednost: 100% (při 40%)
- Konečná krytí: 0% (až 50%)
Vytvořte textový modul pro čtvrté vydání
Třetí duplicitní vydání
Chcete-li vytvořit čtvrté číslo pro posuvník, duplikujte textový modul pro třetí číslo.
Aktualizujte číslo / obsah
Aktualizujte obsah číslem „04“.
Aktualizujte efekty posouvání
Poté aktualizujte efekty posouvání:
Na kartě Vertikální pohyb aktualizujte následující:
- Počáteční posun: 1 (při 40%)
- Průměrný ofset: 0 (při 50%)
- Koncový offset: 0 (při 60%)
Na kartě Fade In a Fade Out aktualizujte následující:
- Počáteční krytí: 0% (na 40%)
- Průměrná neprůhlednost: 100% (při 50%)
- Konečná krytí: 100% (až 60%)
Přidejte spodní oddělovač
Pod poslední textový modul přidejte nový oddělovací modul. To se použije ke skrytí spodního přetečení posouvaného textu v zobrazení.
Poté zvolte NO pro zobrazení oddělovače.
Nastavení stylu a polohy
Aktualizujte návrh oddělovače takto:
- Barva pozadí: #ffffff
- Šířka: 100%
- Výška: 100px
- Šířka horního okraje: 5px
Na kartě Upřesnit aktualizujte následující:
- Deaktivovat na: telefon a tablet
- Pozice: Absolutní
- Umístění: vlevo dole
DŮLEŽITÉ: Prostor, který bude zabírat oddělovač, byl vytvořen dříve přidáním dolního odsazení 100 pixelů do sloupce. Pokud tuto výplň nepřidáte, oddělovač překročí číslice.
Vytvoření dalších čítačů a sloupců
Duplikujte sloupec 1 a aktualizujte obsah
Chcete-li vytvořit nový čítač, duplikujte sloupec 1. Tímto se automaticky vytvoří druhý sloupec se všemi prvky na místě.
Pak stačí aktualizovat obsah všech textových modulů novými texty a čísly.
Duplikujte sloupec 2 a aktualizujte obsah
Jakmile je obsah všech textových modulů aktualizován ve sloupci 2, duplikujte sloupec 2 a vytvořte třetí počítadlo pro daný rok. Poté podle potřeby aktualizujte obsah každého textového modulu.
Konečný výsledek
Zde je konečný výsledek.
Další zdroje
- Jak používat modul počítadla čísel na Divi
- Jak používat modul kruhového čítače na Divi
- Jak vytvořit kruhové čítače, které na Divi ožívají
Závěrečné myšlenky
Toto jednoduché rozložení s posouvajícími se animovanými počítadly čísel by mělo být užitečné pro zobrazování données digitální novým a jedinečným způsobem. Neváhejte se vzdát konceptu data a použijte počítadla pro cokoli, co si můžete vysnít!
