Unbegrenzte WordPress-Themen und Plugins-Download. Kostenlose Downloads jeden Monat.

Herunterladen

So erstellen Sie einen dynamischen 3D-Mausbewegungs-Animationseffekt mit Divi

Rifat Divi Tutorials Apr 26, 2021

Mit Hilfe von Divi Builder können wir viele einzigartige und kreative Designs machen. Heute werden wir sehen, wie man eine dynamische 3D-Animation mit Divi visual page Builder erstellt, die mit der Bewegung des Mauszeigers interaktiv ist. Normalerweise bewegen wir den Mauszeiger oder klicken auf animation auf einem Objekt, aber hier werden wir ein Objekt animieren, das sich mit der Mausbewegung in verschiedene Richtungen bewegt. Außerdem sehen Sie, wie Sie einem Objekt, das interaktive Animationen ausführt und Leben in das Design einbringt, einen schwebenden 3D-Effekt hinzufügen!

Wir werden Divi-Baumeister für das Design verwenden und später werden wir einige CSS- und jQuery-Code hinzufügen, um die Animationsfunktionalität zu erstellen, die das Design lebendig machen wird! Sie können dieses Design verwenden, um Ihre Produkte Ihren Besuchern auf eine neue Art und Weise zu zeigen!

Endgültiges Design

Wenn alles so läuft, wie wir es planen, dann wird unser endgültiges Design ähnlich aussehen.

Erstellen eines dynamischen 3D-Mausbewegungseffekts auf Divi

Aufgabe 1: Seiteneinrichtung

Da Sie diesen Effekt auf Ihrer Webseite erstellen möchten, glauben wir, dass Sie bereits die neueste Version von Divi installiert haben. Jetzt, "Hinzufügen einer Seite" aus dem Dashboard, titeln Sie es, wie Sie brauchen, und erweitern Sie es mit Divi Builder.

Divi herunterladen Das beste WordPress-Thema

Das beliebteste WordPress-Thema der Welt und der ultimative Wordpress-Seite-Builder

Divi herunterladen.

Wählen Sie jetzt "Build From Scratch" und starten Sie ahed.

Um die 3D-Animation beim Mauszeiger zu aktivieren, zielen wir auf die Zeile ab. Wir nennen es "Hover Container". Auf der anderen Seite fungiert die Spalte als Karte, die mit den untergeordneten Elementen während des Schwebens über der Zeile animiert wird.

Section Styling

Öffnen Sie die Standardabschnittseinstellungen, und aktualisieren Sie die folgenden

  • Hintergrundfarbe - RGBA(68,55,99,0.1). Hier 0.1 ist Deckkraft. 
  • Fügen Sie "7vh" Polsterung sowohl auf der Oberseite und unten.

Hover Container

Fügen Sie nun dem vorbereiteten Abschnitt eine einspaltige Zeile hinzu.

Aktualisieren Sie nun die Zeileneinstellung mit den folgenden Änderungen.

  • Aktivieren Sie "Custom dachrinnenbreite" und ändern Sie den Wert auf 1
  • Breite 100%
  • Maximale Breite: 70% (Desktop), 60% (Tablet), 50% (mobil)
  • Polsterung: 7vh oben und unten, 5vw links und rechts. 

Fügen Sie unter der erweiterten Registerkarte eine benutzerdefinierte CSS-Klasse hinzu.

  • CSS-Klasse: et-hover-container

Fügen Sie außerdem den CSS-Code zum Hauptelement hinzu.

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

The Card

Nachdem Sie die Zeilenaktualisierung abgeschlossen haben, öffnen Sie die Einstellung für die Spalte, um die Karte zu formatieren.

  • Hintergrundfarbe #ffffff
  • Polsterung: 7vh oben, 7vh unten, 5% links, 5% rechts
  • Abgerundete Ecken: 30px
  • Box Shadow: Siehe Screenshot
  • Box Shadow Vertikale Position: 0px
  • Box Shadow Blur Stärke: 80px
  • Schattenfarbe: rgba(0,0,0,0.2)

