Jak dodać efekty najechania Kena Burnsa do obrazów, modułów i wierszy w Divi

Efekt Kena Burnsa istnieje już od jakiegoś czasu. Efekt ten rozsławił amerykański dokumentalista Ken Burns, wykorzystując kombinację technik panoramowania i powiększania, aby ożywić obrazy w swoich filmach. W projektowaniu stron internetowych efekt Kena Burnsa okazał się popularną techniką projektowania, która ożywia obrazy tła.

Efekt Kena Burnsa może być również używany jako efekt najechania na obrazy. Z pewnością widziałeś to już wcześniej. Aby ożywić obrazy, projektanci stron internetowych dodają do obrazów efekty najechania, które powodują ich powiększanie, przesuwanie i obracanie.

Dzięki wydaniu Przekształć efekty do Divi Builder, wprowadzanie efektów Ken Burns do obrazów nigdy nie było łatwiejsze. Te opcje transformacji umożliwiają skalowanie (powiększanie), przesuwanie (lub przesuwanie) i obracanie obrazu w dowolny sposób. A ponieważ możesz zastosować te przekształcenia do stanu najechania obrazu, możliwości projektowania są prawie nieograniczone.

W tym samouczku pokażę Ci, jak łatwo jest tworzyć całkowicie unikalne efekty najechania kursorem Ken Burns na obrazy i wiersze za pomocą Divi Builder.

Zacznijmy.

zapowiedź

Oto rzut oka na efekt oparzenia Kena, który można łatwo osiągnąć za pomocą opcji transformacji Divi.

Wyjaśnienie podstawowej koncepcji

Podstawowa koncepcja tworzenia efektu najechania Kena Burnsa polega na użyciu nowych opcji transformacji Divi do skalowania, pozycjonowania i obracania obrazu po najechaniu kursorem na ten obraz. Możesz zwiększyć właściwość przekształcenia skali o określony procent, aby obraz powiększał się po najechaniu myszą. Możesz użyć właściwości przekształcenia translate, aby przesunąć obraz wzdłuż osi x i y. Możesz też obrócić obraz za pomocą właściwości rotate transform, ustawiając określoną wartość w stopniach (w tym przypadku wartość w stopniach dla obrotu na osi x). Na koniec możesz kontrolować czas trwania przejścia (prędkość) i krzywą prędkości, aby kontrolować prędkość przepływu efektu najechania Kena. Trzy właściwości transformacji i właściwości przejścia współpracują ze sobą, tworząc efekt najechania Kena Burns, który ożywia Twoje zdjęcia.

Możesz łatwo dostosować właściwości transformacji i właściwości przejścia, korzystając z wbudowanych ustawień Divi. Jednak kluczem do działania tego efektu jest prosta linia CSS (overflow:hidden), którą należy zastosować do kolumny zawierającej obraz. Ponieważ będziesz skalować, przesuwać i obracać obraz, chcesz, aby przepełnienie obrazu było ukryte poza kolumną, która go zawiera.

Gdy masz już podstawową ideę i funkcjonalność, zadziwiające jest, jak łatwo jest ustawić obraz dokładnie tak, jak chcesz, korzystając z opcji transformacji Divi.

Pobierz przykłady efektów unoszących się Kena Burnsa ZA DARMO

Aby położyć ręce na darmowych przykładach efektów Ken Burns Hover, musisz najpierw pobrać je 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.

Po pobraniu pliku zip rozpakuj folder. Następnie zaimportuj układ .json za pomocą funkcji przenośności Divi Builder. Możesz też po prostu przeciągnąć plik do Divi Builder, korzystając z funkcji przeciągnij i upuść Divi. Otóż ​​to!

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!

Pierwsze kroki z nową stroną

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową stronę. Następnie nadaj tytuł stronie i wdróż Divi Builder na interfejsie. Następnie wybierz opcję „Buduj od podstaw”.

Dodawanie efektu Ken Burns do obrazu w jednym rzędzie kolumn

W tym pierwszym podstawowym przykładzie pokażę, jak dodać efekt najechania ken burns do pojedynczego obrazu w jednym wierszu kolumny. Aby osiągnąć ten efekt, użyję opcji skalowania, tłumaczenia i obracania.

