Jak tworzyć ruchome cienie obrazu podczas przewijania w Divi

W świecie projektowania stron internetowych zwykle myślimy o cieniach jako o czymś, co możemy dodać w Photoshopie lub jako o właściwości CSS (takiej jak box-shadow lub text-shadow). Ale dzięki Divi możemy myśleć nieszablonowo (lub box-shadow). Wystarczy kilka zmian we wbudowanym filtrze Divi i opcjach efektów przewijania, aby przekształcić dowolny obraz w realistyczny cień.

W tym samouczku pokażemy, jak tworzyć ruchome cienie obrazu podczas przewijania w Divi. Sztuczka polega na znalezieniu obrazu PNG o unikalnym kształcie, aby po przekształceniu obrazu zachował kształt i wyglądał jak realistyczny cień obrazu. Gdy obraz/cień jest gotowy, możemy dodać kilka efektów przewijania, aby przesuwać cień podczas przewijania przez użytkownika. Ten niezwykły (choć znajomy) efekt doda oszałamiający element projektu, który ożywi Twoją witrynę.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

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 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 sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w 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,

Część 1: Projektowanie układu przekroju

W tej pierwszej części zaprojektujemy szybki układ sekcji, aby uzupełnić efekt przewijania cienia ruchomego obrazu.

Dodaj wiersz w dwóch kolumnach

Aby rozpocząć, dodaj dwukolumnowy wiersz do zwykłej sekcji.

Dodaj moduł tekstowy

W lewej kolumnie dodaj nowy moduł tekstowy. Będzie to służyć jako nasza próbna treść tekstowa.

Treść tekstowa

Następnie wklej następujący kod HTML w treści treści:

<h2>Our Wedding</h2>
<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>

Projekt tekstu

Na karcie projekt zaktualizuj ustawienia w następujący sposób:

• Rozmiar tekstu: 16px
• Wysokość linii tekstu: 2em

• Czcionka nagłówka 2: comfortaa
• Kolor tekstu nagłówka 2: #444235
• Rozmiar tekstu nagłówka 2: 60px (komputer), 40px (tablet)

Dodaj akcent projektu obrazu

Pod modułem tekstowym dodamy obraz, który posłuży jako akcent projektowy do tekstu. Wykorzystamy obraz gałęzi drzewa z pakietu Holistic Healer Layout Pack. Będzie to ten sam obraz, którego użyjemy później do naszych ruchomych cieni obrazu.

Dodaj obraz

Dodaj nowy moduł obrazu pod modułem tekstowym.

Następnie prześlij obraz.

Projekt obrazu

Na karcie projektu zmniejsz krycie obrazu za pomocą ustawień filtra.

• Krycie: 20%

Następnie przesuń obraz w lewo i w górę, korzystając z następującej opcji przekształcania:

• Przekształć Przetłumacz oś X: -20%
• Przekształć Przetłumacz oś Y: -90%

Pozycja obrazu

Następnie nadaj obrazowi pozycję bezwzględną.

• Pozycja: bezwzględna

Część 2: Tworzenie ruchomych cieni obrazu

Po zakończeniu makiety w lewej kolumnie jesteśmy gotowi do rozpoczęcia tworzenia obrazu i ruchomych cieni obrazu.

Dodaj główny obraz

Dodaj nowy moduł obrazu do prawej kolumny.

Następnie prześlij obraz o szerokości co najmniej 800 pikseli. Ponieważ zamierzamy dodać ruchomy cień gałęzi drzewa, sensowne jest użycie zdjęcia gdzieś na zewnątrz.

Następnie wyjmij domyślny dolny margines pod modułem w następujący sposób:

• Margines dolny: 0px

Tworzenie cienia ruchomego obrazu 1

Teraz jesteśmy gotowi do stworzenia pierwszego ruchomego cienia obrazu. Podstawową ideą jest użycie obrazu w formacie pliku PNG, aby przezroczyste tło obrazu nie było widoczne. Następnie użyjemy efektów filtrów, aby dostosować jasność, krycie i rozmycie, aby przekształcić obraz tak, aby wyglądał jak cień. Ponieważ obraz PNG ma unikalny kształt, cień również zachowa ten sam kształt.

Zacznijmy od dodania tego samego obrazu PNG gałęzi z pakietu Holistic Healer Layout Pack.

Oto jest…

Dodaj moduł obrazu pod obrazem w prawej kolumnie.

