So erstellen Sie einen dynamischen 3D-Mousemove-Animationseffekt in Divi

Veröffentlicht: 2021-04-18

Das Erstellen einer dynamischen 3D-Mousemove-Animation ist eine unterhaltsame und aufregende Möglichkeit für Benutzer, mit Webinhalten auf Ihrer Divi-Site zu interagieren. Das Design ist dynamisch, da sich die Animation mit Ihrem Cursor bewegt. Normalerweise animieren wir Objekte beim Bewegen oder Klicken. In diesem Tutorial werden wir jedoch eine kreative Methode zum Animieren von Objekten bei Mousemove (Bewegen des Cursors an verschiedene Stellen im Browserfenster) vorstellen. Aber das ist nicht alles. Wir zeigen Ihnen auch, wie Sie die Mausbewegungsanimation mit einem Hover-Effekt kombinieren, der Elemente zu einem 3D-Design hervorhebt, das Ihre Inhalte auf ganz neue Weise zum Leben erweckt.

Um es zu erstellen, verwenden wir den Divi-Builder für den Großteil des Designs. Dann verwenden wir benutzerdefiniertes CSS und JQuery, um die Animationsfunktionalität zu erstellen.

Sobald Sie fertig sind, haben Sie ein beeindruckendes Design, um neue Produkte oder Dienstleistungen bei Ihrem nächsten Projekt zu präsentieren!

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Sie können sich auch diesen Codepen ansehen, um eine Live-Demo des Effekts zu sehen.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter
Kostenlos herunterladen

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

divi-Benachrichtigungsfeld

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Erweiternde Eckregisterkarten

Um zu beginnen, müssen Sie Folgendes tun:

  1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
  2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
  3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen eines dynamischen 3D-Mousemove-Animationseffekts in Divi

Teil 1: Erstellen des Hover-Containers und der Karte mit einer Zeile und einer Spalte

Für diesen Animationseffekt ist die Zeile das Ziel, das die 3D-Animation beim Schweben aktiviert. Wir können dies den Schwebecontainer nennen. Die Spalte dient als unsere Karte, die zusammen mit ihren untergeordneten Elementen animiert wird, wenn Sie mit der Maus über die Zeile fahren.

Aber bevor wir die Zeile und Spalte erstellen, lassen Sie uns den Abschnitt formatieren.

Die Sektion

Öffnen Sie zunächst die Einstellungen für den standardmäßigen regulären Abschnitt und aktualisieren Sie Folgendes:

  • Hintergrundfarbe: rgba(68,55,99,0.1)

divi-3d-mousemove-Animationseffekt

  • Polsterung: 7vh oben, 7vh unten

divi-3d-mousemove-Animationseffekt

Die Reihe (Hover-Container)

Fügen Sie dem Abschnitt eine einspaltige Zeile hinzu.

divi-3d-mousemove-Animationseffekt

Zeileneinstellungen

Aktualisieren Sie unter den Zeileneinstellungen Folgendes:

  • Dachrinnenbreite: 1
  • Breite: 100%
  • Max. Breite: 70 % (Desktop), 60 % (Tablet), 50 % (Telefon)
  • Polsterung: 7vh, oben, 7vh unten, 5vw links, 5vw rechts

HINWEIS: Der Trick hier besteht darin, eine Reihe mit genügend Platz um die Spalte herum zu erstellen, damit Sie die Mausbewegungsanimation der Karte aktivieren können, indem Sie den Cursor über den gesamten Zeilenbereich (nicht die Spalte) bewegen. Auf diese Weise haben Sie mehr Platz, um die Karte zu verschieben. Sie möchten auch genügend Platz um die Reihe herum lassen, damit Sie den Cursor außerhalb der Reihe (in den die Reihe umgebenden Abschnittsbereich) bewegen können, um die Animation zu deaktivieren und die Kartenelemente wieder einzurasten.

divi-3d-mousemove-Animationseffekt

Geben Sie der Zeile auf der Registerkarte "Erweitert" eine benutzerdefinierte Klasse:

  • CSS-Klasse: et-hover-container

Fügen Sie dann das folgende CSS zum Hauptelement hinzu: 

display:flex;
align-items:center;
justify-content:center;

