Jak stworzyć odrywane przejście obrazu za pomocą efektów przewijania Divi

Efekty przewijania Divi pozwalają nam tworzyć wyjątkowe animacje przejścia, które mogą zachwycić odwiedzających przyciągającym wzrok designem. Zwłaszcza obrazy mogą w zaskakujący sposób ukazać moc tych efektów przewijania. W tym samouczku wyjaśnimy krok po kroku, jak utworzyć odrywane przejście obrazu za pomocą efektów przewijania Divi. Ten efekt był pierwotnie opisywany na stronie demonstracyjnej. Efekt polega na wcześniejszym wycięciu obrazów za pomocą edytora zdjęć, takiego jak Photoshop (jest to dość łatwe do zrobienia). Po pocięciu obrazów wystarczy dodać je do Divi i użyć wbudowanych efektów przewijania, aby stworzyć magię.

Zacznijmy.

zapowiedź

Oto rzut oka na projekt na dziś.

Możesz również zobaczyć oryginalne demo projektu na żywo na stronie demo pod tytułem „Ćwiczenie nie musi być nudne”.

Pobierz układ Breakaway Image Transition Divi 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 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 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:

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.

Oprócz powyższej konfiguracji Divi będziesz potrzebować:

• Dwa obrazy (co najmniej 1080 na 540 pikseli)
• Oprogramowanie do edycji zdjęć, takie jak Photoshop, do wycinania obrazów przed dodaniem ich do Divi.

Część 1: Krojenie obrazów w Photoshopie

Zanim zaczniemy tworzyć nasz projekt w Divi, musimy pokroić nasze dwa obrazy, które będą używane do efektu przewijania oderwania przejścia. Oba obrazy będą musiały zostać przycięte, aby miały dokładnie 1080 na 540 pikseli. Następnie należy je pokroić na 8 równych części (4 w poprzek, 2 w dół). Po przygotowaniu możemy zapisać je na naszym komputerze i przesłać wycinki obrazu na naszą stronę. Zacznijmy od pierwszego obrazu.

Obraz #1

Przycinanie obrazu

Pierwszą rzeczą, którą musimy zrobić, to przyciąć obraz tak, aby miał dokładne wymiary 1080px 540px. W tym celu możesz użyć dowolnego oprogramowania do edycji obrazu. W Photoshopie możesz użyć narzędzia do przycinania.

Krojenie obrazu

Następnie kliknij, aby użyć narzędzia do cięcia na plasterki i zaznacz cały obraz. Kliknij prawym przyciskiem myszy plasterek/obraz i wybierz opcję Podziel plasterek.

W polu opcji Podziel plasterek zaktualizuj następujące elementy:

Podziel poziomo na:

• 2 plastry w dół, równomiernie rozmieszczone
• 270 pikseli na plasterek

Podziel pionowo na:

• 4 plastry w poprzek, równomiernie rozmieszczone
• 270 pikseli na plasterek

Następnie kliknij OK.

Zapisywanie plasterków obrazu

Teraz mamy obraz podzielony na 8 równych bloków, każdy z nich 270px na 270px.

Aby zapisać plasterki obrazu, przejdź do Plik > Eksportuj > Zapisz dla Internetu.

Następnie wybierz format pliku i kliknij Zapisz.

W wyskakującym okienku zaktualizuj następujące informacje:

• Zapisz jako: [wprowadź nazwę obrazu(ów)]
• Format: tylko obrazy
• Ustawienia: Ustawienia domyślne
• Plastry: Wszystkie plastry

Następnie kliknij Zapisz.

Teraz wszystkie plasterki obrazu zostaną zapisane na komputerze, gotowe do przesłania do Divi.

Obraz #2

Aby utworzyć drugi obraz potrzebny do tego efektu przewijania odrywanego obrazu przejścia, powinniśmy postępować zgodnie z tym samym procesem (kadrowanie, krojenie i zapisywanie), co przy tworzeniu pierwszego obrazu.

Obróć plasterki obrazu

Jednak ze względu na sposób działania efektu przewijania obrotowego każdy plasterek obrazu, który składa się na drugi obraz, będzie musiał zostać obrócony o 90 stopni w lewo lub w prawo.

Aby obrócić obraz, możesz użyć programu Photoshop lub wbudowanego oprogramowania do edycji obrazów z systemu operacyjnego (możesz nawet użyć galerii multimediów WordPress, aby edytować i obracać obrazy po przesłaniu ich do witryny).

