Jak animować obrazy tła paralaksy za pomocą efektów przewijania Divi
Opublikowany: 2020-03-05Połączenie efektów przewijania z obrazami tła paralaksy może stworzyć całkiem magiczny projekt dla odwiedzających. Ponieważ efekt paralaksy już wprawia obraz w ruch, gdy użytkownik przewija stronę, dodanie dodatkowych efektów przewijania (takich jak ruch w poziomie i obrót) może naprawdę wyróżnić projekt i otworzyć drzwi dla bardziej kreatywnych układów.
W tym samouczku omówimy, jak animować obrazy tła paralaksy za pomocą efektów przewijania Divi. Użyjemy tego samego obrazu tła na wielu modułach tekstowych, aby zaprojektować unikalny układ wyświetlania krótkiego bloku tekstu.
Zacznijmy.
zapowiedź
Pobierz animowany układ obrazu tła paralaksy ZA DARMO
Aby położyć swoje ręce na układzie 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!
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ąć, musisz wykonać następujące czynności:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
- Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
- Wybierz opcję „Buduj od podstaw”.
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Tworzenie animowanych obrazów tła paralaksy za pomocą efektów przewijania Divi
Dodawanie kolumny
Aby rozpocząć, utwórz wiersz z jedną kolumną.
Tworzenie modułu tekstowego
Następnie dodaj moduł tekstowy do kolumny.
Treść tekstowa
Dodaj literę „p” do treści treści.
Dodaj obraz tła paralaksy do modułu tekstowego
Następnie dodaj obraz tła paralaksy do modułu tekstowego w następujący sposób:
- Obraz tła: wstaw obraz
- Użyj efektu paralaksy: TAK
- Metoda paralaksy: CSS
Projektowanie tekstu
Na karcie projekt zaktualizuj następujące elementy:
- Czcionka tekstu: Montserrat
- Styl czcionki tekstu: TT
- Kolor tekstu: #ffffff
- Tekst Rozmiar tekstu: 100px (komputer), 70px (telefon)
- Odstępy między literami: 5px (telefon)
- Wysokość linii tekstu: 1em
- Wyrównanie tekstu: do środka
- Padding: 250px góra, 250px dół
Wypełnienie jest tym, co tworzy niezbędną wysokość potrzebną do wyeksponowania obrazu tła paralaksy.
Ustawienia wiersza
Teraz, gdy nasz moduł tekstowy jest gotowy, otwórz ustawienia wiersza i zaktualizuj następujące elementy:
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 100%
Ustawienia kolumny 1
Następnie kliknij, aby otworzyć ustawienia kolumny.
Na karcie Zaawansowane zaktualizuj następujące efekty przewijania:
Na karcie Efekty ruchu poziomego…
- Włącz poziomo: TAK
- Przesunięcie początkowe: -2 (przy widoku 0%)
- Przesunięcie środkowe: 0 (przy 40%-60%)
- Przesunięcie końcowe: -2 (przy 100%)
Na karcie Efekty obracania…
- Włącz obracanie: TAK
- Obrót początkowy: 20 stopni (przy widoku 0%)
- Średnia rotacja: 0 stopni (przy 40%-60%)
- Końcowy obrót: -20 stopni (przy 100%)
Tworzenie kolumny 2
Mimo że zaczęliśmy od układu jednokolumnowego, stworzymy w sumie 5 kolumn. Po prostu łatwiej jest zduplikować kolumnę z całą jej zawartością i ustawieniami, aby utworzyć kolejne cztery potrzebne do projektu.
Powiel całą pierwszą kolumnę (z modułem tekstowym), aby utworzyć drugą kolumnę.
Aktualizowanie efektów przewijania w kolumnie 2
Następnie zaktualizuj efekty przewijania w kolumnie 2 w następujący sposób:
Na karcie Efekty obracania…
- Obrót początkowy: -20 stopni
- Końcowy obrót: 20 stopni
Tworzenie kolumny 3
Aby utworzyć kolumnę 3, zduplikuj kolumnę 2.
Aktualizowanie efektów przewijania w kolumnie 3
Następnie zaktualizuj ustawienia kolumny 3 w następujący sposób:
Na karcie Efekty ruchu poziomego…
- Włącz ruch poziomy: NIE
Na karcie Efekt rotacji…
- Obrót początkowy: 20 stopni
- Końcowy obrót: 10 stopni
Tworzenie kolumny 4
Aby utworzyć kolumnę 4, zduplikuj kolumnę 2, a następnie przeciągnij ją na dół.
Aktualizowanie efektów przewijania w kolumnie 4
Następnie otwórz ustawienia dla kolumny 4 i zaktualizuj następujące elementy:
Na karcie Efekty ruchu poziomego…
- Przesunięcie początkowe: 2
- Przesunięcie końcowe: 2
Na karcie Efekty rotacji…
- Obrót początkowy: -15 stopni
- Końcowy obrót: 20 stopni
Tworzenie kolumny 5
Na koniec, aby utworzyć kolumnę 5, zduplikuj kolumnę 4.
Aktualizowanie efektów przewijania w kolumnie 5
Następnie zaktualizuj ustawienia kolumny 5 w następujący sposób:
Na karcie Efekty rotacji…
- Obrót początkowy: 15 stopni
- Końcowy obrót: -15 stopni
Aktualizacja liter modułu tekstowego
Następnie użyj opcji tekstu wbudowanego, aby zmienić litery w każdej kolumnie, tak aby razem tworzyły słowo „moc”.
Aktualizacja projektu modułu tekstu środkowego
Otwórz ustawienia modułu tekstowego w kolumnie 3 i zaktualizuj następujące elementy:
- Czcionka tekstu: Montserrat Subrayada
- Kolor tekstu tekstu: #e0e722
- Rozmiar tekstu: 150px (komputer)
- Wysokość linii tekstu: 100px
Zaktualizuj zawartość pierwszego modułu tekstowego dla urządzeń mobilnych
Aby wyświetlić pojedynczy moduł tekstowy na telefonie komórkowym, musimy zaktualizować moduł tekstowy w kolumnie 1 o następującą treść na wyświetlaczu tabletu i telefonu:
Treść treści na tablecie i telefonie:
<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>
Aktualizuj ustawienia kolumny 1
Następnie otwórz ustawienia dla kolumny 1 i zaktualizuj następujące elementy:
- Zaokrąglone rogi (pulpit): 100% w lewym górnym rogu
- Zaokrąglone rogi (tablet i telefon): 40% górny lewy, 40% dolny prawy
Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do wyświetlacza tabletu głównego elementu:
width: 100% !important;
Dzięki temu kolumna obejmuje całą szerokość wiersza na wyświetlaczu tabletu i telefonu.
Ukryj pozostałe kolumny na wyświetlaczu tabletu i telefonu
Teraz, gdy kolumna 1 zajmie całą szerokość wiersza na tablecie i telefonie, możemy ukryć/wyłączyć pozostałe kolumny na tablecie i telefonie. Aby to zrobić, otwórz ustawienia dla kolumn 2-5 i wyłącz widoczność każdej z kolumn na telefonie i tablecie.
Zaktualizuj ustawienia kolumny 5
Następnie otwórz ustawienia kolumny 5 i dodaj uzupełniający zaokrąglony róg w następujący sposób:
- Zaokrąglone rogi (pulpit): 100% w prawym dolnym rogu
Dodawanie projektu tła do sekcji
Aby zakończyć projekt, zaktualizuj ustawienia przekroju za pomocą projektu tła w następujący sposób:
- Kolor tła: #e0e722
- Styl Top Divider: Zobacz zrzut ekranu
- Kolor górnego rozdzielacza: #222222
- Wysokość dzielnika górnego: 650px (komputer), 500px (tablet i telefon)
- Styl dolnego rozdzielacza: patrz zrzut ekranu
- Kolor dolnej przegrody: #222222
- Wysokość dolnej przegrody: 500px (komputer), 400px (tablet i telefon)
Ostateczny wynik
Hre jest ostatecznym projektem na pulpicie.
A oto projekt awaryjny na wyświetlaczu tabletu i telefonu.
Końcowe przemyślenia
Obrazy tła paralaksy łączą się z efektami przewijania w naprawdę magiczny sposób. Jedynym minusem używania obrazów tła paralaksy jest brak obsługi urządzeń mobilnych, ale dzięki responsywnym ustawieniom, które zapewnia Divi, możemy łatwo stworzyć awaryjne rozwiązanie. Mam nadzieję, że ten elegancki wzór doda inspiracji do Twojego dnia.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!