Jak dodać efekty Hover Tilt do dowolnego elementu w Divi

Dodanie efektów pochylania najechania do projektu strony internetowej to jeden z tych zabawnych i wciągających sposobów na ożywienie witryny Divi. Zazwyczaj tego typu projekt wymaga wtyczki lub bardziej zaawansowanego kodu (jak w tym samouczku). Ale ten proces jest o wiele łatwiejszy przy użyciu Tilt.js (lekki efekt pochylenia najechania dla jQuery). Dzięki Tilt.js możesz łatwo zastosować efekty pochylania najechania na wszystko w ciągu kilku minut.

W tym samouczku pokażemy, jak dodać efekty przechyłu najechania do dowolnego elementu w Divi. Korzystając z kombinacji fragmentów tilt.js jQuery i konstruktora Divi, pokażemy, jak dodać imponujące efekty pochylania po najechaniu kursorem na obraz, kolumnę modułów, wiersz i nie tylko. Pokażemy Ci nawet, jak dodać zaskakujące efekty paralaksy 3D.

Zacznijmy!

zapowiedź

Aby zobaczyć demonstrację na żywo funkcjonalności tego samouczka, sprawdź ten codepen.

A 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.

Podstawy korzystania z Tilt.js

Tilt.js to lekki efekt pochylenia paralaksy dla jQuery. Za pomocą zaledwie kilku linijek jQuery możesz dodać efekty pochylania kursora do dowolnego elementu na stronie. Zawiera do 10 opcji (patrz dokumentacja), które można łatwo dodać, aby kontrolować projekt i funkcjonalność efektu pochylenia, w tym skalę i piękny efekt olśnienia .

Na najbardziej podstawowym poziomie, po uzyskaniu dostępu do biblioteki tilt.js, możesz dodać klasę CSS do elementu, który chcesz przechylić po najechaniu kursorem, a następnie użyć prostego fragmentu kodu jQuery, aby zastosować funkcję tilt do obiektu jQuery z tą samą klasą .

Załóżmy na przykład, że dodajesz niestandardową klasę CSS do modułu obrazu o nazwie „et-js-tilt”.

Wszystko, co musisz zrobić, to dodać następujący fragment kodu jQuery, aby dodać efekt pochylenia najechania na obraz.

$(".et-js-tilt").tilt();

Następnie możesz ustawić dodatkowe opcje efektu pochylenia. Na przykład możesz dodać efekt skali i blasku za pomocą poniższego fragmentu kodu.

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

Rezultat byłby taki…

Aby uzyskać bardziej zaawansowany efekt, możesz dodać transform:translateZ() do dowolnego elementu podrzędnego, aby uzyskać efekt paralaksy 3D. Więcej o tym później.

Teraz, gdy mamy podstawową wiedzę na temat używania tilt.js, przyjrzyjmy się, jak używać go w Divi.

Jak dodać efekty Hover Tilt do dowolnego elementu w Divi

Dodawanie efektu Tilt Hover do modułów Divi

Dodaj trzykolumnowy wiersz do domyślnej zwykłej sekcji.

Dodaj moduł obrazu

W pierwszej kolumnie dodaj moduł obrazu.

Uwaga: możesz użyć dowolnego modułu. Nie musi to być moduł obrazu.

Prześlij wybrany obraz. Używam jednego z pakietu Homemade Cookies Layout Pack.

Dodaj klasę modułu obrazu

W zakładce Zaawansowane dodaj następującą klasę CSS:

• Klasa CSS: et-js-tilt

Ta klasa będzie później używana jako selektor dla naszej funkcji przechylania.

Kopiuj i wklej moduły obrazu

Następnie skopiuj moduł obrazu i wklej go do każdej z pozostałych dwóch kolumn.

Jeśli chcesz, możesz zastąpić zduplikowane obrazy nowymi. Upewnij się tylko, że każdy moduł obrazu ma klasę CSS „et-js-tilt”.

Dodaj JQuery tilt.js

Aby dodać bibliotekę tilt.js i fragment kodu potrzebne do przechylenia naszych obrazów, użyjemy modułu kodu.

Najpierw dodaj nowy wiersz z jedną kolumną pod istniejącym wierszem.

