4 animowane przyciski przewijania dla sekcji bohaterów witryny Divi (i jak je tworzyć)
Opublikowany: 2019-08-08Animowane przyciski przewijania mają proste, ale ważne zadanie, aby przyciągnąć uwagę użytkowników i prowadzić ich w dół strony internetowej. Przyciski tego typu znajdują się zwykle nad zakładką, dzięki czemu odwiedzający może po prostu kliknąć przycisk bez konieczności przewijania do następnej ważnej sekcji strony internetowej. W rzeczywistości Divi ma tę funkcję przycisku przewijania wbudowaną w moduł nagłówka o pełnej szerokości.
W tym samouczku pokażę, jak stworzyć całkowicie niestandardowe animowane przyciski przewijania w Divi. Tak więc, jeśli szukasz kreatywnej alternatywy dla wbudowanego przycisku przewijania Divi w module nagłówka o pełnej szerokości, te animowane projekty przycisków przewijania pomogą wskazać właściwy kierunek (dosłownie).
zapowiedź
Oto krótkie spojrzenie na projekty, które wspólnie zbudujemy.
Pobierz układ animowanych przycisków przewijania 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 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.
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!
Subskrybuj nasz kanał YouTube
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Aby rozpocząć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Obrazy, które mają być wykorzystane do pozorowanych treści
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Budowanie sekcji nagłówka
Zanim zaczniemy projektować animowane przyciski przewijania, musimy skonfigurować naszą symulowaną sekcję nagłówka. Ponieważ zamierzamy bardziej skoncentrować się na uzyskaniu projektów animowanych przycisków przewijania, zamierzamy zachować prosty projekt nagłówka z ciemnym tłem. Po zakończeniu możemy powielić sekcję, aby poradzić sobie z każdym nowym projektem przycisku przewijania.
Aby rozpocząć, utwórz zwykłą sekcję z jednym wierszem kolumny.
Następnie przed dodaniem modułu otwórz ustawienia sekcji i dodaj ciemne tło w następujący sposób:
Kolor tła: #222222
Każde ciemne tło będzie działać.
Dodaj tekst nagłówka
Aby utworzyć próbny tekst nagłówka, dodaj nowy moduł tekstowy do jednego wiersza kolumny.
Następnie zaktualizuj treść treści o nagłówek h1 tuż nad domyślnym tekstem akapitu.
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
Następnie zaktualizuj ustawienia projektu w następujący sposób:
Czcionka tekstu: Karla
Tekst Wyrównanie tekstu: do środka
nagłówek Rozmiar tekstu: 5vw
Kolor tekstu: jasny
Będzie to podstawowy projekt sekcji, którego użyjemy dla naszych różnych animowanych przycisków przewijania.
Animowany projekt przycisku przewijania nr 1: Pionowy tekst z animacją powolnego odbicia
Po wdrożeniu naszego podstawowego projektu sekcji jesteśmy gotowi do dodania naszego pierwszego animowanego przycisku przewijania. Ten przycisk przewijania składa się z modułu notki, który będzie miał ikonę po prawej stronie. Następnie tekst i ikona zostaną obrócone w pionie, tak aby ikona strzałki była skierowana w dół. Następnie dodamy animację odbicia o wolnym czasie trwania.
Oto jak to zrobić.
Najpierw dodaj nowy jednokolumnowy wiersz tuż pod naszym wierszem zawierającym tekst nagłówka.
Następnie dodaj moduł notki do wiersza.
W ustawieniach notki usuń domyślną treść treści i dodaj następujące elementy:
Tytuł: zwój
Użyj ikony: TAK
Ikona: strzałka w prawo (patrz zrzut ekranu)
Następnie zaktualizuj ustawienia projektu w następujący sposób:
Kolor ikony: #ffffff
Umieszczenie obrazu/ikony: po lewej
Użyj rozmiaru czcionki ikony: TAK
Rozmiar czcionki ikony: 50px
Styl czcionki tytułu: TT
Kolor tekstu tytułu: #ffffff
Rozmiar tekstu tytułu: 14px
Odstępy między literami tytułu: 3px
Wysokość wiersza tytułu: 50px (taka sama jak wielkość czcionki ikony)
Następnie musimy nadać naszemu notatce ustaloną szerokość i obrócić go w pionie w następujący sposób:
szerokość: 132px
Wyrównanie modułu: środek
Przekształć Obróć oś Z: 90deg
Teraz wystarczy odwrócić kolejność treści notki, tak aby ikona strzałki znajdowała się po prawej stronie notki, a nie po lewej. Spowoduje to, że strzałka będzie wyświetlana pod tekstem pionowym zgodnie z przeznaczeniem. Aby to zrobić, musimy dodać następujący niestandardowy kod CSS do elementu głównego:
direction: rtl;
Dodawanie animacji powolnego pulsu
Aby dodać animację, zaktualizuj następujące elementy:
Styl animacji: odbicie
Kierunek animacji: w dół
Czas trwania animacji: 5000 ms
Opóźnienie animacji: 400 ms
Animacja obrazu/ikony: od lewej do prawej
Ostateczny wynik
Sprawdźmy teraz ostateczny wynik projektu #1.
Animowany projekt przycisku przewijania nr 2: Pionowa animacja tekstu markizy
Następny projekt opiera się na projekcie nr 1, w którym zachowamy przycisk przewijania tekstu w pionie utworzony za pomocą modułu blurb. Różnicą będzie animacja. W tym projekcie dodamy animację slajdu, która zaczyna się od ukrycia przycisku przewijania nad kontenerem wiersza, a kończy na tym, że przycisk jest ukryty pod wierszem. Z animacją w pętli stworzy to efekt animacji markizy tekstu, który przyciągnie uwagę użytkownika.
Oto jak to zrobić.
Najpierw zduplikuj cały fragment projektu #1.
Zaktualizuj ustawienia wiersza 2
Następnie zaktualizuj wiersz sekcji zawierający moduł/przycisk przewijania notki w następujący sposób:
Przepełnienie poziome: ukryte
Przepełnienie pionowe: ukryte
Zaktualizuj ustawienia modułu Blurb
Aby stworzyć animację markizy, najpierw musimy użyć transform translate, aby przenieść tekst blurb poniżej kontenera wiersza (ukrytego). To będzie pozycja tekstu na końcu animacji. Zaktualizuj następujące elementy:
Przekształć Przesuń oś Y: 115px
Następnie dodaj następujące ustawienia animacji:
Styl animacji: slajd
Kierunek animacji: w dół
Czas trwania animacji: 4000 ms
Intensywność animacji: 195%
Początkowe krycie animacji: 100%
Krzywa prędkości animacji: liniowa
Powtórzenie animacji: pętla
Ostateczny wynik
Sprawdźmy teraz ostateczny wynik projektu #3.
Animowany projekt przycisku przewijania nr 3: karta strzałki z opóźnioną animacją przesuwania w dół
W następnym projekcie połączymy moduł tekstowy i moduł notatek, aby stworzyć unikalny projekt zakładki ze strzałkami.
W tym projekcie zaczniemy od podstawowego projektu sekcji nagłówka. Możesz więc zduplikować sekcję projektu nr 3, a następnie usunąć moduł notki w wierszu 2.
Następnie dodaj moduł tekstowy do jednego wiersza kolumny bezpośrednio pod pierwszym wierszem.
Następnie zaktualizuj treść treści słowem „przewiń”.
Następnie zaktualizuj ustawienia projektu w następujący sposób:
Kolor tła: #ffffff
Kolor tekstu tekstu: #222222
Wyrównanie tekstu: do środka
Szerokość: 50px
Wyrównanie modułu: środek
Margines: 0px dół
Padding: 20px góra, 20px dół
Zaokrąglone rogi 5px na dole po lewej, 5px na dole po prawej
Dodaj ikonę rozmycia
Teraz, gdy moduł tekstowy jest na swoim miejscu, musimy utworzyć ikonę notki bezpośrednio pod nim, aby ukończyć projekt zakładki strzałki. Aby to zrobić, dodaj nowy moduł notki pod modułem tekstowym.
Następnie usuń domyślny tytuł i treść. Następnie dodaj zaktualizuj następujące elementy:
Użyj ikony: TAK
Ikona: dolny trójkąt strzałki (patrz zrzut ekranu)
Następnie zaktualizuj ustawienia w następujący sposób:
Kolor ikony: #ffffff
Margines: -36px góra, 0px dół
Ten ujemny margines dołączy strzałkę do modułu tekstowego, aby uzyskać ładny projekt zakładki ze strzałkami.
Następnie dodaj następujący kod CSS do obrazu rozmycia, aby usunąć niepotrzebny margines pod ikoną.
Rozmycie obrazu CSS:
margin-bottom: 0px;
Ustawienia i animacja rzędu 2
Ponieważ chcemy dodać tę samą animację do obu modułów tworzących projekt przycisku przewijania, musimy dodać animację do wiersza, który je zawiera. Zaktualizuj ustawienie wiersza w następujący sposób:
Maksymalna szerokość: 100px
Padding: 0px na górze, 0px na dole
Styl animacji: slajd
Kierunek animacji: w dół
Czas trwania animacji: 1200 ms
Wiersz 1 Kolor tła i cień pudełka
Ostatnim akcentem tego projektu jest dodanie koloru tła do pierwszego rzędu bezpośrednio nad rzędem przycisku przewijania. A aktualizując indeks Z tego wiersza, pozwolimy, aby animacja przycisku przewijania wyglądała tak, jakby przebijała się przez nagłówek.
Otwórz ustawienia dla wiersza 1 w następujący sposób:
Kolor tła: #222222
Indeks Z: 10
Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 80px
Siła rozmycia cieni w pudełku: 22px
Siła rozprzestrzeniania się cieni w pudełku: -70px
Kolor cienia: #222222 (upewnij się, że pasuje do koloru tła)
Ostateczny wynik
Teraz sprawdź efekt końcowy.
Animowany projekt przycisku przewijania nr 4: Animacja przewijania myszy
W przypadku tego ostatniego animowanego przycisku przewijania stworzymy animację przewijania myszą, łącząc moduł tekstowy i moduł notatek.
Oto jak to zrobić.
Aby rozpocząć, możesz skorzystać z podstawowej sekcji nagłówka. Następnie dodaj nowy wiersz pod wierszem 1.
Dodaj moduł Blurb
Następnie dodaj moduł notki do wiersza. Następnie usuń domyślny tytuł i treść.
Następnie zaktualizuj ikonę w następujący sposób:
Użyj ikony: TAK
Ikona: kółko (patrz zrzut ekranu)
Następnie zaktualizuj ustawienia projektu notki w następujący sposób:
Kolor ikony: #ffffff
Użyj rozmiaru czcionki ikony: TAK
Rozmiar czcionki ikony: 15px
Styl animacji: slajd
Kierunek animacji: w dół
Czas trwania animacji: 1200 ms
Powtórzenie animacji: pętla
Animacja obrazu/ikony: brak animacji
Następnie dodaj następujący niestandardowy kod CSS do obrazu Blurb:
margin-bottom: 0px;
Dodaj moduł tekstowy
Następnie dodaj nowy moduł tekstowy bezpośrednio pod modułem notki. Następnie zaktualizuj tekst treści słowem „przewiń”.
Następnie zaktualizuj następujące ustawienia tekstu:
Kolor tekstu: #ffffff
Wyrównanie tekstu: do środka
Szerokość: 90px
Margines: 10px u góry, -30px w lewo
Zaktualizuj ustawienia wiersza 2
Teraz zaktualizuj ustawienia wiersza w następujący sposób:
Szerokość: 30px
Wysokość: 60px
Zaokrąglone rogi: 16px
Szerokość obramowania: 1px
Kolor obramowania: #ffffff
Styl obramowania: Solidny
Przepełnienie poziome: widoczne
Przepełnienie pionowe: widoczne
Wynik końcowy
Sprawdźmy teraz końcowy wynik:
Dodawanie funkcji zakotwiczenia linku
Linki zakotwiczone to te linki, które przechodzą do różnych sekcji strony. Są one często używane w witrynach typu one page. Możemy użyć tej samej koncepcji, aby dodać link do kotwicy do naszych przycisków przewijania, aby przeskakiwały w dół strony do żądanej sekcji. Aby dodać funkcję linku do kotwicy do animowanych przycisków przewijania, musisz zrobić dwie główne rzeczy.
- Musisz dodać identyfikator CSS do sekcji lub wiersza, do którego chcesz przejść
- Musisz dodać link kotwicy z tym samym identyfikatorem CSS do przycisku przewijania
Oto jak to działa. Najpierw utwórz nową sekcję pod sekcją nagłówka zawierającą przycisk przewijania. Następnie nadaj nowej sekcji identyfikator CSS w zakładce Zaawansowane.
Następnie znajdź element/przycisk przewijania, który chcesz zamienić w link do kotwicy i dodaj adres URL, który zaczyna się od hashtagu (lub symbolu funta), a zaraz po nim następuje identyfikator CSS elementu, do którego przeskakujesz.
Na przykład, jeśli identyfikator CSS sekcji to „sekcja-2”, należy dodać „#sekcja-2” jako adres URL linku.
Pamiętaj, że Divi umożliwia dodawanie adresów URL linków do każdego elementu w Divi, więc możesz dodawać linki do całego wiersza zawierającego animowany przycisk przewijania.
Aby uzyskać więcej informacji, sprawdź kilka fajnych rzeczy, które możesz zrobić dzięki linkom do kotwicy.
Bądź kreatywny!
Nie bój się łączyć różnych modułów i animować je na różne sposoby. W rzeczywistości, gdy odkrywałem nowe sposoby projektowania przycisków przewijania za pomocą Divi, stworzyłem zabawną animację przewijania kciukiem, która może być używana na urządzeniach mobilnych. Dołączyłem go do bezpłatnego pobrania powyżej, na wypadek gdybyś chciał to sprawdzić.
Końcowe przemyślenia
Animowane przyciski przewijania, takie jak te, są łatwe do zbudowania w Divi. I mogą być używane w większej liczbie miejsc niż nagłówek, jeśli traktujesz je jak linki kotwiczne. Mam nadzieję, że te projekty zainspirują Cię do stworzenia zupełnie nowego przycisku przewijania do następnego projektu.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!