Dieser kleine Ausschnitt hält die Spalte vertikal und horizontal innerhalb der Zeile zentriert (notwendig, weil wir unserer Spalte eine festgelegte maximale Breite geben werden).

divi-3d-mousemove-Animationseffekt

Die Säule (oder Karte)

Öffnen Sie nach dem Aktualisieren der Zeile die Einstellungen für die Spalte, um den Stil für unsere Karte wie folgt zu erstellen:

  • Hintergrundfarbe: #ffffff

divi-3d-mousemove-Animationseffekt

  • Polsterung: 7vh oben, 7vh unten, 5% links, 5% rechts
  • Abgerundete Ecken: 30px

divi-3d-mousemove-Animationseffekt

  • Box Shadow: siehe Screenshot
  • Vertikale Position des Boxschattens: 0px
  • Stärke der Box-Schattenunschärfe: 80px
  • Schattenfarbe: rgba(0,0,0,0.2)

divi-3d-mousemove-Animationseffekt

Geben Sie auf der Registerkarte Erweitert der Spalte eine benutzerdefinierte Klasse:

  • CSS-Klasse: et-mousemove-card

Fügen Sie dann dieses benutzerdefinierte CSS zum Hauptelement hinzu: 

max-width: 600px;

Stellen Sie dann sicher, dass die Überlaufeigenschaften auf "sichtbar" gesetzt sind.

  • Horizontaler Überlauf: sichtbar
  • Vertikaler Überlauf: sichtbar

HINWEIS: Wenn Sie der Spalte eine maximale Breite von 600 px geben, bleibt das Design bei verschiedenen Browsergrößen konsistenter und erhöht auch den Hover-Raum um die Spalte für den Hover-Container (oder die Zeile). Der hinzugefügte Randradius (abgerundete Ecken) blendet den Überlauf aus, daher müssen wir den Überlauf auf sichtbar setzen. Wenn wir dies nicht tun, funktioniert die Animation nicht wie erwartet.

divi-3d-mousemove-Animationseffekt

Teil 2: Erstellen der Kartenelemente

#1 Der Kreishintergrund mit Logo

Für das erste Element in unserer Karte werden wir einen kreisförmigen Hintergrund hinzufügen, der ein Logo enthält, das sich hinter unserem Fahrradbild befindet.

Fügen Sie der Spalte einen neuen Textbaustein hinzu.

divi-3d-mousemove-Animationseffekt

Nehmen Sie den Standardtext heraus, sodass der Textkörper leer ist.

Fügen Sie dann einen Verlaufshintergrund hinzu:

  • Farbverlauf Hintergrund links Farbe: #443763
  • Farbverlauf Hintergrund Rechte Farbe: #ea3900

Fügen Sie zusätzlich zum Verlaufshintergrund ein Logo für das Hintergrundbild hinzu.

  • Hintergrundbild: [fügen Sie ein beliebiges PNG-Logo-Bild hinzu, das ungefähr 60 x 60 Pixel groß ist]
  • Hintergrundbildgröße: Tatsächliche Größe

divi-3d-mousemove-Animationseffekt

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

  • Breite: 160px (Desktop), 150px (Tablet), 80px (Telefon)
  • Höhe: 160px (Desktop), 150px (Tablet), 80px (Telefon)
  • Abgerundete Ecken: 50%

Die passenden Breiten- und Höhenwerte und der 50% Randradius geben uns die gesuchte Kreisform.

divi-3d-mousemove-Animationseffekt

Aktualisieren Sie auf der Registerkarte Erweitert die Position wie folgt:

  • Position: Absolut
  • Ort: Top Center
  • Vertikaler Versatz: 15%

divi-3d-mousemove-Animationseffekt

#2 Das Kartenbild

Um das Produktbild (in diesem Fall ein Fahrrad) zu erstellen, fügen Sie ein neues Bildmodul unter dem vorherigen Textmodul hinzu.

divi-3d-mousemove-Animationseffekt

Laden Sie dann das Bild in das Modul hoch. Stellen Sie sicher, dass es sich um ein Bild im PNG-Format mit transparentem Hintergrund handelt. Ich verwende das Fahrradbild aus unserem Fahrradreparatur-Layout-Paket.

