Jak zaprojektować przewijane animowane liczniki słupków za pomocą Divi

Liczniki słupków są używane w Internecie, aby skutecznie ilustrować dane lub metryki za pomocą subtelnej animacji kolorów, która reprezentuje określoną wartość. Divi ma dedykowany moduł licznika prętów, który można wykorzystać do łatwego generowania animowanych liczników prętów. Są popularnymi dodatkami do stron, serwisów i studiów przypadków

Większość liczników słupków wydaje się animować, gdy pojawiają się w widoku i może być trudno dostosować. Jednak w tym samouczku pokażemy, jak tworzyć w pełni konfigurowalne liczniki słupków (od zera), które animują się podczas przewijania za pomocą Divi. Aby to zrobić, skorzystamy z opcji pozycji Divi i efektów przewijania i wykorzystamy je w wyjątkowo precyzyjny sposób.

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na liczniki słupków, które zamierzamy zbudować w tym samouczku.

Pobierz układ za DARMO

Aby położyć ręce na licznikach słupków z układem efektów przewijania z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i zaimportuj plik JSON z biblioteki Divi.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Część 1: Optymalizacja sekcji, wiersza i kolumny

Dodaj wiersz

Aby rozpocząć, dodaj dwukolumnowy wiersz do sekcji.

Ustawienia sekcji

Następnie otwórz ustawienia sekcji i dodaj kolor tła w następujący sposób:

• Kolor tła: #000545

Następnie daj sekcji tymczasowy margines, aby przetestować efekty przewijania i trochę dopełnienia w następujący sposób:

• Margines: 80vh góra, 80vh dół
• Wyściółka 10vw na górze, 10vw na dole

Szerokość wiersza

Następnie otwórz ustawienia wiersza i dodaj następującą szerokość:

• Szerokość: 90%
• Maksymalna szerokość: 700px

Przepełnienie kolumny

Upewnij się, że ukryłeś przepełnienie dwóch kolumn w rzędzie. Aby to zrobić, otwórz ustawienia dla każdej z kolumn i zaktualizuj następujące elementy:

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Część 2: Tworzenie licznika słupków z efektami przewijania

Licznik słupkowy będzie się składał z trzech elementów: tła słupkowego (moduł dzielnika), paska koloru (również moduł dzielnika) i zawartości słupka (moduł blurb). Kolorowy element paska będzie animowany za pomocą przesunięcia efektu przewijania w poziomie.

Zacznijmy od tła paska.

Tworzenie tła paska

Dodaj moduł dzielnika

Dodaj nowy moduł rozdzielający do kolumny 1.

Ustawienia dzielnika

Pokaż dzielnik: NIE

• Kolor tła: rgba (255,255,255,0.1)

• Szerokość: 300px
• Wysokość: 70px

Utwórz pasek licznika słupków

Zduplikowany moduł dzielnika

Aby utworzyć kolorowy pasek dla licznika słupków, zduplikuj poprzedni moduł dzielnika, którego użyliśmy do utworzenia tła słupka.

Tło dzielnika

Następnie zaktualizuj tło nowym kolorem gradientu w następujący sposób:

• Kolor tła gradientu po lewej stronie: #fe7e1f
• Prawy kolor tła gradientu: #ffbc48
• Kierunek gradientu: 90 stopni

Pozycja dzielnika

Aby kolorowy pasek znalazł się nad tłem paska, musimy nadać mu pozycję bezwzględną z indeksem Z równym 1:

• Pozycja: bezwzględna
• Indeks Z: 1

Efekty przewijania dzielnika

Teraz jesteśmy gotowi, aby dodać ruch do paska licznika słupków. W tym celu użyjemy efektu przewijania w poziomie, który przesuwa moduł dzielnika od lewej do prawej. Ponieważ przepełnienie kolumny jest ukryte, nie zobaczymy paska, który rozciąga się poza lewą stronę kolumny. Ale zobaczymy, jak pojawi się w polu widzenia, gdy przesunie się w prawo.

Używanie wartości odsunięcia do określania wartości procentowych dla licznika słupków

Zanim dodamy ruch poziomy do dzielnika/paska, musimy zrozumieć, jak określić wartość procentową, która ma być wyświetlana na liczniku słupków. Innymi słowy, jeśli chcemy reprezentować 25% na liczniku słupków, musimy wiedzieć, jakie przesunięcie ruchu poziomego przesunie słupek w prawo dokładnie 25% szerokości tła słupka.

Aby to rozgryźć, możemy wykonać prostą matematykę.

Całkowita szerokość paska to 300px.

Każda wartość przesunięcia poziomego odnosi się do 100px (1 równa się 100px, -2 równa się -200px, itd…)

Aby przesunąć pasek w lewo (poza widok), musimy dodać początkowy offset równy -3 (-300px). To przesuwa go w lewo o 300 pikseli poza pole widzenia.

Następnie musimy przesunąć pasek o ponad 25% 300px (czyli 75px), aby zakończyć animację przewijania.

Aby przesunąć pasek o ponad 75px w prawo, gdy pasek osiągnie pionowy środek strony, potrzebujemy przesunięcia w połowie równego -2,25 (ponieważ -300 plus 75 równa się -225). To prawdopodobnie przypomina ci te linie liczbowe, których używaliśmy w szkole podstawowej.

