Przejdź do głównej treści

Jak tworzyć liczniki kół, które ożywają podczas przewijania za pomocą Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Animowane liczniki kręgów są popularnym sposobem prezentowania informacji (takich jak metryki lub metryki) na stronie internetowej z zabawną interakcją. W rzeczywistości możesz już być zaznajomiony z modułem licznika okręgów Divi, który pozwala szybko i łatwo dodawać liczniki okręgów do witryny Divi.

Jednak w tym samouczku pokażemy, jak utworzyć w pełni spersonalizowane liczniki kręgów, które ożywają podczas przewijania! Nie będziemy potrzebować zewnętrznego niestandardowego CSS do ich utworzenia. Sztuka polega na wykorzystaniu funkcji Divi's Layers do zarządzania kilkoma nałożonymi i animowanymi modułami.

Możliwy wynik

Oto krótki przegląd animowanych dzielników kół, które utworzymy w tym samouczku.

animowane liczniki kół na zwoju

Stworzenie czterech liczników kół, które ożywają podczas przewijania za pomocą Divi

Konfiguracja sekcji i linii

Najpierw dodaj wiersz z czterema kolumnami do sekcji domyślnej.

animowane liczniki kół na zwoju

Następnie otwórz parametry sekcji i dodaj górny i dolny margines, abyśmy mieli wystarczająco dużo miejsca do przetestowania efektów przewijania liczników kół, które zamierzamy utworzyć.

  • Margines: 85vh wysoki, 85vh niski
animowane liczniki kół na zwoju

Następnie otwórz ustawienia linii i zaktualizuj następujące elementy:

  • Szerokość rynny: 1
  • Szerokość: 100%
  • Maksymalna szerokość: 1200 pikseli
animowane liczniki kół na zwoju

Korzystanie z widoku Warstwy

Zanim zaczniesz tworzyć animowane liczniki okręgów, pamiętaj o wdrożeniu Divi Layers. Możesz to zrobić, klikając ikonę szarych warstw w menu ustawień na dole.

animowane liczniki kół na zwoju

Ponieważ będziemy tworzyć wiele nakładających się elementów (lub warstw), pole warstw z pewnością przyda się do zarządzania naszymi warstwami w przyszłości.

Stworzenie animowanego licznika kręgu # 1 (25%)

Ten pierwszy animowany licznik okręgów będzie animował do 25% okręgu na zwoju i będzie miał tekst procentowy odpowiadający środkowi, który będzie oparty na zwoju. Aby zbudować pełny projekt licznika okręgu, użyjemy kilku separatorów i nakładających się modułów tekstowych. Oto jak.

The Back Circle

Aby utworzyć tylne koło, użyjemy modułu separacji, który ukształtujemy jako koło i nadamy mu kolor tła.

Dodaj moduł separacji
animowane liczniki kół na zwoju

Pociągnij separator w górę w widoku warstw i zmień etykietę na „backcircle”. Następnie otwórz ustawienia modułu separacji i zaktualizuj następujące elementy:

  • Pokaż dzielnik: NIE
  • Kolor tła: # c3e0e5
animowane liczniki kół na zwoju

Zaktualizuj parametry projektu w następujący sposób:

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • Szerokość: 250 pikseli
  • Wysokość: 250px
  • Margines: 25 pikseli u góry, 25 pikseli u dołu, 25 pikseli po lewej stronie
  • Zaokrąglone rogi: 50%
animowane liczniki kół na zwoju

Obracający się pasek kolorów

Kolejną częścią licznika kół będzie obrotowy pasek kolorów. Zduplikuj poprzedni separator (tylne kółko), aby ponownie uruchomić projekt. Następnie zaktualizuj nowy separator etykietą „pasek kolorów”.

animowane liczniki kół na zwoju

Aby stworzyć efekt obracającego się paska koloru, musimy przekształcić ten dzielnik w półkole o kolorze, którego chcemy użyć dla paska.

Otwórz ustawienia separatora paska kolorów i zaktualizuj następujące elementy:

  • Kolor tła: brak
  • Kolor tła gradientu po lewej: # 121b55
  • Gradientowy kolor tła po prawej: rgba (255,255,255,0)
  • Kierunek gradientu: 90 stopni
  • Pozycja początkowa: 50%
  • Końcowa pozycja: 0%
animowane liczniki kół na zwoju

W niektórych przeglądarkach występuje niewielki problem nakładania się, który pokazuje niechciany kolor na warstwach. Aby tego uniknąć, nieznacznie zmniejszymy ten półkole i odpowiednio dostosujemy przesunięcie.

  • Szerokość: 248px
  • Wysokość: 248px
animowane liczniki kół na zwoju

Aby okrąg paska koloru zachodził na tylne koło, ustaw dzielnik w absolutnej pozycji w następujący sposób:

  • Pozycja: absolutna
  • Przesunięcie pionowe: 26 pikseli
  • Przesunięcie w poziomie: 26 pikseli
