Jak zaprojektować animowany zegar z efektami przewijania Divi

Sieć jest pełna witryn, które wymagają akcentów projektowych związanych z czasem (optymalizacja szybkości, nadchodzące wydarzenia itp.). W większości przypadków ikona zegara lub grafika może działać świetnie. Ale stworzenie animowanego projektu zegara z pewnością nada niepowtarzalny „spin” projektowi Twojej witryny.

Dzięki wszystkim wbudowanym opcjom projektowania dostępnym w Divi, możemy stworzyć od podstaw niesamowity animowany projekt zegara. W tym samouczku stworzymy animowany zegar, który będzie obracał wskazówki zegara, gdy użytkownik przewija stronę w dół.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz animowany układ zegara ZA DARMO

Aby położyć swoje ręce na projektach 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 sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

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: Projektowanie tarczy zegara

Aby rozpocząć, dodaj wiersz z jedną kolumną do zwykłej sekcji.

Ustawienia wiersza

Przed dodaniem jakichkolwiek modułów otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Kolor tła: #003a5c

Na karcie projekt zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 50vw
• Maksymalna szerokość: 500px
• Wysokość: 50vw
• Maksymalna wysokość: 500px

• Zaokrąglone rogi: 50%
• Szerokość obramowania: 15px
• Kolor obramowania: #ffffff

• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 68px
• Kolor cienia: rgba(0,0,0,0.22)

Na karcie Zaawansowane zaktualizuj opcje widoczności w następujący sposób:

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

Część 2: Dodawanie znaczników godzin

Gdy rząd zostanie zaprojektowany jako tarcza zegara, jesteśmy gotowi do dodania znaczników godzin reprezentujących dwanaście godzin 0', trzy godziny 0', sześć godzin 0' i dziewięć godzin 0'. Każdy ze znaczników zostanie utworzony za pomocą modułu dzielnika.

Znacznik godziny 12

Zacznij od dodania nowego modułu rozdzielającego w rzędzie.

Następnie zaktualizuj kolor tła w następujący sposób:

• Kolor tła: #78acf4

• Szerokość: 10vw
• Maksymalna szerokość: 150px
• Wysokość: 3 piks
• Zaokrąglone rogi: 8px
• Przekształć Obróć oś Z: 90deg

W zakładce Zaawansowane nadaj dzielnikowi pozycję bezwzględną:

• Pozycja: bezwzględna
• Lokalizacja: górne centrum

Znacznik godziny 6

Aby utworzyć znacznik godziny trzeciej, zduplikuj dzielnik użyty do utworzenia znacznika godziny 12-tej. (W tym momencie dobrze jest oznaczyć swoje moduły w ramach modu Warstwy.) Następnie otwórz dzielnik duplikatów i zaktualizuj lokalizację pozycji w następujący sposób:

• Lokalizacja: dolne centrum

Znacznik godziny trzeciej

Aby utworzyć znacznik godziny trzeciej, zduplikuj znacznik godziny szóstej. Następnie otwórz ustawienia nowego duplikatu (upewnij się, że oznaczono go jako „godzina trzecia”) i zmień następujące elementy:

• Lokalizacja: prawy środek

Następnie zaktualizuj opcje transformacji w następujący sposób:

Pod zakładką tłumaczenia…

• Przekształć Przesuń oś X: 50%

W zakładce Rotacja

• Przekształć Obróć oś Z: 0deg

Znacznik godziny 9

Aby utworzyć znacznik godziny trzeciej, zduplikuj znacznik godziny szóstej. Następnie otwórz ustawienia nowego duplikatu (upewnij się, że oznaczono go „godziną 9”) i zmień następujące elementy:

• Lokalizacja: lewy środek

Następnie zaktualizuj opcje transformacji w następujący sposób:

Pod zakładką tłumaczenia…

• Przekształć Przesuń oś X: -50%

Część 3: Tworzenie wskazówek zegara (sekunda, minuta i godzina)

Gdy znaczniki godzin są na miejscu, jesteśmy gotowi do rozpoczęcia tworzenia wskazówek zegara. Zaczniemy od drugiej ręki.

Druga ręka

Aby utworzyć sekundnik, zduplikuj dzielnik na godzinie 12 i przeciągnij go poniżej pozostałych dzielników w kolumnie za pomocą modu Warstwy.

Następnie oznacz nowy duplikat jako „drugi”.

Otwórz ustawienia modułu i zaktualizuj pozycję w zakładce Zaawansowane:

• Lokalizacja: centrum centrum

Na karcie projektu zaktualizuj rozmiar w następujący sposób:

• Szerokość: 20vw
• Maksymalna szerokość: 200px
• Wysokość: 0,5vw
• Maksymalna wysokość: 7,5px