Oto przewodnik, w jaki sposób obrazy powinny być obracane w ich oryginalnej pozycji podczas krojenia obrazu.

Oto oryginalny obraz.

Oto jak należy obracać plasterki obrazu przed przesłaniem ich do witryny.

Jest to konieczne, abyśmy w końcu mogli uzyskać następujący efekt przewijania.

Teraz, gdy oba obrazy są przycięte, pokrojone, zapisane i obrócone, możesz dodać je do swojej witryny Divi. Powinieneś mieć w sumie 16 obrazów (8 z obrazka pierwszego i 8 z obrazka 2).

Część 2: Tworzenie efektu przewijania odrywanego przejścia obrazu w Divi

Gdy plasterki obrazu są gotowe, możemy rozpocząć proces projektowania w Divi. Oto jak to zrobić.

Dodaj wiersz nr 1

Aby rozpocząć, utwórz wiersz z czterema kolumnami.

Ustawienia wiersza

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Maksymalna szerokość: 1080px (komputer), 540px (tablet i telefon)
• Padding: 0px na górze, 0px na dole
• Przepełnienie poziome: widoczne
• Przepełnienie pionowe: widoczne

Aktualizuj dopełnienie sekcji

Ponieważ zamierzamy umieszczać nasz drugi rząd absolutnie na górze pierwszego rzędu, musimy usunąć górną (i dolną) wyściółkę sekcji, aby nie zmieniała pozycji drugiego rzędu. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Padding: 0px u góry, 0px w lewo

Dodawanie obrazów

W pierwszym rzędzie dodamy każdy z 8 obrazów/plastrów, które tworzą pierwszy obraz. Obrazy powinny być umieszczone w kolumnach dokładnie tak, jak zostały pocięte w Photoshopie (4 w poprzek i 2 w dół).

Oto ilustracja każdego obrazu oznaczonego numerem. Tak powinno wyglądać po dodaniu wszystkich obrazów do rzędu.

Obraz #1

Dodaj pierwszy moduł obrazu do kolumny 1.

Następnie prześlij pierwszy wycinek obrazu do modułu.

Efekty przewijania

Na karcie Zaawansowane dodaj do obrazu następujące efekty przewijania.

• Włącz pojawianie się i zanikanie: TAK
• Początkowe krycie: 100% (przy 20% widocznym obszarze)
• Średnie krycie: 100% (przy 20% widocznym obszarze)
• Końcowe krycie: 0% (przy 50% widocznym obszarze)

Kliknij kartę Skaluj i zaktualizuj następujące elementy:

• Włącz skalowanie w górę i w dół: TAK
• Skala początkowa: 100% (przy 20% widocznym obszarze)
• Skala średnia: 70% (przy 32% – 48% widoczności)
• Skala końcowa: 100% (przy 60% widocznym obszarze)

Kliknij kartę obracania i zaktualizuj następujące elementy:

• Włącz obracanie: TAK
• Obrót początkowy: 0 stopni (przy widoku 0%)
• Średnia rotacja: 0 stopni (przy 20% widoku)
• Końcowa rotacja: -90 stopni (przy 60% widoku)

Efekt przewijania będzie wyglądał tak podczas przewijania strony.

Obraz #2

Aby utworzyć obraz nr 2, zduplikuj obraz nr 1 i umieść duplikat w kolumnie 2.

Zaktualizuj zduplikowany moduł obrazu za pomocą obrazu #2.

Zaktualizuj efekt przewijania

Zamierzamy zachować większość tych samych efektów przewijania przeniesionych z obrazka 1. Jedyne, co musimy zmienić, to rotacja. Przejdź do zakładki zaawansowane i zmień końcowy obrót na 90 stopni (zamiast -90 stopni), aby obracał się w przeciwnym kierunku.

• Zakończenie obrotu: 90 stopni

Obraz #3

Aby utworzyć obraz nr 3, skopiuj i wklej obraz nr 1 do kolumny 3, a następnie zmień obraz na obraz nr 3.

Obraz #4

Aby utworzyć obraz #4, skopiuj i wklej obraz #2 do kolumny 4 i zaktualizuj obraz do obrazu #4.

Obraz #5

Aby utworzyć obraz nr 5, zduplikuj obraz nr 1, tak aby duplikat znajdował się bezpośrednio pod spodem w kolumnie 1.