Fügen Sie unter der erweiterten Registerkarte eine benutzerdefinierte CSS-Klasse hinzu.

  • CSS-Klasse: et-mousemove-Karte

Fügen Sie auch diesen CSS-Code unter Hauptelement hinzu.

max-width: 600px;

Legen Sie nun die Überlaufeigenschaften für horizontale und vertikale Überlaufeigenschaften auf sichtbar.

Aufgabe 3: Erstellen des Kartenelements

The Circle Background With Logo

Für das allererste Element unserer Karte werden wir einen Kreishintergrund hinzufügen, der unser Logo enthält, das hinter unserem Hauptproduktbild sitzt.

Fügen Sie nun "Text" in der Spalte hinzu, und entfernen Sie den Standardtext, um den Text leer zu halten.

Es ist an der Zeit, einen Farbverlaufshintergrund hinzuzufügen.

  • Farbverlauf Linksfarbe #443763
  • Farbverlauf Rechtsfarbe #EA3900
  • Festlegen der Gradientenrichtung auf 90 Grad

Fügen Sie zusammen mit der Farbverlaufsfarbe ein Logo als Hintergrundbild hinzu. Die Bildgröße sollte 60px mal 60px betragen und den Hintergrundbildgrößenwert auf "Tatsächliche Größe" festlegen.

Ändern Sie auf der Registerkarte "Design" die Werte im Abschnitt "Größe" wie folgt. Legen Sie den Breitenwert 160px für Desktop, 150px für Tablet und 80px für Smartphone fest.

Legen Sie außerdem den Höhenwert auf den gleichen Wert wie die Breite fest. Legen Sie schließlich die abgerundeten Ecken im Abschnitt "Grenze" auf den Wert 80 % fest.

Aktualisieren Sie auf der Registerkarte "Erweitert" die unten angegebenen Positionen.

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

The Card Image

Nun, da wir mit dem Logo-Teil fertig sind, fügen wir das Produktbild auf der Karte hinzu. Wir fügen ein neues Bildmodul unter dem vorherigen Textmodul hinzu.

Laden Sie nun ein Bild des Produkts hoch. Stellen Sie sicher, dass das Bild transparent ist und im Png-Format ist. Hier verwenden wir das Bild eines roten Ferraris.

Ändern Sie auf der Registerkarte "Design" die unten genannten Werte.

  • Bildausrichtung: Mitte
  • Breite: 90%
  • Rand: 12vh oben und 5vh unten (passen Sie die Werte nach Ihren Bedarf)

Fügen Sie im Abschnitt "Erweitert" eine benutzerdefinierte CSS-Klasse für das Bild hinzu.

  • CSS-Klasse: et-card-image

The Car Heading

Jetzt erstellen wir eine Überschrift für die Karte. Wenn unser Autobild in Position ist, fügen wir ein Textmodul unter dem Bild hinzu, um unsere Kartenüberschrift zu erstellen.

Entfernen Sie im Textkörper den Standardtext, und fügen Sie die unten angegebene Html-Überschrift H2 hinzu.

<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>

Ändern Sie nun im Entwurfsabschnitt die folgenden Werte:

  • Überschrift 2 Schriftart : Bebas Neue
  • Überschrift 2 Textausrichtung : Mitte
  • Überschrift 2 Textfarbe: #443763
  • Überschrift 2 Textgröße : 75px für Desktop, 60px für Tablet und 45px für Mobilgeräte.
  • Überschrift 2 Buchstabenabstand : 0.05em
  • Marge : 4vh unten

Fügen Sie im Abschnitt "Erweitert" eine benutzerdefinierte CSS-Klasse hinzu.

  • CSS-Klasse: et-Card-Überschrift

The Card Info