Następnie wgraj obraz do modułu.

Filtry obrazu

Na karcie projektu zaktualizuj filtry, aby obraz wyglądał jak cień.

• Jasność: 0%
• Krycie: 25%
• Rozmycie: 8px

Pozycja obrazu

Następnie nadaj cieniowi obrazu pozycję bezwzględną, tak aby znajdował się nad głównym obrazem powyżej.

Efekty przewijania obrazu

Aby przesunąć cień obrazu, zaktualizuj następujące efekty przewijania.

Na karcie Ruch poziomy…

• Włącz ruch poziomy: TAK
• Przesunięcie początkowe: 0 (przy 0%)
• Przesunięcie środkowe: -3 (przy 50%)
• Przesunięcie końcowe: -6 (przy 100%)

Na karcie Skalowanie w górę i w dół…

• Włącz skalowanie w górę i w dół: TAK
• Skala początkowa: 160% (przy 0%)
• Skala środkowa: 160% (przy 50%)
• Skala końcowa: 160% (przy 100%)

(UWAGA: Spowoduje to powiększenie cienia do 160% i pozostanie tam przez cały efekt przewijania. Możesz jednak dostosować procenty skali w różnych punktach.)

Na karcie Obracanie…

• Włącz ruch poziomy: TAK
• Obrót początkowy: 30° (przy 0%)
• Średni obrót: 0° (przy 50%)
• Obrót końcowy: -30° (przy 100%)

Sprawdzanie dotychczasowych wyników

W tym momencie możemy wyświetlić dotychczasowy wynik, tymczasowo dodając następujący margines do sekcji, abyśmy mogli przewijać stronę na żywo.

• Margines: 70vh góra, 70vh dół

Oto jak dotychczas wygląda efekt.

Ukrywanie przepełnienia kolumny

Aby umieścić cień obrazu w tej samej kolumnie obrazu głównego, otwórz ustawienia dla kolumny 2 i zaktualizuj opcje przepełnienia w następujący sposób:

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Teraz sprawdź wynik.

Tworzenie cienia ruchomego obrazu 2

Gdy już mamy nasz pierwszy cień obrazu, łatwo jest stworzyć kolejny. Wszystko, co musimy zrobić, to zduplikować istniejący cień obrazu i zaktualizować efekty przewijania. Podwójne cienie ruchomego obrazu stworzą piękny efekt odsłonięcia obrazu.

Zduplikuj istniejący cień obrazu

Używając modu Warstwy, zduplikuj obraz cienia.

Zaktualizuj efekty przewijania

Następnie otwórz ustawienia duplikatu i zaktualizuj efekty przewijania w następujący sposób:

Na karcie Ruch poziomy…

• Włącz ruch poziomy: TAK
• Przesunięcie początkowe: 0 (przy 0%)
• Przesunięcie środkowe: 3 (przy 50%)
• Przesunięcie końcowe: 6 (przy 100%)

Na karcie Obracanie…

• Włącz ruch poziomy: TAK
• Obrót początkowy: 210° (przy 0%)
• Średni obrót: 180° (przy 50%)
• Obrót końcowy: 150° (przy 100%)

Oto wynik…

Dodawanie efektu powiększenia do obrazu głównego

Ponieważ przepełnienie kolumny jest ukryte, możemy przeskalować główny obraz podczas przewijania, aby utworzyć subtelne powiększenie (lub efekt ken burns), który uzupełni cienie ruchomego obrazu.

Aby to zrobić, otwórz ustawienia obrazu głównego i zaktualizuj następujące elementy:

Na karcie Skalowanie w górę i w dół…

• Włącz skalowanie w górę i w dół: TAK
• Skala początkowa: 100% (przy 0%)
• Skala średnia: 115% (przy 50%)
• Skala końcowa: 130% (przy 100%)

Spowoduje to efekt powiększenia podczas przewijania przez użytkownika.

Ostateczny wynik

A oto efekt końcowy.

Końcowe przemyślenia

Mam nadzieję, że tworzenie tych ruchomych cieni było dla ciebie równie zabawne, jak dla mnie. Jest to prosty, ale oszałamiający element projektu, który ma potencjał do jeszcze bardziej kreatywnych dodatków. Zachęcamy do odkrywania możliwości dodawania różnych kolorów, trybów mieszania i innych efektów przewijania, aby dostosować projekt do swoich potrzeb.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!