Pokaż 25% z ruchem poziomym

Aby pokazać 25% z ruchem poziomym, wybierz kartę ruchu poziomego i zaktualizuj następujące elementy:

• Włącz ruch poziomy: TAK
• Przesunięcie początkowe: -3
• Przesunięcie środkowe: -2,25
• Przesunięcie końcowe: -2,25

Utwórz zawartość licznika słupków

Do tworzenia treści paska użyjemy modułu notki. Blurby pozwalają nam łatwo dodać ikonę wyrównaną do lewej wraz z tytułem i tekstem głównym, który będzie idealny do licznika słupków.

Pod modułem rozdzielającym kolorowe paski dodaj moduł notki.

Treść rozmycia

Następnie zaktualizuj zawartość w następujący sposób:

• Tytuł: 25%
• Ciało: Optymalizacja
• Ikona: zobacz zrzut ekranu

Projekt plamy

W zakładce projekt zaktualizuj następujące elementy:

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: po lewej
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 40px

• Kolor tekstu: jasny
• Czcionka ciała: Rubik
• Styl czcionki ciała: TT
• Odstępy między literami ciała: 0.2em
• Wysokość linii ciała: 1em

• Szerokość treści: 100%
• Szerokość: 300px
• Wysokość: 70px
• Padding: 15px u góry, 15px w lewo

• Pozycja: bezwzględna
• Indeks Z: 2

Część 3: Tworzenie dodatkowych liczników prętów

W następnej części będziemy kontynuować tworzenie większej liczby liczników słupków przy użyciu tej samej techniki. Stworzymy licznik słupków 50%, 75% i 100%, aby dopełnić projekt układu. Powinno to dać ci dobre przykłady pracy, które pozwolą ci zrobić więcej na własną rękę.

Tworzenie 50% licznika słupków

Zduplikowana kolumna z licznikiem słupków

Po utworzeniu pierwszego licznika słupków w kolumnie 1 możemy zduplikować całą kolumnę lub skopiować i wkleić trzy moduły tworzące licznik słupków do kolumny 2. Teraz powinieneś mieć dwie kolumny, każda z identycznymi licznikami słupków.

Aktualizuj ustawienia dzielnika paska

Tło

Wewnątrz kolumny 2 otwórz ustawienia dzielenia kolorowych pasków i zaktualizuj kolory tła gradientu:

• Kolor tła gradientu po lewej stronie: #4c75f8
• Prawy kolor tła gradientu: #57a1ff

Efekty przewijania

Następnie zaktualizuj efekt przewijania ruchu w poziomie, aby wypełniał 50% paska przewijania:

• Przesunięcie środkowe: -1,5
• Przesunięcie końcowe: -1,5

Zaktualizuj zawartość Blubba

Następnie otwórz ustawienia notki w kolumnie 2 i zaktualizuj zawartość:

• Tytuł: 50%
• Ikona: zobacz zrzut ekranu

Tworzenie licznika słupków 75%

Powiel wiersz

Aby przyspieszyć projektowanie naszych kolejnych dwóch liczników słupków, zduplikuj cały wiersz, aby utworzyć kolejny identyczny wiersz poniżej.

Zaktualizuj tło paska i efekty przewijania

Otwórz ustawienia modułu dzielenia kolorowych pasków i zaktualizuj następujące kolory tła:

• Kolor tła gradientu po lewej stronie: #4c75f8
• Prawy kolor tła gradientu: #57a1ff

Następnie zaktualizuj odsunięcia ruchu poziomego w następujący sposób:

• Przesunięcie środkowe: -0,075
• Przesunięcie końcowe: -0,75

Treść rozmycia

Otwórz ustawienia notki i zaktualizuj zawartość w następujący sposób:

• Tytuł: 75%
• Ikona: zobacz zrzut ekranu

Tworzenie licznika słupków 100%

Aktualizuj kolor paska i efekty przewijania

Aby utworzyć licznik słupków 100%, przejdź do kolumny 2 i zaktualizuj kolor tła modułu dzielnika kolorowych słupków w następujący sposób:

• Kolor tła gradientu po lewej stronie: #f449b4
• Prawy kolor tła gradientu: #fc845b

Następnie zaktualizuj odsunięcia ruchu poziomego w następujący sposób:

• Przesunięcie środkowe: 0
• Przesunięcie końcowe: 0

Zaktualizuj zawartość Blubba

Na koniec zaktualizuj treść notki:

• Tytuł: 100%
• Ikona: zobacz zrzut ekranu

Ostateczny wynik

Oto zrzut ekranu końcowego wyniku. Na koniec dodałem niestandardowy obraz tła z naszego piątego pakietu do tworzenia motywów.

Teraz jaki ruch przewijania w akcji.

Końcowe przemyślenia

Mamy nadzieję, że te animowane liczniki przewijania przydadzą się w przyszłym projekcie. Minusem posiadania takiego niestandardowego projektu jest to, że musisz wykonać trochę matematyki, aby obliczyć, jak daleko przesunąć kolorowy pasek o określony procent. Ale zaletą jest to, że masz więcej możliwości tworzenia jeszcze bardziej wyjątkowych i kreatywnych projektów.

Jeśli jesteś zainteresowany, zapoznaj się z naszym postem na temat tworzenia niestandardowych liczników okręgów, które również animują się podczas przewijania.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!