Einzigartiger Hover-Effekt für Oxygen Builder Repeater
Veröffentlicht: 2022-04-10In diesem Tutorial erstellen wir einen einzigartigen Hover-Effekt für Inhalte, die in Oxygen Builder Repeaters angezeigt werden. Dieser Effekt, der dem „Verzerrungs-Hover-Effekt“ von Codrops nachempfunden ist und den Quellcode dieser Ressource verwendet, erzeugt eine verzerrte Überblendung zu einem benutzerdefinierten Bild, wenn ein Besucher mit der Maus über eine Repeater-Zelle fährt.
Dieses Tutorial enthält einige coole Konzepte von Oxygen Builder:
- Fortgeschrittene Repeater-Techniken
- ACF-Feldgruppen und manuelle Integration mit Oxygen Builder
- Grundlegendes CSS-Raster
- Dynamische Attribute
- Verwendung von Codeblöcken und Zwischen-JS
Wir gehen noch einen Schritt weiter und machen daraus eine 100 % dynamische Funktion, was bedeutet, dass sie eingestellt und vergessen wird. Es ist nicht erforderlich, für jede Zelle einen bestimmten Effekt zu initialisieren!
Folgen Sie mit (Quelldownload):
Hinweis: Dies ist ein Proof-of-Concept und erfordert wahrscheinlich eine Optimierung für die Verwendung in Produktionsstätten.
Zwei andere Dinge:
- Wir starten einen Oxygen Builder-Kurs. Hier erfahren Sie mehr und können sich auf die Warteliste setzen.
- Dies war ein Tutorial , das in unserer großartigen Facebook-Gruppe angefordert wurde . Wir würden uns freuen, wenn Sie dabei sind!
Effekt-Demo:
Schritt 1: ACF-Felder
Wir werden ACF verwenden, um dies zu 100 % dynamisch und für den Endbenutzer einfach zu bearbeiten. Erstellen Sie eine Feldgruppe und fügen Sie ein Hover-Bild und ein Verschiebungsbild hinzu. Das Anfangsbild ist das Beitragsbild des Beitrags. Das Hover-Bild ist das, worauf der Effekt übergeht, wenn der Besucher mit der Maus über einen Repeater-Post fährt.
Das Displacement-Bild wird verwendet, um die einzigartige Morph/Fade-Animation zwischen den beiden Bildern zu erstellen. In diesem Beispiel verwenden wir die folgenden Bilder für die Verschiebung:
Sie können eigentlich jedes Bild verwenden, aber Schwarz-Weiß-Bilder mit großartiger Textur sind normalerweise die besten. Es ist einfach, mit dieser Methode zu experimentieren!
So sehen die Feldgruppe und die zugehörigen Bilder aus, wenn Sie einen neuen Beitrag hinzufügen:
Schritt 2: Erstellen Sie die Struktur für den Effekt
Im Kern kopieren wir den Quellcode aus dem Codrops-Beispiel mit geringfügigen Änderungen.
Wir duplizieren einfach die obige HTML-Struktur mit Oxygen Builder-Elementen. Vergessen Sie nicht, die Klassen aus dem obigen HTML-Beispiel hinzuzufügen, da wir etwas CSS hinzufügen werden und das JS sie verwendet, um bestimmte Elemente zu identifizieren. Wenn Sie diese Klassen ändern, müssen Sie CSS und JS entsprechend aktualisieren.
Unser Repeater verwendet ein CSS-Gitter, um alle Zellen ohne viel Arbeit gleichmäßig zu verteilen:
Schritt 3: Dynamisch machen
Es gibt mehrere Dinge, die dynamisch konfiguriert werden müssen. Lassen Sie zuerst den Repeater den Typ WordPress Post abfragen.
Stellen Sie als Nächstes das Datum und den Beitragstitel auf dynamisch ein.
Jetzt werden wir die drei Bilder einrichten. Hier kann es kompliziert werden. Legen Sie die URL von Bild 1 als URL des vorgestellten Bilds fest.
Legen Sie die URL von Bild 2 als Hover-Bild fest, das im ACF festgelegt ist. Für dieses Tutorial wurden ACF-Felder nicht im Popup „Dynamische Daten einfügen“ angezeigt (wahrscheinlich aufgrund eines Fehlers in Oxygen Builder 4.0 Beta 2). Es gibt eine einfache Problemumgehung, wenn Sie dies jemals erleben:
1 - Fügen Sie die dynamischen Daten ein
2 - Wählen Sie den Rückgabewert der PHP-Funktion aus
3 - Manuelles Einfügen des ACF-Feldinhalts mit get_field('fieldname')
Schließlich müssen wir das Verzerrungsbild festlegen, das der Effekt für den Morph-Übergang verwendet. Dies wird als Datenattribut in das HTML eingefügt, das das JS liest und in den Effekt einbaut. Aus dem obigen HTML können wir sehen, dass es mehrere Attribute gibt, die bearbeitet werden können, um den Effekt zu ändern.
Die Hauptsache, die wir dynamisieren müssen, ist die Datenverschiebung, bei der die URL des Bildes mithilfe von ACF im Beitrag festgelegt wird. Wir haben die anderen drei Attribute fest codiert, aber Sie können dieselbe Methode verwenden, die unten beschrieben wird, um diese Benutzer auch bearbeitbar zu machen.
Wechseln Sie zum Image-Wrapper-Element (das Div um die beiden dynamischen Bilder). Klicken Sie auf Erweitert -> Attribute und fügen Sie Folgendes hinzu.
Für die data-displacement machen wir dies dynamisch, indem wir im Inhalt auf die Schaltfläche data+ klicken und unser entsprechendes ACF-Feld einfügen.
Das Frontend-HTML wird so aussehen, und das JS wird all diese Daten (die dynamisch und über ACF bearbeitbar sind) verwenden, um den coolen Displacement-Hover-Effekt auf WordPress zu erzeugen:
Schritt 4: Fügen Sie CSS, Bibliotheken und JS hinzu
Wir werden das folgende CSS zu unserem universellen CSS-Stylesheet hinzufügen. Möglicherweise müssen Sie mit zusätzlichen CSS-Stilen spielen, damit alles gut funktioniert.
Schließlich laden wir die erforderlichen JS-Bibliotheken und Code (wir haben dies mit einem Codeblock gemacht):
Wir verwenden Statically für unser Beispiel (ziehen die ImagesLoaded- und Hover-Effekt-Bibliotheken von GitHub ein), aber Sie sollten dies idealerweise auf Ihrer Website hosten, indem Sie ein Tool wie Scripts Organizer oder Advanced Scripts verwenden.
Wir laden auch Three.JS und TweenMax.JS, die beiden zugrunde liegenden Bibliotheken, die den Verschiebungseffekt erzeugen.
Schließlich macht das JS Folgendes – es identifiziert, wenn Bilder geladen werden, und wendet den Hover-Effekt auf jedes Element an, das das .grid__item-img hat, wobei es die zugehörigen Bilder und Verschiebungsbilder aus jedem Beitrag zieht. Völlig dynamisch und funktioniert unabhängig von der Anzahl der vom Oxygen Builder-Repeater zurückgegebenen Posts.
Nachdem Sie all dies hinzugefügt haben, sollte Ihr Effekt funktionieren!
Dies wurde von einem Mitglied unserer isotropen Facebook-Gruppe angefordert. Wir laden Sie ein, sich hier anzuschließen.