animowane liczniki kół na zwoju

Następnie dodaj następny efekt przewijania, aby obrócić okrągły pasek o 90 stopni (lub 25% koła).

W zakładce Efekty obrotowe ...

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • Początkowy obrót: 0 stopni (przy 15% okna)
  • Średni obrót: 90 stopni (przy 20% -25% okna wyświetlacza)
  • Koniec obrotu: 90 stopni (30% okna wyświetlacza)
animowane liczniki kół na zwoju

Tutaj wartości procentowe i obrotowe mogą nie wydawać się w tym momencie całkowicie sensowne. Ułatwiamy aktualizację obrotu później, gdy budujemy kolejny licznik kół, który kończy się na 180 stopniach (50% koła). Ważną rzeczą w tym momencie jest to, że obrót kończy się o 90 stopni (lub 25%).

Tarcza

Kolejny element w naszym liczniku kół to tarcza, którą nazywam tarczą, która ukrywa lewą stronę koła przed paskiem kolorów podczas obracania się.

Aby utworzyć tarczę, zduplikuj pierwszy moduł separacji tylnego koła, który stworzyliśmy wcześniej. Następnie przeciągnij go pod moduł separacji „Pasek kolorów” i zaktualizuj etykietę w „osłonie”, aby ułatwić korzystanie z niej.

animowane liczniki kół na zwoju

Otwórz ustawienia dzielnika osłony i zaktualizuj następujące elementy:

  • Kolor tła: brak
  • Kolor tła gradientu po lewej: # c3e0e5 (taki sam jak tylne koło)
  • Gradientowy kolor tła po prawej: rgba (255,255,255,0)
  • Kierunek gradientu: 90 stopni
  • Pozycja początkowa: 50%
  • Końcowa pozycja: 0%
animowane liczniki kół na zwoju

Teraz ustaw moduł w pozycji bezwzględnej w następujący sposób:

  • Pozycja: absolutna
  • Przesunięcie pionowe: 25px
  • Przesunięcie w poziomie: 25 pikseli
animowane liczniki kół na zwoju

Przednie koło

Kolejną częścią licznika kół jest przednie koło, które ukryje środkową część poprzednich warstw i odsłoni zewnętrzną krawędź.

Aby go utworzyć, zduplikuj tylny dzielnik koła, upuść go pod modułem dzielnika osłony i zaktualizuj etykietę do „przedniego koła”.

animowane liczniki kół na zwoju

Otwórz ustawienia modułu separacji przedniego okręgu i zaktualizuj następujące elementy:

  • Kolor tła: #ffffff
  • Szerokość: 200px
  • Wysokość: 200px
animowane liczniki kół na zwoju

Następnie dodaj pozycję bezwzględną w następujący sposób:

  • Pozycja: absolutna
  • Przesunięcie pionowe: 50px
  • Przesunięcie w poziomie: 50 pikseli
animowane liczniki kół na zwoju

Liczba przebarwień

Ostatnim elementem tego pierwszego licznika kół jest liczba przebarwień, która odpowiada wartości wskazanej przez obrotowy pasek.

Aby go zbudować, dodaj nowy moduł tekstowy pod modułem separacji przedniego koła.

animowane liczniki kół na zwoju

W obszarze Warstwy nazwij nowy moduł tekstowy „num1”. Następnie otwórz ustawienia i zaktualizuj treść tekstu, aby brzmiał „25%”.

animowane liczniki kół na zwoju

W ustawieniach projektu zaktualizuj następujące elementy:

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

  • Waga czcionki tekstu: pogrubiona
  • Rozmiar tekstu: 25px
  • Wysokość linii tekstu: 2em
  • Wyrównanie tekstu: środek
animowane liczniki kół na zwoju
  • Szerokość: 200px
  • Wysokość: 200px
  • Zaokrąglone rogi: 50%
animowane liczniki kół na zwoju
  • Wypełnienie: powyżej 75 pikseli
  • Pozycja: absolutna
  • Przesunięcie pionowe: 50px
  • Przesunięcie w poziomie: 50 pikseli
animowane liczniki kół na zwoju

Teraz tekst powinien być idealnie wyśrodkowany w liczniku okręgu.

Aby dodać efekt przenikania, zaktualizuj następujące efekty przewijania:

W zakładce Fade in and out ...

  • Włączaj i wyłączaj ściemnianie: TAK
  • Początkowe krycie: 0% (przy 10% okna)
  • Średnie krycie: 100% (przy 20% okna)
  • Koniec krycia: 100% (na 100% okna wyświetlacza)
animowane liczniki kół na zwoju

To wszystko dla okrągłego licznika. Znajdź wynik.

animowane liczniki kół na zwoju

Wszystko, co musisz teraz zrobić, to powielić to, co do tej pory zrobiliśmy w innych kolumnach i zmodyfikować różne wartości, aby licznik był unikalny.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
1 akcji
udział1
ćwierkanie
Enregistrer