Najpierw utwórz nową sekcję z jednym wierszem. Następnie dodaj moduł obrazu do wiersza.

Ukrywanie przepełnienia kolumny

Zanim zaczniemy aktualizować ustawienia obrazu, otwórz ustawienia wiersza i kliknij kartę Zaawansowane. Następnie dodaj następujący niestandardowy kod CSS do głównego elementu kolumny:

overflow: hidden;

Dzięki temu obraz nie będzie rozszerzał się (lub przepełniał) poza kontener kolumny, gdy obraz zostanie przeskalowany do większego rozmiaru po najechaniu myszą. Jeśli tego nie dodasz, obraz wyrwie się z kontenera i ukryje inne elementy strony. Technicznie rzecz biorąc, możesz dodać ten css do głównego elementu wiersza zamiast kolumny, ale musiałbyś również pozbyć się niestandardowego dopełnienia wierszy.

Zapisz ustawienia wiersza.

Dodawanie obrazu

Teraz możemy dodać obraz do modułu obrazu. Otwórz ustawienia modułu obrazu i dodaj obraz.

Upewnij się, że obraz jest znacznie większy niż kolumna. Jest to ważne, aby obraz nie był rozmazany, gdy skalujesz obraz do większego rozmiaru po najechaniu myszą. Jeśli używasz domyślnych ustawień wiersza z jedną kolumną, maksymalna szerokość kolumny wyniesie 1080px. Tak więc używam obrazu, który ma około 1500 pikseli szerokości i 900 pikseli wysokości.

Ważne: Zasadniczo im większy obraz, tym więcej miejsca będziesz musiał skalować, przesuwać i obracać bez utraty jakości obrazu.

Dodawanie efektów najechania na transformację

Teraz, gdy mamy już nasz obraz, nadszedł czas, aby użyć tych opcji transformacji, aby stworzyć efekt najechania Kena Burnsa. Przejdź do zakładki projektu, aby otworzyć opcje transformacji. Aktywuj efekty najechania i wybierz zakładkę najechania. Teraz wszelkie dostosowania efektów transformacji będą miały zastosowanie tylko do stanu najechania modułu obrazu. Następnie na karcie Przekształć skalę zaktualizuj następujące elementy:

Przekształć skalę osi x (najechanie): 136%
Przekształć skalę osi y (najechanie): 136%

Następnie kliknij kartę Przekształć Tłumacz i zaktualizuj następujące elementy:

Przekształć Przesuń oś x (najechanie): 3%
Przekształć Przesuń oś y (najechanie): 9%

Przesuwa to obraz w lewo o 3% i w dół o 9%. W przypadku tego konkretnego obrazu chciałem uzyskać efekt, który powiększy i przeniesie parę do środka okna widokowego kolumny.

Domyślnie wartości długości tłumaczenia będą wyrażone w pikselach (nie procentach). Możesz używać pikseli do przesuwania obrazu, ale uważam, że użycie wartości procentowych sprawia, że ​​pozycjonowanie jest bardziej responsywne.

Następnie kliknij kartę Przekształć Obróć i zaktualizuj następujące elementy:

Przekształć Obróć oś x (najechanie): 6 stopni

Zaktualizuj opcje przejścia

Na koniec musimy zaktualizować czas trwania przejścia (jak długo trwa efekt najechania na transformację) i krzywą prędkości (funkcja czasowa, która umożliwia zmianę prędkości przejścia w czasie jego trwania). W tym przykładzie chcę, aby przejście trwało dłużej, aby uzyskać bardziej dramatyczny (i klasyczny) efekt Kena Burnsa po najechaniu myszą. W tym celu przejdź do zakładki Zaawansowane i zaktualizuj opcje przejścia w następujący sposób:

Czas trwania przejścia: 2000 ms (lub 2 sekundy)
Krzywa prędkości przejścia: liniowa (dzięki temu prędkość przejścia nie zmienia się w czasie trwania)

Ostateczny wynik

Sprawdźmy teraz efekt końcowy. Nie daj się zwieść niestabilnemu gifowi poniżej. Przejście jest naprawdę płynne w witrynie na żywo.

Dodawanie efektu najechania Kena Burnsa do wielu obrazów w rzędzie trzech kolumn