Następnie dodaj moduł kodu do nowego wiersza.

Następnie musimy uzyskać dostęp do biblioteki tilt.js poprzez dodanie skryptu importującego tilt.js z ich CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery). min.js). Wklej następujący skrypt w polu kodu.

Użyj następującego kodu src w tagu skryptu, aby zaimportować bibliotekę:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

To powinno wyglądać tak:

Ważne jest, aby zaimportować tilt.js przed dodaniem kodu, który będzie go używał. Tak więc, po skrypcie wskazującym na tilt.js, dodaj niezbędne tagi skryptu , aby zawinąć JQuery, które musimy dodać. Następnie wklej następujące JQuery między tagami skryptu .

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {

    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });

  }
});

Zauważ, że funkcja tilt() znajduje się wewnątrz instrukcji if , która zostanie wykonana, gdy szerokość przeglądarki jest większa niż 980 pikseli. Dzięki temu efekt pojawi się tylko na komputerze.

Oto wynik.

Dodawanie efektu Tilt Hover do rzędu

Jak wspomnieliśmy wcześniej, możesz dodać ten efekt pochylenia najechania do dowolnego elementu w Divi. Obejmuje to cały rząd. Dodatkowo możesz dodać efekt pochylenia do rzędu, zachowując efekty pochylenia dla każdego modułu w rzędzie.

Oto jak to zrobić.

Zduplikuj wiersz i dodaj unikalną klasę CSS do wiersza

Zduplikuj istniejący wiersz obrazów, a następnie otwórz ustawienia zduplikowanego wiersza. Na karcie Zaawansowane nadaj wierszowi unikalną klasę CSS w następujący sposób:

• Klasa CSS: et-row-js-tilt

Dodaj jQuery

Następnie dodaj następujące jQuery pod poprzednią funkcją przechylania, aby zastosować osobną funkcję przechylania do wiersza.

    $(".et-row-js-tilt").tilt({
      scale: 1,
      perspective: 1200,
    });

Zwróć uwagę, że dla tego efektu pochylenia przywróciliśmy skalę z powrotem do 1 i zwiększyliśmy wartość perspektywy, aby pochylenie było bardziej subtelne.

Oto wynik.

Zwróć uwagę, że wiersz ma funkcję pochylenia, która aktywuje się po najechaniu kursorem na wiersz, a każdy z modułów obrazu ma również ten sam efekt pochylenia, który dodaliśmy wcześniej. W ten sposób można zastosować zagnieżdżone instancje efektów przechyłu.

Dodawanie efektu Tilt Hover do kolumny z wieloma modułami Divi

W niektórych przypadkach pomocne jest dodanie efektu pochylenia do kolumny modułów. Umożliwi to zaprojektowanie wielu modułów w kolumnie za pomocą Divi, a następnie nachylenie wszystkich tych elementów jako jednej jednostki. Aby dać przykład, jak to zrobić, dodamy efekt pochylenia najechania do kolumny z modułem obrazu, modułem tekstowym i modułem przycisku.

Dodaj nowy wiersz

Aby rozpocząć, utwórz nowy wiersz kolumny o wartości jednej szóstej dwie trzecie jednej szóstej pod poprzednim rzędem obrazów.

Dodaj moduł obrazu

Wewnątrz kolumny 2 (środkowa kolumna) dodaj nowy moduł obrazu.

Prześlij obraz do modułu i ustaw wyrównanie obrazu na środek.

Dodaj moduł tekstowy

Pod modułem obrazu dodaj moduł tekstowy z następującym nagłówkiem H2:

<h2>Local Organic</h2>

Następnie zaktualizuj style nagłówka 2 w następujący sposób:

• Czcionka nagłówka 2: Berkshire Swash
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 60px (komputer), 32px (tablet), 20px (telefon)
• Nagłówek 2 Wysokość linii: 1,2 em

Dodaj moduł przycisku

W module Tekst dodaj moduł przycisku.

Zaktualizuj tekst przycisku, aby przeczytać „O nas” i zaktualizuj ustawienia projektu w następujący sposób:

• Wyrównanie przycisków: centerr
• Rozmiar tekstu przycisku: 18px
• Kolor tekstu przycisku: #fff
• Kolor tła przycisku: #000
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px
• Czcionka przycisku: ruchome piaski
• Waga czcionki przycisku: pogrubiona
• Padding: 16px góra, 16px dół, 30px po lewej, 30px po prawej
• Cień pudełka: patrz zrzut ekranu

Ustawienia kolumny

Po zakończeniu trzech modułów otwórz ustawienia kolumny nadrzędnej tych modułów (kolumna 2) i zaktualizuj następujące elementy:

• Kolor tła: #f5cee6

• Padding: 50px (góra i dół), 20px (lewy i prawy)

Dodawanie klasy CSS do kolumny

W zakładce Zaawansowane dodaj następującą klasę CSS:

• Klasa CSS: et-column-js-tilt

Dodanie jQuery, aby zastosować efekt przechyłu do kolumny

Aby dodać efekt pochylenia do kolumny, możemy dodać kolejny podobny fragment kodu jQuery, który jest skierowany do klasy CSS kolumny. Wklej poniższy fragment kodu poniżej poprzedniego fragmentu, którego celem jest wiersz.

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

Oto ostateczny wynik.

Dodawanie efektu paralaksy 3D do elementów wewnętrznych

Aby uzyskać bardziej zaawansowany efekt pochylenia w zawisie, możemy dodać efekt paralaksy 3D do wewnętrznych modułów kolumny. Używając kombinacji perspektywy i transform:translateZ() , możemy sprawić, że każdy z modułów w kolumnie wyskoczy w przestrzeni 3D, gdy aktywny jest efekt pochylenia najechania kursorem.

Oto jak to zrobić.

Powiel poprzedni wiersz

Najpierw zduplikuj poprzedni wiersz z efektem pochylenia dodanym do środkowej kolumny.

Dodaj unikalną klasę kolumn

Następnie zaktualizuj środkową kolumnę (kolumnę 2) unikalną klasą CSS w następujący sposób:

• Klasa CSS: et-column-js-tilt-3d

niestandardowe CSS

Aby upewnić się, że wewnętrzne moduły zachowują efekt 3D, dodaj następujący niestandardowy CSS do głównego elementu kolumny:

transform-style: preserve-3d;

Dodaj jQuery i CSS

Następnie dodaj kilka dodatkowych fragmentów kodu jQuery w ramach poprzedniego fragmentu funkcji tilt kierowanego na kolumnę w następujący sposób:

    const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
      scale: 1.1,
      perspective: 1000,
    });
    columnTilt3d.on("tilt.mouseEnter", function (e) {
      $(e.target).addClass("tilt-active");
    });
    columnTilt3d.on("tilt.mouseLeave", function (e) {
      $(e.target).removeClass("tilt-active");
    });

To jQuery dodaje kolejną podstawową funkcję przechylania do kolumny, tak jak w poprzednim przykładzie. Jednak kod przełącza również nową klasę („tilt-active”) do kolumny, gdy aktywny jest efekt tilt. Możemy użyć tej nowej klasy, aby zastosować wartość transform: translateZ() do każdego z modułów po najechaniu kursorem na kolumnę. Spowoduje to powstanie efektu paralaksy 3D.

Aby to zrobić, dodaj następujący niestandardowy kod CSS na górze pola/treści kodu, upewniając się, że kod CSS jest zawinięty w niezbędne tagi stylu .

  .et-column-js-tilt-3d.tilt-active .et_pb_image {
    transform: translateZ(100px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_text {
    transform: translateZ(40px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_button {
    transform: translateZ(50px);
  }

Teraz sprawdź efekt końcowy. Zwróć uwagę, jak trzy moduły wyskakują w przestrzeni 3D, gdy obracają się podczas efektu pochylenia.

Ostateczne rezultaty

Oto kolejne spojrzenie na końcowe wyniki naszych przykładów.

Końcowe przemyślenia

Efekty pochylenia najechania oferowane przez Tilt.js są naprawdę zabawne do eksperymentowania. Chociaż użyłem kilku podstawowych przykładów w tym samouczku, możesz łatwo mieć dzień w terenie, stosując te efekty pochylenia najechania do dowolnego z naszych gotowych układów lub we własnej witrynie. Cieszyć się!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!