Divi: Jak dodać efekt pochylenia po najechaniu kursorem na element

Czy chcesz dodać efekt pochylenia za pomocą Divi na dowolnym elemencie Twojej strony?

Dodawanie efektów pochylenia najechania do twojego Witryna internetowa to jeden z tych zabawnych i wciągających sposobów na przyniesienie Witryna internetowa Divi. Zazwyczaj tego typu projekt wymaga wtyczki lub bardziej zaawansowanego kodu. Ale ten proces jest znacznie łatwiejszy przy użyciu Tilt.js (niewielki efekt pochylenia najechania w 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 pochylenia po najechaniu myszką do dowolnego elementu Divi. Używając kombinacji fragmentów jQuery tilt.js i kreatora Divi, pokażemy Ci, jak dodać niesamowite efekty pochylenia po najechaniu myszką do obrazu, kolumny modułu, wiersza itp. 

Pokażemy Ci nawet, jak dodać niesamowite efekty paralaksy 3D.

Zacznijmy!

badanie

Oto krótki przegląd wyników, które otrzymamy w tym samouczku.

Zobacz też: Divi: Jak wyświetlić zawartość po najechaniu kursorem na rozdzielacz sekcji

To, czego potrzebujesz, aby zacząć

Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.

Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder

Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Dodaj efekty pochylenia po najechaniu na dowolny element w Divi

Dodaj efekt Tilt Hover do modułów Divi

Zacznijmy od dodania trzykolumnowego wiersza do domyślnej zwykłej sekcji.

Dodaj moduł obrazu

W pierwszej kolumnie dodaj moduł obrazu.

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

Prześlij wybrany obraz. 

Dodaj klasę modułu obrazu

Pod zakładką 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 poprzedni moduł obrazu

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

Jeśli chcesz, możesz zastąpić zduplikowane obrazy nowymi. Tylko upewnij się, że każdy moduł obrazu należy do klasy CSS „et-js-tilt”.

Dodaj bibliotekę JQuery „tilt.js”

Aby dodać bibliotekę pochylenie.js a fragment kodu potrzebny do pochylenia naszych obrazów, użyjemy modułu Code.

Najpierw dodaj nowy wiersz o jedną kolumnę poniżej istniejącego wiersza.

Następnie dodaj moduł Code do nowego wiersza.

Następnie musimy uzyskać dostęp do biblioteka tilt.js dodając skrypt, który importuje 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 importować pochylenie.js przed dodaniem kodu, który będzie go używał. Więc po tym, jak skrypt wskazuje na pochylenie.js, dodaj niezbędne znaczniki 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ę w instrukcji if, która zostanie uruchomiona, gdy szerokość przeglądarki jest większa niż 980 pikseli. Zapewni to, że efekt wystąpi tylko na komputerze stacjonarnym.

Oto wynik.

Dodano efekt pochylenia najechania na linię

Jak wspomnieliśmy wcześniej, możesz dodać ten efekt pochylenia najechania do dowolnego elementu Divi. Obejmuje to całą linię. 

Dodatkowo możesz dodać efekt pochylenia do rzędu, zachowując efekty pochylenia dla każdego modułu w rzędzie.

Oto jak.

Zduplikuj linię i dodaj unikalną klasę CSS do linii

Zduplikuj istniejący wiersz obrazów, a następnie otwórz ustawienia duplikatu wiersza. Pod zakładką 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 poniżej poprzedniej funkcji pochylenia, aby zastosować do wiersza oddzielną funkcję pochylania.

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

Zauważ, że dla tego efektu pochylenia zmniejszyliśmy skalę 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.

Dodaj efekt Tilt Hover do kolumny z kilkoma modułami Divi

W niektórych przypadkach przydatne jest dodanie efektu pochylenia do kolumny modułów. Umożliwi to zaprojektowanie wielu modułów w kolumnie za pomocą Divi, a następnie ustawienie wszystkich tych elementów pod kątem jako jednej jednostki. 

Aby dać przykład, jak to zrobić, dodamy efekt pochylenia przy najechaniu do kolumny zawierającej moduł Obraz, moduł Tekst i moduł Przycisk.

Dodaj nową linię

Aby rozpocząć, utwórz nowy wiersz o następującej strukturze kolumn:

Dodaj moduł obrazu

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

Prześlij obraz do modułu.

Ustaw wyrównanie obrazu do środka.

Dodaj moduł tekstowy

Poniżej modułu Obraz dodaj moduł Tekst z następującym nagłówkiem H2:

<h2>Local Organic</h2>

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

• Czcionka: Berkshire Swash
• Wyrównanie tekstu: wyśrodkowane
• Kolor tekstu: #000000
• Rozmiar: 60px
• Wysokość linii: 1,2 em

Dodaj moduł przycisku

Poniżej modułu tekstowego dodaj moduł Button.

Zaktualizuj tekst przycisku, aby przeczytać „Dowiedz się więcej...”

Zaktualizuj ustawienia personalizacji w następujący sposób:

• Wyrównanie przycisków: środek

• Użyj niestandardowych stylów dla przycisku
• Rozmiar tekstu przycisku: 18px
• Kolor tekstu: #fff
• Tło przycisku: #000

• Szerokość obramowania przycisku: 0 pikseli
• Promień graniczny: 100px
• Czcionka przycisku: ruchome piaski
• Waga czcionki: pogrubiona

• Dopełnienie (góra i dół): 16px
• Dopełnienie (lewy i prawy): 30px

• Cień pudełka: patrz zrzut ekranu

Parametry kolumny

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

• Tło: #f5cee6

• Dopełnienie (góra i dół): 50px
• Dopełnienie (lewy i prawy): 20px

Dodanie klasy CSS do kolumny

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

• Klasa CSS: et-column-js-tilt

Dodano jQuery, aby zastosować efekt tilt do kolumny

Aby dodać efekt pochylenia do kolumny, możemy dodać kolejny podobny fragment kodu jQuery, który jest skierowany do kolumny CSS Class. 

Wklej następujący fragment kodu poniżej poprzedniego fragmentu kodu kierowanego na wiersz.

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

Oto wynik końcowy.

Dodano efekt 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 kolumn. 

Używając kombinacji perspektywy i transform:translateZ() , możemy sprawić, że każdy z modułów kolumny pojawi się w przestrzeni 3D, gdy aktywny jest efekt pochylenia po najechaniu.

Oto jak.

Powiel poprzedni wiersz

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

Dodaj klasę pojedynczej kolumny

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

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

Niestandardowy 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 więcej fragmentów kodu jQuery poniżej poprzedniego fragmentu funkcji skośnej kierującego 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. 

.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 zobacz efekt końcowy. Zwróć uwagę, jak trzy moduły pojawiają się w przestrzeni 3D, gdy obracają się podczas efektu pochylenia.

Czytaj także: Divi: Jak wyświetlić zawartość po najechaniu kursorem na rozdzielacz sekcji

Ostateczne wyniki

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

Pobierz DIVI teraz !!!

Wnioski

Efekty pochylenia najechania oferowane przez Tilt.js naprawdę fajnie się z nimi eksperymentuje. 

Chociaż w tym samouczku użyliśmy kilku podstawowych przykładów, możesz z łatwością spędzić dzień w terenie, stosując te efekty pochylania w jednym z naszych gotowych układów lub we własnej witrynie.

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...