Jeśli chcesz dodać efekt najechania ken burns do obrazów w wielu kolumnach, obowiązuje ten sam proces. Najważniejszą rzeczą, którą musisz zrobić, to upewnić się i dodać fragment css „overflow:hidden” do każdej kolumny zawierającej Twój obraz.

Korzystając z naszego poprzedniego przykładu powyżej, zmień strukturę kolumn wiersza na układ trzykolumnowy.

Następnie zaktualizuj ustawienia wiersza za pomocą niestandardowych fragmentów kodu CSS, które ukryją przepełnienie każdej kolumny.

Kolumna 1 Główny element CSS:

overflow:hidden;

Kolumna 2 Główny element CSS:

overflow:hidden;

Kolumna 3 Główny element CSS:

overflow:hidden;

Następnie skopiuj moduł obrazu i wklej go do kolumny 2 i kolumny 3.

Otóż ​​to. Oto ostateczny wynik.

Ponieważ ten projekt jest bardziej typowy dla układu siatki galerii, prawdopodobnie będziesz chciał nieco przyspieszyć czas trwania przejścia, aby wyostrzyć animację najechania. Możesz to zrobić łatwo, korzystając z funkcji wielokrotnego wyboru Divi. Przytrzymaj ctrl lub cmd i wybierz wszystkie moduły obrazu. Następnie kliknij ikonę ustawień koła zębatego na jednym z obrazów, aby otworzyć modalne ustawienia elementu.

Teraz wszelkie aktualizacje wprowadzone w ustawieniach elementów zostaną zastosowane do wszystkich obrazów jednocześnie. Zaktualizuj opcje przejścia w ustawieniach elementu w następujący sposób:

Czas trwania przejścia: 500 ms

Oto nowy obowiązujący czas trwania przejścia.

Dodawanie efektu zawisu Kena Burnsa do dowolnego modułu z obrazem tła

Efekt najechania Kena Burnsa może być również używany w przypadku modułów innych niż moduł obrazu. Działa to dobrze, jeśli chcesz przekształcić tekst lub ikony wraz z obrazem tła modułu.

Oto jak dodać efekt Kena Burnsa do modułu tekstowego.

Najpierw utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tekstowy do wiersza.

Zaktualizuj moduł tekstowy o następującą zawartość:

<h1>We're Engaged!</h1>

Następnie dodaj obraz tła do modułu. Pamiętaj, aby dodać obraz wystarczająco duży, aby pozostawić miejsce na skalowanie i przesuwanie obrazu po najechaniu myszą.

A następnie zaktualizuj opcje projektu nagłówka w następujący sposób:

Czcionka nagłówka: Prata
Rozmiar tekstu nagłówka: 6vw
Niestandardowe wypełnienie: 10vw góra, 10vw dół, 3vw lewo

Czas trwania przejścia: 5000 ms

Teraz dodaj następujące ustawienia transformacji do modułu tekstowego.

Przekształć skalę osi x (najechanie): 118%
Przekształć skalę osi y (najechanie): 118%

Przekształć Przesuń oś x (najechanie): 6%
Przekształć Przesuń oś y (najechanie): 6%

Teraz zaktualizuj ustawienia wiersza za pomocą następującego niestandardowego kodu CSS dla kolumny.

Główny element kolumny CSS:

overflow:hidden;

Teraz sprawdź wynik.

Zwróć uwagę, jak tekst i obraz tła zmienią się razem po najechaniu myszą.

Łączenie efektu zawisu Kena Burnsa z dodatkowymi efektami zawisu

Możesz także połączyć efekt zawisu Kena Burnsa, który jest zastosowany do modułu, z dodatkowymi efektami, aby uzyskać jeszcze więcej kreatywności.

Połączenie efektu zawisu Kena Burnsa z efektami filtrów

Jeśli o nich zapomniałeś, efekty filtrów to świetny sposób na dodanie kreatywnego stylu do swoich modułów, zwłaszcza po najechaniu kursorem. Możesz połączyć te efekty filtrów z efektem transformacji, aby uzyskać całkiem unikalne przejścia najechania.