Zaktualizuj obraz do obrazu nr 5. Następnie zaktualizuj efekt przewijania pojawiania się i znikania w następujący sposób:

• Nieprzezroczystość początkowa: 100% (przy widocznym obszarze 0%)
• Średnie krycie: 100% (przy widocznym obszarze 0%)
• Końcowe krycie: 0% (przy 40% widocznym obszarze)

Następnie zaktualizuj efekt przewijania Skalowanie w górę i w dół w następujący sposób:

• Skala początkowa: 100% (przy widocznym obszarze 0%)
• Skala średnia: 70% (przy 12% – 28% widoczności)
• Skala końcowa: 100% (przy 40% widocznym obszarze)

I na koniec zaktualizuj efekt przewijania obrotowego w następujący sposób:

• Obrót początkowy: 0 stopni (przy widoku 0%)
• Obrót w połowie: 0 stopni (przy widoku 0%)
• Obrót końcowy: 90 stopni (przy 40% widoku)

Obraz #6

Aby stworzyć obrazek #6, zduplikuj obrazek #5 i przenieś go do kolumny 2 (pod obrazkiem #2).

Zaktualizuj moduł obrazu za pomocą obrazu #5. Następnie ustaw efekt przewijania obrotowego w przeciwnym kierunku (-90 stopni) w następujący sposób:

• Końcowy obrót: -90 stopni

Obraz nr 7

Aby utworzyć obraz nr 7, zduplikuj obraz nr 5 i przenieś go pod obraz nr 3 w kolumnie 3. Następnie zaktualizuj moduł duplikatu obrazu obrazem nr 7.

Obraz nr 8

Aby utworzyć obraz #8, zduplikuj obraz #6 i przenieś go pod obrazem #4 w kolumnie 4. Następnie zaktualizuj moduł duplikatu obrazu obrazem #8.

Teraz wszystkie plasterki obrazu zostały dodane do pierwszego rzędu z efektem przewijania odrywanego.

Oto jak wygląda dotychczasowy wynik.

Dodaj wiersz nr 2

Projektowanie drugiego rzędu obrazów nie zajmie dużo czasu. Wszystko, co musimy zrobić, to zduplikować wiersz nr 1, zaktualizować wszystkie obrazy właściwymi, a następnie nadać mu pozycję bezwzględną.

Śmiało i zduplikuj wiersz nr 1.

Zaktualizuj obrazy rzędu 2

Zapamiętaj obrócone obrazy, które stworzyliśmy dla obrazu nr 2. Teraz wszystko, co musimy zrobić, to przesłać każdy z nich do właściwej lokalizacji modułu obrazu w wierszu nr 2.

Zaktualizuj efekty przewijania obrazu

Gdy nowe obrócone obrazy są na miejscu, musimy usunąć efekt przewijania zanikania i zanikania ze wszystkich obrazów w rzędzie 2.

Zrób to, wdróż tryb widoku krawędziowego i użyj wielokrotnego wyboru, aby wybrać wszystkie 8 obrazów w wierszu 2. Następnie otwórz ustawienia jednego z wybranych obrazów, aby wdrożyć ustawienia Elementu. W opcji Efekt przewijania zanikania i wygaszania zaktualizuj następujące elementy:

• Włącz pojawianie się i zanikanie: NIE

Pozycja rząd nr 2

Naszym ostatnim krokiem jest umieszczenie rzędu nr 2 bezpośrednio za rzędem nr 1. Prostym sposobem na to jest podanie wiersza i pozycji bezwzględnej. Otwórz ustawienia dla wiersza nr 2 i zaktualizuj następujące elementy:

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

Ostateczny wynik

Aby zobaczyć wynik, może być konieczne nadanie sekcji znacznej części górnego i dolnego marginesu lub utworzenie innych sekcji powyżej i poniżej projektu. To da ci pokój, w którym potrzebujesz, aby prawidłowo zobaczyć efekt przewijania.

Sprawdźmy efekt końcowy.

I oto jest na telefonie komórkowym.

Końcowe przemyślenia

To oderwane przejście obrazu samo w sobie jest imponującym projektem, ale można go z łatwością wykorzystać, aby przekazać odwiedzającym wiadomość o typie transformacji (np. przed i po). I nie musisz zadowolić się tym projektem. Zachęcamy do eksperymentowania z różnymi efektami przewijania, aby tworzyć jeszcze bardziej niesamowite przejścia obrazów. Masz jakieś pomysły?

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!