Unikalny efekt zawisu dla wzmacniaczy tlenowych

Opublikowany: 2022-04-10

W tym samouczku zbudujemy unikalny efekt najechania na zawartość wyświetlaną w wzmacniaczach Oxygen Builder. Wzorowany na „Efekcie zawisu zniekształceń” Codrops i wykorzystujący kod źródłowy z tego zasobu, efekt ten stworzy zniekształcone zanikanie do obrazu zdefiniowanego przez użytkownika, gdy odwiedzający najedzie na komórkę wzmacniaka.

Ten samouczek będzie zawierał kilka fajnych koncepcji Oxygen Builder:

  • Zaawansowane techniki wzmacniaków
  • Grupy pól ACF i ręczna integracja z Oxygen Builder
  • Podstawowa siatka CSS
  • Atrybuty dynamiczne
  • Użycie bloku kodu i pośredni JS

Idąc o krok dalej, sprawimy, że będzie to funkcja w 100% dynamiczna, co oznacza, że ​​zostanie ustawiona i zapomniana. Nie ma potrzeby inicjowania konkretnego efektu dla każdej komórki!

Śledź dalej (pobieranie źródła):

Uwaga: jest to weryfikacja koncepcji i prawdopodobnie wymaga optymalizacji do użytku w zakładach produkcyjnych.

Dwie inne rzeczy:

  • Rozpoczynamy kurs Oxygen Builder. Możesz dowiedzieć się więcej tutaj i dołączyć do listy oczekujących.
  • To był samouczek wymagany w naszej niesamowitej grupie na Facebooku . Chcielibyśmy, abyś dołączył!

Demo efektów:

demo_iso_effect_oxygen_builder

Krok 1: Pola ACF

Użyjemy ACF, aby uczynić to w 100% dynamicznym i łatwym do edycji dla użytkownika końcowego. Utwórz grupę pól i dodaj obraz najechania i obraz przemieszczenia. Obraz początkowy będzie głównym obrazem posta. Obraz po najechaniu jest efektem zanikania efektu, gdy odwiedzający najedzie na post przemiennika.

Obraz przemieszczenia jest tym, co zostanie użyte do stworzenia unikalnej animacji zmiany/zanikania między dwoma obrazami. W tym przykładzie używamy następujących obrazów do przemieszczenia:

7
8

W rzeczywistości możesz użyć dowolnego obrazu, ale zazwyczaj najlepsze są obrazy czarno-białe z doskonałą teksturą. Eksperymentowanie z tą metodą jest łatwe!

izotropowy-2022-04-07-at-12-11-43
Utwórz grupę pól i przypisz do typu posta.
izotropowy-2022-04-07-at-12-11-24
Każdy format zwracanego obrazu powinien być adresem URL obrazu.

Oto jak wyglądają grupy pól i powiązane obrazy podczas dodawania nowego posta:

izotropowy-2022-04-07-at-12-53-46
Łatwo jest zamienić dowolny z trzech obrazów.

Krok 2: Stwórz strukturę dla efektu

W istocie kopiujemy kod źródłowy z przykładu Codrops, z drobnymi modyfikacjami.

<div class="grid"> <!-- to jest repeater --> <div class="grid__item grid__item--bg"> <!-- to jest div w repeaterze --> <div class=" grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- to jest „opakowanie obrazu div" --> <img src="img/Img22.jpg" alt="Obraz"/> <img src="img/Img21.jpg" alt="Obraz"/> </div> <div class=" grid__item-content"> <!-- to jest „div opakowanie treści> --> <span class="grid__item-meta">Kalifornia</span> <h2 class="grid__item-title">Skakanie</h2 > <h3 class="grid__item-subtitle"> <span>Ostatnie puste miejsca do skoku w Kalifornii</span> <a class="grid__item-link" href="#">Dowiedz się więcej</a> </h3> </ div> </div> </div>
izotropowy-2022-04-07-at-13-12-26

Po prostu powielamy powyższą strukturę HTML z elementami Oxygen Builder. Nie zapomnij dodać klas z powyższego przykładu HTML, ponieważ dodamy trochę CSS, a JS użyje ich do zidentyfikowania określonych elementów. Jeśli zmienisz te klasy, musisz odpowiednio zaktualizować CSS i JS.

Nasz Repeater używa siatki CSS do równomiernego rozmieszczenia wszystkich komórek bez większego nakładu pracy:

izotropowy-2022-04-07-at-13-25-06

Krok 3: Uczyń dynamiczny

Jest kilka rzeczy, które należy skonfigurować, aby były dynamiczne. Najpierw ustaw powtarzające zapytanie jako typ WordPress Post.

Następnie ustaw dynamiczną datę i tytuł posta.

izotropowy-2022-04-07-at-13-17-17

Teraz skonfigurujemy trzy obrazy. Tutaj sprawy mogą się skomplikować. Ustaw adres URL obrazu 1 jako adres URL polecanego obrazu.

izotropowy-2022-04-07-at-13-20-11

Ustaw adres URL obrazu 2, aby był obrazem po najechaniu, ustawionym w ACF. W tym samouczku pola ACF nie były wyświetlane w wyskakującym okienku „wstaw dane dynamiczne” (prawdopodobnie z powodu błędu Oxygen Builder 4.0 Beta 2). Istnieje proste obejście, jeśli kiedykolwiek tego doświadczysz:

1 - Wstaw dane dynamiczne

2 — Wybierz wartość zwracaną funkcji PHP

izotropowy-2022-04-07-at-13-20-47

3 - ręcznie wstaw zawartość pola ACF za pomocą get_field('fieldname')

izotropowy-2022-04-07-at-13-21-30

Na koniec musimy ustawić obraz zniekształcenia, którego efekt użyje do wykonania przejścia morph. Jest on wstawiany do kodu HTML jako atrybut danych, który JS odczytuje i włącza do efektu. Z powyższego kodu HTML widzimy, że istnieje kilka atrybutów, które można edytować, aby zmienić efekt.

<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- to to "div wrapper obrazu" --> ... </div>

Najważniejszą rzeczą, którą musimy uczynić dynamicznym, jest przesunięcie danych, które będzie miało adres URL obrazu ustawiony w poście za pomocą ACF. Na stałe zakodowaliśmy pozostałe trzy atrybuty, ale możesz użyć tej samej metody opisanej poniżej, aby umożliwić edycję również tych użytkowników.

Przejdź do elementu opakowania obrazu (div wokół dwóch dynamicznych obrazów). Kliknij Zaawansowane -> Atrybuty i dodaj następujące.

izotropowy-2022-04-07-at-13-28-05

W przypadku data-displacement uczynimy to dynamicznym, klikając przycisk danych+ w treści i wstawiając odpowiednie pole ACF.

Frontend HTML będzie wyglądał tak, a JS użyje wszystkich tych danych (które są dynamiczne i edytowalne przez użytkownika za pomocą ACF) do stworzenia fajnego efektu przesunięcia na WordPressie:

izotropowy-2022-04-07-at-13-46-39

Krok 4: Dodaj CSS, biblioteki i JS

Do naszego uniwersalnego arkusza stylów CSS dodamy następujący kod CSS. Być może będziesz musiał pobawić się dodatkowymi stylami CSS, aby wszystko działało dobrze.

.grid__item { przepełnienie:ukryty; pozycja:względna; } .grid__item-content { z-index:5; } .grid__item-img { wyświetlanie: blok; wzrost: 100%; szerokość: 100%; } .grid__item-img canvas { wysokość: 100%; pozycja:bezwzględna; góra:0; indeks z:1; } .grid__item-img img { wysokość: 100%; Blok wyświetlacza; } /* Jest to rozwiązanie awaryjne, jeśli JS nie działa */ .grid__item-img img:nth-child(2) { position: absolute; góra: 0; po lewej: 0; krycie: 0; przejście: krycie 0,3s; } .grid__item:hover .grid__item-img img:nth-child(2) { krycie: 1; } .js .grid__item-img img { wyświetlanie: brak; }

Na koniec załadujemy niezbędne biblioteki JS i kod (zrobiliśmy to za pomocą bloku kodu):

<script src="https://cdn.statically.io/gh/robin-dela/hover-effect/15fc09f0/example/js/imagesloaded.pkgd.min.js"></script> <script src="https ://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest /TweenMax.min.js"></script> <script src="https://cdn.statically.io/gh/robin-dela/hover-effect/15fc09f0/dist/hover-effect.umd.js"> </script> <script> imagesLoaded( document.querySelectorAll('img'), () => { document.body.classList.remove('loading'); }); Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => { const imgs = Array.from(el.querySelectorAll('img')); new hoverEffect({ parent: el, intensywność: el.dataset.intensity || undefined, speedIn: el.dataset.speedin || undefined, speedOut: el.dataset.speedout || undefined, easing: el.dataset.easing || undefined, najechanie kursorem: el.dataset. hover || undefined, image1: imgs[0].getAttribute('src'), image2: imgs[1].getAttribute('src'), przemieszczenieImage: el.dataset.displacement }); }); </script>

W naszym przykładzie używamy statycznie (pobierając biblioteki ImagesLoaded i Hover Effect z GitHub), ale najlepiej jest hostować to w swojej witrynie, używając narzędzia takiego jak Scripts Organizer lub Advanced Scripts.

Ładujemy również Three.JS i TweenMax.JS, dwie podstawowe biblioteki, które działają w celu wygenerowania efektu przemieszczenia.

Na koniec JS wykonuje następujące czynności — identyfikuje, kiedy obrazy są ładowane i stosuje efekt najechania na dowolny element, który ma .grid__item-img , pobierając powiązane obrazy i obrazy przemieszczenia z każdego postu. Całkowicie dynamiczny i będzie działał niezależnie od liczby postów zwróconych przez repeater Oxygen Builder.

Po dodaniu tego wszystkiego Twój efekt powinien działać!

O to poprosił członek naszej izotropowej grupy na Facebooku. Zapraszamy do przyłączenia się tutaj.

Subskrybuj i udostępniaj
Jeśli spodobała Ci się ta treść, zasubskrybuj nasz comiesięczny przegląd wiadomości WordPress, inspiracji do stron internetowych, ekskluzywnych ofert i interesujących artykułów.
Zrezygnuj z subskrypcji w dowolnym momencie. Nie spamujemy i nigdy nie będziemy sprzedawać ani udostępniać Twojego e-maila.