divi-3d-mousemove-Animationseffekt

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

  • Bildausrichtung: Mitte
  • Breite: 90%
  • Rand: 4vh unten

divi-3d-mousemove-Animationseffekt

Geben Sie dem Bild auf der Registerkarte Erweitert eine benutzerdefinierte Klasse:

  • CSS-Klasse: et-card-image

divi-3d-mousemove-Animationseffekt

#3 Die Kartenüberschrift

Fügen Sie mit unserem Bild ein neues Textmodul darunter hinzu, um unsere Kartenüberschrift zu erstellen.

divi-3d-mousemove-Animationseffekt

Fügen Sie im Hauptteil des neuen Textmoduls den folgenden H2-Überschrift-HTML-Code ein: 

<h2>The <span style="color: #ea3900;">Divi</span> Bike</h2>

divi-3d-mousemove-Animationseffekt

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

  • Überschrift 2 Schriftart: Bebas Neue
  • Überschrift 2 Textausrichtung: Mitte
  • Überschrift 2 Textfarbe: #443763
  • Überschrift 2 Textgröße: 75px (Desktop), 60px (Tablet), 45px (Telefon)
  • Überschrift 2 Buchstabenabstand: 0.05em
  • Rand: 4vh unten

divi-3d-mousemove-Animationseffekt

Fügen Sie auf der Registerkarte Erweitert eine benutzerdefinierte Klasse hinzu:

  • CSS-Klasse: et-card-heading

divi-3d-mousemove-Animationseffekt

#4 Der Karteninfo-Text

Die Verwendung separater Textmodule für den Überschrifts- und Infotext ermöglicht es uns, jedem von ihnen verschiedene 3D-Animationseffekte hinzuzufügen. Um den Infotext unter der Überschrift zu erstellen, fügen Sie unter der Überschrift Textbaustein einen neuen Textbaustein hinzu.

divi-3d-mousemove-Animationseffekt

Fügen Sie dann den folgenden Inhalt zum Hauptteil hinzu: 

<p>The One and Only Divi Bike<br>(By Elegant Themes)</p>

divi-3d-mousemove-Animationseffekt

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

  • Schriftstärke des Textes: Halbfett
  • Text Textgröße: 18px (Desktop), 16px (Tablet und Telefon)
  • Textzeilenhöhe: 1.8em
  • Textausrichtung: Mitte
  • Rand: 4vh

divi-3d-mousemove-Animationseffekt

Geben Sie dem Textmodul dann eine benutzerdefinierte Klasse:

  • CSS-Klasse: et-card-info

divi-3d-mousemove-Animationseffekt

#5 Der Kartenknopf

Um die Schaltfläche für die Karte zu erstellen, fügen Sie unter dem Infotextbaustein ein neues Schaltflächenmodul hinzu.

divi-3d-mousemove-Animationseffekt

Aktualisieren Sie im modalen Schaltflächeneinstellungen den Schaltflächentext.

  • Buttontext: Angebot machen

divi-3d-mousemove-Animationseffekt

Gestalten Sie die Schaltfläche auf der Registerkarte Design wie folgt:

  • Benutzerdefinierte Stile für Schaltfläche verwenden: JA
  • Schaltflächentextgröße: 25px (Desktop), 20px (Tablet), 16px (Telefon)
  • Schaltflächentextfarbe: #ffffff
  • Schaltflächenhintergrundfarbe: #443763
  • Breite des Tastenrahmens: 0px
  • Radius der Schaltflächenleiste: 30px
  • Tasten-Buchstaben-Abstand: 0.1em
  • Button-Schriftart: Bebas Neue
  • Polsterung (Desktop): 0.5em oben, 0.5em unten, 3em links, 3em rechts
  • Polsterung (Telefon): 0.5em oben, 0.5em unten, 2em links, 2em rechts

divi-3d-mousemove-Animationseffekt

Geben Sie dann der Schaltfläche eine benutzerdefinierte Klasse:

  • et-card-button

divi-3d-mousemove-Animationseffekt

Ergebnis bisher

Hier ist das Ergebnis des bisherigen Designs.

Jetzt brauchen wir nur noch benutzerdefinierten Code.

