Chcesz zaprojektować tło Divi animowane podczas przewijania strony dzięki maskom i wzorom? Ten poradnik jest dla Ciebie...
Dodanie animacji przewijania do Divi a jego maski i wzory tła to przydatna wskazówka dotycząca projektowania, która może tchnąć nowe życie w projekty tła. Witryna internetowa.
W tym samouczku pokażemy, jak tworzyć i animować maski i wzory tła za pomocą opcji przewijania programu Divi (nie jest potrzebny niestandardowy kod).
Aby to zrobić, utworzymy pływającą warstwę tła za pomocą linii Divi którego będziemy używać do animowania masek i wzorów tła, gdy użytkownik będzie przewijał sekcję treść.
Myślimy, że spodoba ci się wynik.
Zacznijmy!
badanie
Oto krótka ilustracja tego, jak będzie wyglądać animacja przewijania w tle dla tego samouczka.
Koncepcja
Koncepcja tego projektu nie powinna być zbyt trudna do zrozumienia. Zaczynamy od sekcji z gradientowym tłem.
Następnie tworzymy linię, która jest pozycjonowana (bezwzględna) tak, aby całkowicie zakryła przekrój (jak nakładka). Możemy dodać wzór tła do rzędu.
Następnie możemy dodać maskę tła do kolumny.
Następnie dodajemy efekty przewijania do wiersza i kolumny (jak skala i obrót), które będą animować wzór i maskę osobno w tle sekcji.
Kiedy ukrywamy przepełnienie sekcji, widzimy tylko animację zawartą w sekcji.
Zacznijmy od stworzenia strony w Divi Builder
Aby rozpocząć, musisz wykonać następujące czynności:
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Zastosowanie Divi Budowniczy
Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Czytaj także: Divi: Jak korzystać z „Konstruktora gradientów”, aby upiększyć swoje obrazy
Jak tworzyć przewijane animowane maski tła i wzory za pomocą Divi
Projekt tła sekcji
Najpierw pominiemy tworzenie linii i przejdziemy od razu do edycji istniejącej domyślnej sekcji w narzędziu do tworzenia motywów.
Aby nasz projekt tła wypełnił przeglądarkę, musimy dodać pionową wysokość do sekcji. Prostym sposobem na to jest dodanie minimalnej wysokości do sekcji.
Otwórz ustawienia sekcji. Pod zakładką Wnętrze, zaktualizuj minimalną wysokość i usuń wypełnienie w następujący sposób:
- Margines: 80 vh (górny i dolny)
- Wypełnienie: 0 pikseli (góra i dół)
Projektowanie gradientu tła dla sekcji
Możemy teraz dodać niestandardowy gradient tła do sekcji.
Aby dodać pierwsze stopnie gradientu, upewnij się, że ustawienia sekcji są otwarte na karcie Treść. Następnie wybierz zakładkę Gradient tła i kliknij, aby dodać nowy gradient. Spowoduje to dodanie dwóch domyślnych kolorów gradientu. Dodaj następujące stopnie gradientu z kolorem i pozycją w następujący sposób:
- Gradient zatrzymuje się:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Następnie zmień kierunek gradientu liniowego:
- Kierunek gradientu: 270 st
Dodaj wiersze do sekcji
Teraz, gdy nasza sekcja jest na swoim miejscu, dodaj do niej wiersz z jedną kolumną. Ta linia zostanie użyta w naszej masce tła i animacji przewijania wzoru.
Następnie zduplikuj właśnie utworzoną linię. Ta druga (zduplikowana) linia zostanie użyta do naszego treść tak jak zwykle.
Powinieneś teraz mieć górną linię dla animacji przewijania tła i linię dla treść Normal.
Dostosuj linię
Teraz, gdy mamy gotowy gradient tła sekcji, możemy skierować naszą uwagę na linię, której użyjemy do naszej animacji przewijania tła.
Otwórz ustawienia linii. Pod zakładką Zaawansowane, zaktualizuj następujące informacje:
- Pozycja: bezwzględna
Umożliwi to nałożenie linii na sekcję bez zajmowania rzeczywistej przestrzeni w dokumencie.
Teraz wszystko, co musimy zrobić, to zaktualizować wysokość i szerokość, aby obejmowały całą szerokość i wysokość sekcji. Spowoduje to utworzenie potrzebnej nakładki i naszej drugiej warstwy projektu tła.
Pod zakładką Wnętrze, zaktualizuj opcje zmiany rozmiaru w następujący sposób:
- Wysokość kolumny Aquasize: TAK
- Szerokość: 100%
- Maksymalna szerokość: 100%
- Wzrost: 100%
- Wypełnienie: 0 pikseli (góra i dół)
Teraz możesz nie widzieć linii, ale teraz doskonale pokrywa ona tło całej sekcji.
Utwórz wzór tła dla linii
W tym przykładzie dodamy wzór Konfetti jako tło linii.
Otwórz ustawienia linii. Pod opcją Tłowybierz kartę Wzór tła i zaktualizuj następujące elementy:
- Wzór tła: konfetti
- Wzór :
- Kolor: #f6bef7
- Rozmiar: niestandardowy rozmiar
- Szerokość: 35 vw
- Powtórz początek: środek
UWAGA : Użycie jednostki długości VW gwarantuje, że wzór będzie skalowany w przeglądarce, dzięki czemu projekt będzie spójny i responsywny.
Dodaj efekty przewijania do linii
Teraz, gdy nasz wzór tła jest na swoim miejscu, możemy dodać efekty przewijania do linii.
Idź do zakładki Zaawansowane. Pod opcją Przewiń efekty, zaktualizuj następujące informacje:
Wybierz zakładkę Ruch poziomy i zaktualizuj następujące elementy:
- Włącz ruch poziomy: TAK
- Przesunięcie początkowe: 0,5 (przy 0%)
- Przesunięcie środka: 0 (od 40% do 60%)
- Przesunięcie końcowe: -0,5 (przy 100%)
Spowoduje to przesunięcie wzoru tła linii zaczynającego się o 50 pikseli w lewo i kończącego się o 50 pikseli w prawo.
Wybierz kartę „Skaluj w górę i w dół” i zaktualizuj następujące elementy:
- Włącz skalowanie w górę iw dół: TAK
- Skala początkowa: 150% (przy 0%)
- Średnia skala: 100% (od 40% do 60%)
- Skala końcowa: 150% (przy 100%)
Spowoduje to skalowanie wzoru tła wiersza podczas przewijania.
Wybierz zakładkę « obracanie » i zaktualizuj następujące elementy:
- Włącz obracanie: TAK
- Początkowy obrót: 10 stopni (przy 0%)
- Średni obrót: 0 stopni (od 40% do 60%)
- Obrót końcowy: -10 stopni (przy 100%)
KLUCZOWA WSKAZÓWKA: Musisz ograniczyć rotację do minimum lub ryzykujesz pokazanie luk, w których linia nie wykracza poza sekcję. Dobrą zasadą jest zwiększenie skali, jeśli chcesz zwiększyć rotację. Pozwoli to linii obrócić się nad sekcją bez odsłonięcia krawędzi.
Dodaj maskę tła z efektami przewijania do kolumny
Po ukończeniu naszego wiersza jesteśmy gotowi dodać maskę tła z efektami przewijania do kolumny w tym samym wierszu. Na początek dodajmy maskę tła.
Aby to zrobić, otwórz ustawienie kolumny. Pod zakładką Maska tła, zaktualizuj następujące informacje:
- Maska: Kropelka warstwy
- Kolor: #ffffff
- Transformacja maski: odwrócenie w poziomie, odwrócenie
Dodaj efekty przewijania do kolumny
Teraz, gdy nasza maska tła jest na miejscu, możemy dodać efekty przewijania do kolumny. Pamiętaj, że kolumna ma już efekty przewijania odziedziczone z wiersza nadrzędnego.
Wszystko, co zamierzamy zrobić, to obrócić kolumnę w kierunku przeciwnym do rzędu, aby uzyskać większą separację maski i wzoru na czas przewijania.
Idź do zakładki Zaawansowane. W opcjach Przewiń efektywybierz kartę Obróćng i zaktualizuj następujące elementy:
- Włącz obracanie: TAK
- Początkowy obrót: -15 stopni (przy 0%)
- Średni obrót: 0 stopni (od 40% do 60%)
- Obrót końcowy: 15 stopni (przy 100%)
Ukryj przepełnienie sekcji
Obecnie linia pozostaje widoczna zawsze, gdy przewijanie spowoduje jej wysunięcie poza sekcję.
Aby to wyczyścić, musimy ukryć przepełnienie sekcji. Aby to zrobić, otwórz ustawienia sekcji. Pod zakładką Zaawansowane, zaktualizuj opcje widoczności w następujący sposób:
- Przepełnienie poziome: ukryte
- Przepełnienie pionowe: ukryte
Teraz wygląda lepiej.
Zobacz też: Divi: 12 kombinacji masek i wzorów tła
Dodanie treści do utworzonej w tym celu linii
W tym momencie maska tła i animacja przewijania wzoru są gotowe. Wszystko, co musimy zrobić, to dodać żądaną treść do wiersza, który stworzyliśmy wcześniej dla treści.
W tym przykładzie dodaliśmy fikcyjny tytuł, aby zobaczyć, jak będzie wyglądać animacja tła ze statycznym tekstem.
Ostateczny wynik
Rzućmy okiem na efekt końcowy naszego projektu.
Pobierz DIVI teraz !!!
Wnioski
To niesamowite, jak łatwo można tworzyć tak piękne tła za pomocą opcji tła Divi. Ponadto dodanie animacji z efektami przewijania Divi ożywia te projekty.
Aby uzyskać inny wygląd, możesz wypróbować różne maski i wzory na każdej warstwie. Jeśli chcesz więcej inspiracji, jak korzystać z maski i wzory tło, sprawdź to 12 kombinacji masek tła i wzorów
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
