Jak zmienić obraz tła na animowany gif po najechaniu kursorem?
Opublikowany: 2019-06-14Przełączanie obrazu tła z animowanym GIF-em po najechaniu kursorem może być świetnym sposobem na ożywienie treści, jednocześnie zapewniając fajną ilustrację produktów lub usług. Na przykład, jeśli promujesz funkcje konkretnego oprogramowania, animowany GIF może pomóc zilustrować aspekty funkcjonalności produktów (robimy to dla produktów tutaj w Elegant Themes). Ale zamiast początkowo wyświetlać ten GIF, możesz chcieć wyświetlić nieruchomy zrzut ekranu tej funkcji, który zostanie zastąpiony animowaną wersją (lub GIF) po najechaniu myszą.
W tym samouczku pokażę, jak utworzyć notkę, która przełącza obraz tła (nieruchomy) z animowanym GIF-em po najechaniu myszą. Zaczniemy od omówienia, jak utworzyć zrzut ekranu i GIF za pomocą Snagit (oprogramowania do przechwytywania ekranu). Następnie omówimy, jak zaimplementować te obrazy tła do notki, aby można było je włączyć. Rzeczywiste przełączanie obrazów jest niezwykle łatwe dzięki opcjom najeżdżania w tle Divi.
Ten projekt pomoże zachować statykę z góry, a następnie zaangażować użytkowników za każdym razem, gdy wchodzą w interakcję z treścią.
Zacznijmy.
zapowiedź
Pobierz tło GIF w układzie najechania 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 na nową stronę z aktywnym Divi Builder.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Subskrybuj nasz kanał YouTube
Aby rozpocząć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Oprogramowanie do przechwytywania ekranu (lub kombinacja narzędzi), które pozwoli Ci robić zrzuty ekranu, nagrywać filmy z ekranu i tworzyć GIF-y. W tym samouczku będę używał Snagita głównie dlatego, że jest to rozwiązanie typu „wszystko w jednym”, którego używam codziennie do moich postów na blogu i samouczków.
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
Następnie będziesz mieć puste płótno, aby rozpocząć tworzenie niektórych zakładek w Divi.
Część 1: Tworzenie zrzutów ekranu i GIF-ów
W tym projekcie chcemy utworzyć zrzut ekranu, który będzie wyświetlany jako nieruchomy obraz tła dla modułu notki. Następnie chcemy stworzyć GIF (animowany obraz), który ożywi nieruchomy obraz tła z krótką ilustracją działania produktu. Sztuczka polega na tworzeniu obrazów i GIF-ów, które wyglądają na tyle podobnie, że mają płynne przejście podczas przełączania jednego obrazu na drugi po najechaniu kursorem.
Po utworzeniu dwóch obrazów możemy użyć nieruchomego obrazu jako początkowego obrazu tła. Następnie możemy przełączyć obraz tła na obraz gif po najechaniu kursorem na moduł blurb.
Do tworzenia zrzutów ekranu i GIF-ów będę używał Snagit. Chociaż nie jest to darmowe oprogramowanie, jest naprawdę łatwe w użyciu i umożliwia tworzenie zrzutów ekranu, nagrywanie ekranu i nagrywanie z ukrytego ekranu w plikach GIF w jednym miejscu.
Tworzenie nieruchomego obrazu zrzutu ekranu
Aby utworzyć zrzut ekranu, otwórz Snagit i otwórz okno przechwytywania. Następnie upewnij się, że wybrałeś przechwycenie obrazu, wybierając region ekranu. Umożliwi to przeciągnięcie obszaru na ekranie, który ma zostać przechwycony jako obraz. Aby zainicjować przechwytywanie ekranu, kliknij przycisk przechwytywania.
Następnie kliknij i przeciągnij obszar przechwytywania wokół obszaru ekranu, który chcesz przechwycić jako obraz.
Zapisz obraz na swoim komputerze. Następnie ponownie otwórz pole Snagit Capture i wybierz przechwytywanie wideo, wybierając region ekranu. Aby zainicjować przechwytywanie ekranu, kliknij przycisk przechwytywania.
Następnie kliknij i przeciągnij obszar przechwytywania wokół obszaru ekranu, który chcesz przechwycić i nagrać jako klip wideo. Aby stworzyć bardziej płynne przejście między nieruchomym obrazem a gifem, będziesz chciał uchwycić ten sam obszar wideo, co w przypadku obrazu (lub tak blisko, jak to możliwe).
Kiedy będziesz gotowy, kliknij przycisk nagrywania i przeprowadź demonstrację, którą chcesz nagrać.
Kiedy skończysz, kliknij stop, aby zatrzymać nagrywanie. Następnie możesz edytować klip wideo w edytorze Snagit. Po zakończeniu edycji kliknij przycisk GIF obok filmu, aby utworzyć GIF z filmu.
W wyskakującym okienku Utwórz GIF zmodyfikuj ustawienia wyjściowe zgodnie z potrzebami. Upewnij się, że włączyłeś pętlę, aby twój gif się powtarzał. Następnie kliknij przycisk Utwórz.
Po utworzeniu gifu zapisz go na swoim komputerze.
Teraz masz nieruchomy obraz i obraz gif gotowy do dodania do swojego projektu w Divi.
Część 2: Tworzenie rozmycia, które przełącza obraz tła z animowanym obrazem GIF po najechaniu kursorem
Jeśli jeszcze tego nie zrobiłeś, utwórz nową stronę i wdróż Divi Builder, aby budować na interfejsie. Następnie utwórz nową zwykłą sekcję z rzędem dwóch kolumn.
W kolumnie 1 dodaj moduł notki.
Następnie zaktualizuj ustawienia treści w następujący sposób:
Treść: „Tu jest tekst treści”
Użyj ikony: TAK
Ikona: chmura (patrz zrzut ekranu)
Dodaj domyślny obraz tła
Następnie dodaj domyślny obraz tła do notki w następujący sposób:
Obraz tła: Prześlij utworzony obraz tła (nieruchomy zrzut ekranu).
Rozmiar obrazu tła: Dopasuj (dzięki temu cały obraz będzie widoczny)
Pozycja obrazu tła: u góry na środku (dzięki temu obraz będzie u góry notki)
Dodaj obraz tła do najechania gif
Po umieszczeniu początkowego obrazu tła wdróż opcję aktywowania tła i wybierz kartę aktywowania. Następnie dodaj obraz GIF, który będzie służył jako nowy obraz tła w stanie najechania kursorem.
Stylizacja modułu Blurb
Kontynuuj stylizację modułu notki, aktualizując następujące ustawienia projektu:
Kolor ikony: #6bb962
Ikona koła: TAK
Kolor koła: #ffffff
Wyrównanie tekstu: do środka
Czcionka tytułu: Lora
Rozmiar tekstu tytułu: 34px
Wypełnienie: 50% góra, 5% dół, 3% lewo, 3% prawo
Prawdziwym kluczem do tego projektu jest wyściółka. Aby tło znajdowało się nad treścią notki, należy dodać około 50% górnego dopełnienia. A ponieważ rozmiar obrazu tła jest ustawiony na „dopasowanie”, a pozycja jest ustawiona na „u góry pośrodku”, będzie on ładnie siedzieć nad treścią, reagując na szerokości przeglądarki.
Na koniec, po najechaniu kursorem nadaj notatce cień w następujący sposób:
Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 0px
Siła rozmycia cieni w ramce: 0px (domyślnie), 24px (najechanie)
Ostateczny wynik
Oto ostateczny wynik.
A oto projekt na tablecie i telefonie.
A oto jak może wyglądać z dodatkowymi notatkami z różnymi zrzutami ekranu i kolorami.
Końcowe przemyślenia
Jeśli nie wiesz, jak używać GIF-ów w swojej witrynie, zdecydowanie powinieneś to rozważyć. Mogą naprawdę ożywić Twoje treści i dostarczyć niezwykle przydatnych ilustracji dla odwiedzających. A dzięki opcjom najeżdżania w tle Divi możesz łatwo przełączać nieruchomy obraz z GIF-em po najechaniu. To rozwiązanie może zapewnić mniej rozpraszający projekt na początku, który naprawdę angażuje użytkownika podczas interakcji z treścią. Mam nadzieję, że okaże się to przydatne w kolejnym projekcie.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!