Jak łączyć animacje i paralaksę w Divi w celu uzyskania unikalnych projektów?
Opublikowany: 2019-08-07Niezależnie od tego, czy przygotowujemy posiłek, czy projektujemy stronę internetową, same składniki nie zagwarantują smacznego dania ani pięknej witryny. Różnica polega na tym, jak dobrze łączymy ze sobą te elementy. W tym samouczku pokażę, jak połączyć animację i paralaksę obrazu w sposób, o którym nigdy wcześniej nie myślałeś. Jeśli jeszcze nie wiesz, animacja to wbudowana funkcja Divi, którą można dodać do dowolnego elementu Divi podczas ładowania strony. Parallax to również opcja Divi, która pozwala dodać unikalny ruch do obrazów tła podczas przewijania.
Dzisiaj użyjemy wbudowanych ustawień Divi, aby połączyć animacje i paralaksę na wiele kreatywnych sposobów. Ta kombinacja działa razem dość magicznie, tworząc piękny układ animowanych obrazów paralaksy, które wyglądają niesamowicie podczas przewijania strony.
Zacznijmy!
zapowiedź
Pobierz układ 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!
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. Obrazy użyte w tym samouczku można znaleźć w pakiecie Life Coach Divi Layout Pack.
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Podstawowa idea
Podstawowa idea tej koncepcji projektowej koncentruje się na wykorzystaniu paralaksy CSS na obrazach tła. Ze względu na sposób działania paralaksy CSS, obraz paralaksy pozostanie stały i automatycznie wypełni okno przeglądarki, bez względu na rozmiar elementu, który go używa. Stały charakter obrazu pozwala na użycie tego samego obrazu paralaksy na wielu elementach w Divi, a następnie przesuwanie tych elementów za pomocą animacji. Gdy animacja się uspokoi, użyte obrazy tła paralaksy będą pasować i działać zgodnie z oczekiwaniami podczas przewijania strony.
Część 1: Tworzenie animacji Divi i projektu paralaksy (wersja 1)
Utwórz nową sekcję z dwukolumnowym (1/2 1/2) wierszem.
Zanim dodamy nasze moduły, zróbmy kilka zmian w sekcji i wierszu.
Zaktualizuj ustawienia sekcji i wierszy
Najpierw otwórz ustawienia sekcji i wyjmij domyślne wypełnienie w następujący sposób:
Padding: 0px na górze, 0px na dole
Następnie otwórz ustawienia wiersza i nadaj wierszowi obraz tła paralaksy.
Obraz tła: [prześlij obraz]
Użyj efektu paralaksy: TAK
Metoda paralaksy: CSS
Tutaj metoda paralaksy musi być ustawiona na CSS, aby projekt działał.
Szerokość: 100%
Maksymalna szerokość: 100%
Wyściółka: 10vw u góry, 10vw w lewo, 10vw w prawo
Dodaj moduł tekstowy z dopasowanym tłem paralaksy
Teraz jesteśmy gotowi, aby rozpocząć dodawanie naszych modułów tekstowych do projektu. Pierwszy moduł tekstowy jest kluczem do tego projektu. Stosując dokładnie ten sam obraz tła i paralaksę css do modułu tekstowego, możemy uzyskać kreatywną animację dla całkowicie unikalnego efektu.
Śmiało i dodaj nowy moduł tekstowy do kolumny 1.
Następnie zaktualizuj ustawienia modułu tekstowego w następujący sposób:
Zawartość ciała:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Następnie nadaj modułowi tekstowemu ten sam obraz tła paralaksy CSS, który dodałeś do wiersza.
Obraz tła: [prześlij obraz]
Użyj efektu paralaksy: TAK
Metoda paralaksy: CSS
Czcionka tekstu: Fira Sans
Grubość czcionki tekstu: Lekka
Kolor tekstu: #ffffff
Rozmiar tekstu: 70px
Wysokość linii tekstu: 1em
Styl czcionki łącza: podkreślenie (U)
Kolor tekstu łącza: #ffffff (domyślny), #881e67 (najechanie)
Rozmiar tekstu linku: 30 pikseli
Odstępy między literami: 2px
Wypełnienie: 20% góra, 20% dół, 10% lewo, 10% prawo
Szerokość obramowania: 20px
Kolor obramowania: #ffffff
Następnie do modułu tekstowego dodajemy następującą animację:
Styl animacji: slajd
Kierunek animacji: w prawo
Czas trwania animacji: 1500 ms
Intensywność animacji: 80%
Początkowe krycie animacji: 20%
Sprawdźmy dotychczasowy efekt…
Zwróć uwagę, jak obraz tła animowanego modułu tekstowego zatrzymuje się w dopasowanym położeniu tła wiersza. Dzieje się tak, ponieważ oba mają ten sam obraz tła z efektem paralaksy CSS.
Dodawanie drugiego modułu tekstowego z obrazem tła z prawdziwą paralaksą
W tym momencie jesteśmy gotowi do dodania naszego kolejnego modułu tekstowego. Ten następny będzie miał inny obraz tła, wykorzystujący prawdziwy efekt paralaksy. Dodamy też trochę animacji.
Dodaj nowy moduł tekstowy do kolumny 2.
Następnie zaktualizuj treść treści słowem „mój blog”.
Następnie dodaj obraz tła za pomocą prawdziwej metody paralaksy.
Obraz tła: [prześlij obraz]
Użyj efektu paralaksy: TAK
Metoda paralaksy: prawdziwa paralaksa
Czcionka tekstu: Fira Mono
Styl czcionki tekstu: TT
Tekst Wyrównanie tekstu: do środka
Kolor tekstu: #ffffff
Odstępy między literami tekstu: 10px
Szerokość: 320px
Maksymalna szerokość: 320px
Wyrównanie modułu: Środek
Margines: (komputer): -5vw góra, 4vw dół
Marża (tablet i telefon): 3vw top
Padding: 70px góra, 70px dół
Szerokość obramowania: 20px
Kolor obramowania: #ffffff
Styl animacji: slajd
Kierunek animacji: w dół
Opóźnienie animacji: 200 ms
Tworzenie trzeciego modułu tekstowego z nowym obrazem tła paralaksy
Aby utworzyć trzeci moduł tekstowy, zduplikuj moduł tekstowy, który właśnie utworzyłeś w kolumnie 2.
Następnie pozostawimy ten sam obraz tła, ale zaktualizujemy efekt paralaksy za pomocą metody paralaksy CSS.
Szerokość: 240px
Maksymalna szerokość: 240px
Wyrównanie modułu: w lewo
Margines: 0px dół
Padding: 170px góra, 170px dół, 95px po lewej, 95px po prawej
Niestandardowa szerokość oraz prawe i lewe dopełnienie służą do tworzenia pionowego wyświetlacza tekstowego, który dobrze komponuje się z dłuższym projektem modułu.
Następnie zaktualizuj kierunek animacji na górę zamiast na dół.
Kierunek animacji: W GÓRĘ
Ostateczny wynik
Sprawdźmy teraz efekt końcowy.
Część 2: Tworzenie animacji i projektu paralaksy (wersja 2)
Ten następny projekt doda unikalną animację, ładując obraz tła paralaksy dla wiersza po początkowej animacji modułów. Aby to zrobić, będziemy musieli użyć osobnego wiersza wyłącznie dla obrazu tła paralaksy CSS, który będzie poruszał się za treścią. A ponieważ tło naszej sekcji będzie widoczne na początku, możemy dodać niestandardowy kolor tła dla naszej treści przed animacją wiersza.
Oto jak to zrobić.
Najpierw wdróż tryb widoku szkieletowego. Następnie zduplikuj wiersz zawierający Twoje moduły tekstowe. Teraz będziesz miał dwa identyczne rzędy. Następnie usuń moduły tekstowe w górnym wierszu. Wszystko, co naprawdę chcieliśmy zrobić, to uzyskać przewagę nad projektem naszego górnego rzędu.
Następnie zaktualizuj ustawienia dla górnego rzędu w następujący sposób:
Wysokość: 900px (komputer), 2000px (tablet i telefon)
Padding: 0px na górze, 0px na dole
Styl animacji: slajd
Kierunek animacji: w prawo
Czas trwania animacji: 1250 ms
Opóźnienie animacji: 1800 ms
Nadajemy wierszowi ustaloną wysokość, ponieważ pusty wiersz domyślnie nie będzie miał żadnej wysokości. Musisz więc upewnić się, że wysokość wiersza jest wystarczająca, aby pokryć zawartość drugiego wiersza zawartością. Daliśmy również rzędowi animację z opóźnieniem, aby przesunął się za treścią po pojawieniu się modułów tekstowych.
Nakładające się dwa rzędy
Teraz wszystko, co musimy zrobić, to podnieść dolny wiersz w górę z ujemnym marginesem, tak aby nakładał się na górny wiersz z naszą animacją tła.
Otwórz ustawienia dla dolnego rzędu i zaktualizuj margines w następujący sposób:
Margines: -900px góra (komputer), -2000px (tablet i telefon)
Następnie usuń obraz tła metodą paralaksy css dla wiersza, ponieważ zamiast tego użyjemy obrazu tła w górnym wierszu.
Oto projekt do tej pory. Zwróć uwagę na opóźnioną animację tła w pierwszym wierszu i jak idealnie pasuje tło paralaksy modułu tekstowego w kolumnie 1.
Dodawanie koloru tła sekcji
Aby nadać modułom tekstowym początkowy kolor tła przed animacją wiersza, możesz nadać sekcji kolor tła.
Otwórz ustawienia sekcji i dodaj następujące elementy:
Kolor lewego gradientu tła: rgba (136,30,103,0,61)
Gradient tła w prawo kolor: #881e67
Typ gradientu: Promieniowy
Ostateczny wynik
Sprawdźmy teraz efekt końcowy.
Opcjonalne połączenie trybu mieszania i animacji
Możesz także uzyskać jeszcze więcej kreatywności, dodając tryb mieszania w drugim rzędzie i dodając animację powiększenia, która będzie działać w połączeniu z animacjami modułu.
Tryb mieszania: Jasność
Styl animacji: Zoom
Oto ostateczny wynik.
A oto jak to wygląda na telefonie komórkowym.
Końcowe przemyślenia
Mam nadzieję, że nauczyłeś się kilku rzeczy po drodze, gdy badaliśmy kilka unikalnych sposobów łączenia animacji i obrazów paralaksy. Wyniki są zdecydowanie wyjątkowe i jestem pewien, że możesz łatwo dostosować tę konfigurację, aby zbudować niezliczone inne kombinacje, które będą wyglądać oszałamiająco w twoim następnym projekcie.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!