Nun fügen wir die Informationen über die Karte hinzu. Wir werden ein weiteres Textmodul für Informationen hinzufügen, da dies uns erlaubt, verschiedene 3D-Animationseffekte zu jedem von ihnen hinzuzufügen. Fügen wir ein neues Textmodul unter der Überschrift Textmodul hinzu.

Fügen Sie nun den folgenden Textinhalt zum Textkörper hinzu.

<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>

Aktualisieren Sie unter der Registerkarte Entwurf Folgendes:

  • Text Schriftgewicht : Semi Bold
  • Textgröße : 18px (Desktop) und 16px (Tablet und Telefon.)
  • Textzeilenhöhe : 1.8em
  • Textausrichtung : Mitte
  • Spielraum : 4vh

Fügen Sie nun diesem Modul eine benutzerdefinierte CSS-Klasse hinzu.

  • CSS-Klasse: et-card-info

The Button

Fügen Sie nun ein neues Schaltflächenmodul unter dem Infotextmodul hinzu. Dadurch wird eine Schaltfläche auf der Karte hinzugefügt.

Ändern Sie auf der Registerkarte "Inhalt" der Schaltflächeneinstellungen den Schaltflächentext.

  • Button Text: Machen Sie ein Angebot.

Stylen Sie auf der Registerkarte "Design" die Schaltfläche wie unten erwähnt.

  • Verwenden benutzerdefinierter Stile für Schaltfläche: JA
  • Button Text Größe: 25px (Desktop), 20px (Tablet), 16px (Telefon)
  • Schaltfläche Textfarbe: #ffffff
  • Schaltfläche Hintergrundfarbe: #443763
  • Knopfumbreite: 0px
  • KnopfrahmenRadius: 30px
  • Knopfbuchstabenabstand: 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

Fügen Sie nun eine benutzerdefinierte CSS-Klasse hinzu

  • CSS-Klasse: et-Card-Button

Result Till Now

Hier ist unsere endgültige Designausgabe ohne Animation.

Jetzt fügen wir einen benutzerdefinierten Code hinzu, um Dieses Design zum Leben zu erwecken.

Aufgabe 4: Hinzufügen von benutzerdefinierten CSS - JQuery-Code

Da unser Design abgeschlossen ist, werden wir nun CSS- und JQuery-Code hinzufügen, um unseren neu erstellten Spalten und Kartenelementen einen dynamischen Animationseffekt für 3D-Mausbewegungen zu verleihen.

Fügen Sie dazu ein neues Codemodul unter dem Schaltflächenmodul hinzu.

Fügen Sie den angegebenen benutzerdefinierten CSS-Code in das Feld ein, und stellen Sie sicher, dass der Code in das Tag "Style" umbrochen wird.

<style>
/*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;
}
</style>

Der CSS-Code sieht unter der Registerkarte Inhalt des Codemoduls so aus.

Fügen Sie unterhalb des CSS die folgende JQuery hinzu und stellen Sie sicher, dass sich der Code innerhalb der "Script"-Tags befindet.

<script>
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)`);
});
});
</script>

Der folgende Code sollte im Codebereich wie folgt aussehen.

Speichern Sie nun die gesamte Arbeit und überprüfen Sie das gesamte Werk in einer Live-Seite.

Endausgabe

Unser gesamtes Design sieht also so aus. Cool huh!

Letzte Worte

Die 3D-Animation, die wir im heutigen Tutorial gesehen haben, ist sehr einfach und macht Spaß zu lernen. Dies ist ein einzigartiger und erweiterter Animationseffekt, der durch Mausbewegung gesteuert werden kann. Wir können dies durch einige einfache CSS- und JQuery-Codierung entwerfen. Zweifellos ist Divi ein leistungsstarker Seitenbauer und durch kundenspezifische Codierung ist es möglich, ein magisches Design auf Websites zu bringen.

Share Your Thoughts