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.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangen
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.
