Animowane liczniki liczb są popularne w Internecie jako sposób wyświetlania liczb. données podkreślanie wartości usług, studia przypadków itp. Divi posiada dedykowany moduł licznika liczb, który można wykorzystać do łatwego generowania animowanych liczników liczb.
Jednak w tym samouczku pokażemy, jak tworzyć liczniki numeryczne, które animują się podczas przewijania za pomocą Divi. Korzystanie z opcji pozycji i efektów przewijania Divi, zaprojektujemy prosty układ do wyświetlania daty z przewijanymi liczbami.
Część 1: Tworzenie sekcji tytułowej
W tej pierwszej części utworzymy prosty tytuł dla układu.
Najpierw dodaj wiersz jednej kolumny do sekcji.
Następnie dodaj nowy moduł tekstowy do wiersza.
Zaktualizuj treść modułu tekstowego o następujące elementy:
Zapisz datę
Następnie zaktualizuj styl tekstu nagłówka w następujący sposób:
- Nagłówek 2 Czcionka: Prata
- Pozycja 2 Rozmiar tekstu: 130 pikseli (komputer stacjonarny), 70 pikseli (tablet), 40 pikseli (telefon)
Część 2: Tworzenie liczników z przewijaną animacją
W następnej części utworzymy trzy liczniki, które będą animować przewijane liczby, aż przestaną wyświetlać datę (miesiąc, dzień i rok). Każdy licznik zostanie zbudowany przy użyciu łącznie 5 modułów tekstowych i modułu separatora. Pierwszy moduł tekstowy będzie służył jako etykieta licznika (tj. Miesiąc, dzień, rok). Kolejne cztery moduły tekstowe będą zawierały inną liczbę (w toku), która będzie animowana podczas przewijania przy użyciu przesunięć ruchu w pionie w Divi. Niższy moduł separacji pomoże ukryć przepełnienie liczb.
Oto jak.
Dodaj drugą linię
Pod istniejącym wierszem dodaj kolejny wiersz do kolumny.
Ustawienia linii
Przed dodaniem modułu zaktualizuj parametry wiersza w następujący sposób:
- Szerokość rynny: 1
- Wypełnienie: 0px wysoki, 0px niski
Parametry kolumny
Następnie otwórz ustawienia kolumn i zaktualizuj wypełnienie w następujący sposób:
- Wyściółka (biurko): niska 100 pikseli
- Wypełnienie (tablet i telefon): 0px niski
Dodaj moduł tekstowy
Następnie dodaj moduł tekstowy do kolumny.
Treść / etykieta
dla treść z modułu tekstowego dodaj słowo „miesiąc”.
Ustawienia projektowania tekstu
Kiedyś treść dodano, zaktualizuj ustawienia projektu w następujący sposób:
- Kolor tła: #ffffff
- Czcionka tekstu: Talk
- Rozmiar tekstu: 40px
- Wysokość linii tekstu: 2em
- Szerokość: 100%
- Wypełnienie: 20 pikseli u góry, 20 pikseli u dołu, 20 pikseli po lewej, 20 pikseli po prawej
- Szerokość dolnej krawędzi: 5px
- Kolor dolnej granicy: #eeeeee
Pozycja
Następnie w zakładce zaawansowane zaktualizuj opcje pozycji w następujący sposób:
- Pozycja: względna
- Indeks Z 1
Dodaj moduł tekstowy do pierwszego wydania
Po umieszczeniu pierwszego modułu tekstowego możemy rozpocząć dodawanie liczb, które będą poruszać się po zwoju. Aby dodać pierwszą liczbę, dodaj nowy moduł tekstowy pod istniejącym modułem tekstowym „Miesiąc”.
Dodaj numer / treść
Następnie zaktualizuj etykietę modułu tekstowego, tak aby brzmiała „num1” w celu ułatwienia wyszukiwania informacji. Następnie zaktualizuj zawartość o numerze „01”.
Ustawienia projektu dla liczby
Na karcie projektu zaktualizuj następujące elementy:
- Czcionka tekstu: Prata
- Kolor tekstu tekstu: # 8ab2d3
- Rozmiar tekstu: 70 pikseli
- Odstępy między literami: 4px
- Wysokość linii tekstu: 1.5 em
- Wypełnienie: pozostało 20 pikseli
UWAGA: Liczby mają rozmiar tekstu 70px i wysokość linii 1.5em, co oznacza, że całkowita wysokość modułu tekstowego będzie bliska 100px. Należy o tym pamiętać, gdy zaczynamy dodawać pionowe przesunięcia ruchu. Na przykład dodanie pionowego przesunięcia „1” do modułu tekstowego spowoduje przesunięcie modułu tekstowego dokładnie o 100 pikseli, co stanowi wysokość modułu tekstowego.
Przewiń efekty dla pierwszego numeru
Dodaj następujące efekty przewijania do modułu tekstowego.
Na karcie Ruch pionowy zaktualizuj następujące elementy:
- Włącz ruch pionowy: TAK
- Rozpocznij przesunięcie: 1 (przy 10%)
- Średnie przesunięcie: 0 (przy 20%)
- Przesunięcie końcowe: -1 (przy 30%)
Na karcie Pojawianie się i zanikanie zaktualizuj następujące elementy:
- Włączaj i wyłączaj ściemnianie: TAK
- Początkowe krycie: 0% (przy 10%)
- Średnie krycie: 100% (przy 20%)
- Koniec krycia: 0% (do 30%)
Upewnij się, że wyzwalacz dla efektu ruchu jest ustawiony na górze klipu:
- Wyzwalacz efektu ruchu: góra elementu
Utwórz moduł tekstowy dla drugiego numeru
Zduplikuj pierwszy numer
Po utworzeniu pierwszego numeru należy go zduplikować, aby utworzyć moduł tekstowy drugiego numeru. Następnie zaktualizuj etykietę w widoku warstw, aby uzyskać lepsze odniesienie.
Zaktualizuj numer / treść
Otwórz parametry drugiego cyfrowego modułu tekstowego i zaktualizuj zawartość o numerze „02”.
Zaktualizuj pozycję
Następnie zaktualizuj opcje pozycji w następujący sposób:
- Pozycja: absolutna
- Przesunięcie pionowe: 126px
Zaktualizuj efekty przewijania
Następnie zaktualizuj efekty przewijania w następujący sposób:
Na karcie Ruch w pionie zaktualizuj następujące elementy:
- Rozpocznij przesunięcie: 1 (przy 20%)
- Średnie przesunięcie: 0 (przy 30%)
- Przesunięcie końcowe: -1 (przy 40%)
Na karcie Pojawianie się i zanikanie zaktualizuj następujące elementy:
- Początkowe krycie: 0% (przy 20%)
- Średnie krycie: 100% (przy 30%)
- Koniec krycia: 0% (do 40%)
Utwórz moduł tekstowy dla trzeciego wydania
Zduplikuj drugi numer
Aby utworzyć moduł tekstowy dla trzeciego numeru, zduplikuj moduł tekstowy dla drugiego numeru.
Zaktualizuj numer / treść
Zaktualizuj treść o numerze „03”.
Zaktualizuj efekty przewijania
Następnie zaktualizuj efekty przewijania:
Na karcie Ruch w pionie zaktualizuj następujące elementy:
- Rozpocznij przesunięcie: 1 (przy 30%)
- Średnie przesunięcie: 0 (przy 40%)
- Przesunięcie końcowe: -1 (przy 50%)
Na karcie Pojawianie się i zanikanie zaktualizuj następujące elementy:
- Początkowe krycie: 0% (przy 30%)
- Średnie krycie: 100% (przy 40%)
- Koniec krycia: 0% (do 50%)
Utwórz moduł tekstowy dla czwartego wydania
Trzeci duplikat problemu
Aby utworzyć czwarty numer licznika przewijania, zduplikuj moduł tekstowy dla trzeciego numeru.
Zaktualizuj numer / treść
Zaktualizuj treść o numerze „04”.
Zaktualizuj efekty przewijania
Następnie zaktualizuj efekty przewijania:
Na karcie Ruch w pionie zaktualizuj następujące elementy:
- Rozpocznij przesunięcie: 1 (przy 40%)
- Średnie przesunięcie: 0 (przy 50%)
- Przesunięcie końcowe: 0 (przy 60%)
Na karcie Pojawianie się i zanikanie zaktualizuj następujące elementy:
- Początkowe krycie: 0% (przy 40%)
- Średnie krycie: 100% (przy 50%)
- Koniec krycia: 100% (do 60%)
Dodaj dolny separator
Pod ostatnim modułem tekstowym dodaj nowy moduł separatora. Będzie to używane do ukrycia dolnego przepełnienia przewijanego tekstu w widoku.
Następnie wybierz NIE, aby wyświetlić separator.
Ustawienia stylu i pozycji
Zaktualizuj projekt separatora w następujący sposób:
- Kolor tła: #ffffff
- Szerokość: 100%
- Wysokość: 100px
- Szerokość górnej ramki: 5 pikseli
Na karcie Zaawansowane zaktualizuj następujące elementy:
- Dezaktywuj: telefon i tablet
- Pozycja: absolutna
- Lokalizacja: u dołu po lewej
WAŻNE: Miejsce, które będzie zajmować separator, zostało utworzone wcześniej przez dodanie do kolumny wypełnienia dolnego o 100 pikseli. Jeśli nie dodasz tego wypełnienia, separator będzie nakładał się na cyfry.
Tworzenie dodatkowych liczników i kolumn
Zduplikuj kolumnę 1 i zaktualizuj treść
Aby utworzyć nowy licznik, zduplikuj kolumnę 1. Spowoduje to utworzenie drugiej kolumny z automatycznie umieszczonymi wszystkimi elementami.
Następnie wystarczy zaktualizować zawartość wszystkich modułów tekstowych o nowe teksty i liczby.
Zduplikuj kolumnę 2 i zaktualizuj treść
Po zaktualizowaniu zawartości wszystkich modułów tekstowych w kolumnie 2 zduplikuj kolumnę 2, aby utworzyć trzeci licznik roku. Następnie zaktualizuj zawartość każdego modułu tekstowego w razie potrzeby.
Ostateczny wynik
Oto wynik końcowy.
Inne zasoby
- Jak korzystać z modułu licznika liczb w Divi
- Jak korzystać z okrągłego modułu licznika w Divi
- Jak tworzyć okrągłe liczniki, które ożywają w Divi
końcowe przemyślenia
Ten prosty układ z przewijanymi animowanymi licznikami liczb powinien być przydatny do wyświetlania données cyfrowe w nowy i wyjątkowy sposób. Porzuć koncepcję randki i używaj liczników do wszystkiego, co możesz wymyślić!