Teil 3: Hinzufügen des benutzerdefinierten Codes (CSS und JQuery)

Nachdem unser Design nun abgeschlossen ist, können wir den CSS- und JQuery-Code hinzufügen, der zum Erstellen des dynamischen 3D-Mousemove-Animationseffekts zur Karte/Spalte und den Kartenelementen erforderlich ist.

Fügen Sie dazu unter dem Tastenmodul ein Codemodul hinzu.

divi-3d-mousemove-Animationseffekt

Fügen Sie dann das folgende benutzerdefinierte CSS in das Codefeld ein und stellen Sie sicher, dass das CSS in die style- Tags eingeschlossen ist. 

/*add perspective to row for 3d perspective of child elements*/ 
.et-hover-container {
perspective: 1000px;
}

/*preserve-3d needed for 3d effect on card elements*/ 
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

/*transition timing function and duration for card elements*/ 
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}

divi-3d-mousemove-Animationseffekt

Fügen Sie unter dem CSS die folgende JQuery ein und achten Sie darauf, den Code in die script- Tags einzuschließen. 

jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});

//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});

divi-3d-mousemove-Animationseffekt

Über den Kodex

CSS

Um unsere 3D-positionierten Elemente (die Spalte und die Module) bereitzustellen, müssen wir die perspektivische CSS-Eigenschaft für die Zeile (oder den Hover-Container) verwenden. 

.et-hover-container {
perspective: 1000px;
}

Dann müssen wir sicherstellen, dass diese Kartenelemente im 3D-Raum positioniert sind, indem wir die transform-style-Eigenschaft mit dem Wert beibehalten-3d verwenden.

.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

Dann legen wir die Übergangszeitfunktion und -dauer fest, wenn die Kartenelemente animiert werden.

.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

Schließlich verwenden wir die Eigenschaft transform mit einer translateZ-Funktion, um die Elemente auf der Z-Achse zu verschieben, wodurch der Popout-Effekt entsteht, wenn wir mit der Maus über die Zeile fahren und die transform-3d-Klasse zu jedem Element hinzugefügt wird.

.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}

Die JQuery

Zuerst deklarieren wir alle Variablen, die benötigt werden, um die Elemente entsprechend ihrer benutzerdefinierten Klasse anzusprechen. 

//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

Dann fügen wir das mousemove-Ereignis an die Zeile (oder den Hover-Container) mit einer Funktion an, die die Position des Cursors sowohl für die X- als auch für die Y-Achse des Browserfensters berechnet und dann die mousemove-Karte (oder Spalte) als X und Y dreht Werte ändern sich dynamisch. 

//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});

Um das Transformations-CSS (mit translateZ) zu aktivieren, das die Kartenelemente in den Z-Raum verschiebt, schalten wir die Klasse transform-3d auf jedes Element um, wenn wir über die Zeile (oder den Hover-Container) fahren. 

//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});

Dann müssen wir das mouseleave-Ereignis mit einer Funktion an die Zeile anhängen, die eine CSS-Transformationseigenschaft mit den Rotations-Y- und Rotations-X-Funktionen auf 0 Grad hinzufügt. Dadurch wird die Spalte (oder Karte) wieder eingerastet, wenn sich der Cursor aus der Zeile bewegt. 

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});

Endergebnis

Sehen Sie sich das Endergebnis an!

Sie können sich auch diesen Codepen ansehen, um eine Live-Demo des Effekts zu sehen.

Abschließende Gedanken

Der dynamische 3D-Mousemove-Animationseffekt, den wir in diesem Tutorial erstellt haben, enthält einzigartige und fortgeschrittene Animationseffekte, die leicht erlernt und aufregend zu erkunden sind. Die Mousemove-Animation, mit der Benutzer mit dem Design interagieren können, kann mit wenigen Zeilen JQuery erstellt werden. Und die 3D-Hover-Effekte basieren auf einigen CSS-Eigenschaften, die leicht erlernt werden können. Alles in allem gibt es so viele Möglichkeiten, die durch die Kombination eines leistungsstarken Seitenerstellers wie Divi mit der Magie von JQuery entstehen können. Hoffentlich wird dieser für Sie nützlich sein.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!