Aby to pokazać, użyjmy powyższego przykładu, w którym dodano efekt ken burns do modułu tekstowego. Ponieważ moduł tekstowy ma już efekt najechania transformacją, dodajmy dodatkowy efekt filtra, aby zmienić obraz z czarno-białego na kolorowy.

Otwórz ustawienia modułu tekstowego i zaktualizuj następującą opcję filtrowania:

Nasycenie (domyślnie): 0%
Nasycenie (najechanie): 100%

To przejście ustawi domyślnie moduł tekstowy na 0% nasycenia, co spowoduje usunięcie koloru, czyniąc go czarno-białym. Ustawienie z powrotem na 100% po najechaniu myszą doda oryginalny kolor obrazu z powrotem.

Oto efekt końcowy efektu filtra w połączeniu z efektem najechania Kena Burnsa.

Łączenie efektu zawisu Kena Burnsa z efektami transformacji rzędów

W tym przykładzie pokażę, jak połączyć efekt najechania ken burns z dodatkowym efektem transformacji dodanym do wiersza. Pomysł polega na użyciu efektów transformacji do skalowania i obracania wiersza w stanie domyślnym, a następnie przywracania oryginalnego projektu po najechaniu myszą.

UWAGA: Ta technika naprawdę działa dobrze tylko w przypadku wiersza jednokolumnowego z jednym modułem. Dzieje się tak, ponieważ odwiedzający będzie musiał jednocześnie najechać kursorem na moduł i rząd. Dlatego moduł musi zająć całą wysokość i szerokość rzędu. Dodatkowe moduły lub odstępy zepsują stan najechania i spowodują problemy.

Aby to zrobić, pozostaniemy przy naszym obecnym projekcie modułu tekstowego, który już łączy efekt najechania ken burns z dodatkowym efektem filtra. To jest właściwie potrójny efekt zawisu!

Otwórz ustawienia wiersza zawierającego moduł tekstowy. Następnie zaktualizuj następujące elementy:

Niestandardowe dopełnienie: 0px na górze, 0px na dole, 0px w lewo, 0px w prawo

Ma to na celu upewnienie się, że między modułem tekstowym a wierszem nie ma dodatkowych odstępów.

Następnie dodamy cień do wiersza w następujący sposób:

Cień pudełka: patrz zrzut ekranu
Siła rozmycia cieni w pudełku: 36px
Kolor cienia: rgba(0,0,0,0.17)

Teraz dodaj następujące efekty transformacji:

Skala transformacji osi x (domyślnie): 70%
Przekształć skalę osi x (najechanie): 100%
Skala transformacji osi y (domyślnie): 70%
Przekształć skalę osi y (najechanie): 100%

Przekształć Obróć oś y (domyślnie): 19deg
Przekształć Obróć oś y (najechanie): 0deg
Przekształć Obróć oś z (domyślnie): 23deg
Przekształć Obróć oś z (najechanie): 0deg

Sprawdźmy teraz efekt końcowy.

Dodawanie efektu zawisu Kena Burnsa do całego rzędu treści

Na wypadek, gdybyś się zastanawiał, efekt najechania Kena Burnsa może być również użyty do ożywienia całego rzędu treści po najechaniu kursorem. Nie będzie to zbyt praktyczne w przypadku wierszy z dużą ilością treści, ponieważ będzie to mylące lub rozpraszające odwiedzających. Ale w przypadku takich rzeczy, jak nagłówki, może to być przydatna technika projektowania. Sztuczka polega na dodaniu do sekcji niestandardowego fragmentu kodu CSS „overflow:hidden”. Następnie możesz dodać efekty transformacji do wiersza.

Końcowe przemyślenia

Chociaż efekt Kena Burnsa istnieje już od jakiegoś czasu, nadal może być przydatny do tworzenia dość unikalnych efektów najechania na obrazy i moduły w Divi. Sztuką jest wiedzieć, jak korzystać z opcji transformacji Divi, które są zaskakująco intuicyjne. Te przykłady podane w tym samouczku miały na celu wprowadzenie koncepcji i miejmy nadzieję, że zapewnią trochę inspiracji do własnego użytku. Kiedy myślisz o wszystkich sposobach łączenia opcji przekształcania ze wszystkimi innymi opcjami stylizacji dostępnymi w Divi, zaczyna się pojawiać mnóstwo pomysłów.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!