Teraz wskazówka sekundnika znajduje się pośrodku tarczy zegara, ale chcemy, aby dolna wskazówka sekundnika zaczynała się od środka, tak jak robiłaby to normalna wskazówka zegara. Następnie chcemy, aby spód wskazówki pozostał pośrodku jako punkt obrotu, aby wskazówka mogła się obracać tak, jak na prawdziwym zegarze. Aby to zrobić, będziemy musieli użyć kombinacji opcji transformacji, aby ustawić i obrócić dzielnik z określonego źródła transformacji.

Zaktualizuj następujące elementy:

Pod zakładką tłumaczenia…

• Transform Translate X Axis: 0% (to ważny krok)

W zakładce Obrót…

• Przekształć Obróć Oś Z: -90deg

Na karcie Pochodzenie…

• Pochodzenie transformacji: lewy środek

Ponieważ ta ręka będzie się poruszać bardzo szybko po dodaniu efektu przewijania, nadajmy jej półprzezroczysty kolor tła, aby nie rozpraszała zbytnio.

• Kolor tła: rgba (175,175,175,0.12)

Wskazówka minutowa

Aby utworzyć wskazówkę minutową, zduplikuj moduł drugiej wskazówki i oznacz duplikat „minuta”. Następnie otwórz nowy moduł rozdzielacza i zaktualizuj kolor tła:

• Kolor gradientu tła po lewej stronie: #78acf4
• Prawy kolor gradientu tła: #b0b9ff
• Kierunek gradientu: 90 stopni

Następnie zaktualizuj projekt w następujący sposób:

• Szerokość: 15 w
• Maksymalna szerokość: 150px
• Wzrost: 1vw
• Maksymalna wysokość: 15px

Wskazówka godzinowa

Gdy wskazówka minutowa jest kompletna, skopiuj moduł Second hand i oznacz duplikat „godzina”. Następnie otwórz nowy moduł rozdzielacza i zaktualizuj kolor tła w następujący sposób:

• Kolor tła: #ffffff

Następnie zaktualizuj rozmiar pod zakładką projektu w następujący sposób:

• Szerokość: 10vw
• Maksymalna szerokość: 100px

W tym momencie wszystkie trzy wskazówki zegara będą gotowe na efekty przewijania!

Część 4: Dodawanie efektów przewijania obrotu do każdej wskazówki zegara

Aby obrócić wskazówki zegara, dodamy efekt przewijania rotacji do każdej z trzech wskazówek zegara. Ponieważ pracujemy nad projektem zegara, ważne jest, aby pamiętać, że możemy użyć stopni obrotu każdej wskazówki zegara, aby przedstawić rzeczywisty czas. Na przykład obrócenie wskazówki godzinowej o 30 stopni oznaczałoby godzinę 1, 60 stopni — godzinę 2 i tak dalej.

Efekt przewijania wskazówki godzinowej

Najpierw dodamy efekt przewijania rotacji do wskazówki godzinowej. Otwórz ustawienia dzielnika wskazówki godzinowej i dodaj następujący efekt transformacji:

Pod zakładką rotacji…

• Włącz obracanie: TAK
• Obrót początkowy: 0 stopni (przy 10%)
• Średni obrót: 15 stopni (przy 50%)
• Obrót końcowy: 30 stopni (przy 90%)

Efekt przewijania wskazówki minutowej

Następnie dodamy efekt przewijania rotacji do wskazówki minutowej. Otwórz ustawienia dzielnika wskazówki minutowej i dodaj następujący efekt transformacji:

Pod zakładką rotacji…

• Włącz obracanie: TAK
• Obrót początkowy: 0 stopni (przy 10%)
• Średni obrót: 180 stopni (przy 50%)
• Końcowy obrót: 360 stopni (przy 90%)

Efekt przewijania z drugiej ręki

Następnie dodamy efekt przewijania rotacji do drugiej ręki. Otwórz ustawienia dzielnika drugiej ręki i dodaj następujący efekt transformacji:

Pod zakładką rotacji…

• Włącz obracanie: TAK
• Obrót początkowy: 0 stopni (przy 10%)
• Średni obrót: 5400 stopni (przy 50%)
• Obrót końcowy: 10800 stopni (przy 90%)

UWAGA: Dokładny obrót sekundnika w celu osiągnięcia 1 godziny wymagałby obrotu o 21600 stopni. Ale ponieważ to zdecydowanie za szybko, pomyślałem, że najlepiej będzie przeciąć to o połowę. W końcu służy to celom projektowym.

Ostateczne rezultaty

Oto ostateczny projekt.

I to jest efekt końcowy efektów przewijania. Zwróć uwagę, że podczas przewijania strony w dół mija dokładnie jedna godzina.

Końcowe przemyślenia

To niesamowite, że możemy stworzyć taki projekt zegara z efektami przewijania, które tak dokładnie reprezentują czas. Zapraszam do eksperymentowania z dodawaniem większej liczby efektów przewijania obrotu, aby przyspieszyć i spowolnić czas na zegarze podczas przewijania. Dodatkowo możesz użyć tego projektu zegara, aby zaakcentować wiele CTA lub nagłówków.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!