So erstellen Sie eine Split Text Shutter-Bildanimation auf Divi

Image Overlay ist ein sehr kreatives Medium, um Website-Besuchern ein attraktives Seherlebnis zu bieten. Benutzerdefinierte Animationen und schwebende Effekte sind eine großartige Möglichkeit, ein Bild zu präsentieren, und es ist sehr beliebt bei jedem in diesen Tagen. Im heutigen Tutorial werden wir sehen, wie man schöne Bild-Overlays mit Geteilttext-Animation durch Divi erstellt.

Wir haben das heutige Tutorial in drei Teile unterteilt. Im ersten Teil erfahren Sie, wie Sie ein benutzerdefiniertes Bild-Overlay erstellen, und im nächsten Teil fügen wir dem Entwurf Code hinzu. Und schließlich werden wir sehen, wie sie ein einzigartiges Bild-Overlay-Design mit der integrierten Option von Divi erstellen.

Lassen Sie uns ohne Verzögerung loslegen.

Vorschau

Bevor wir mit dem heutigen Tutorial beginnen, werfen Sie einen Blick auf unser Design, das wir heute lernen werden.

Before We Start

Divi ist ein großes WordPress-Theme, das beeindruckende Funktionen liefert und dient dem wahren Zweck eines Mehrzweck-Wordpress-Theme. Sein einfach zu bedienender Seitengenerator hat eine Menge Funktionalität, die tolle Designs erstellen kann. Holen Sie sich das Thema und aktivieren Sie es nach der Installation.

Erstellen Sie eine neue Seite aus dem WordPress-Dashboard und öffnen Sie die Seite zur Bearbeitung mit Divi Builder. Wählen Sie "Build From Scratch" und wir sind bereit zu arbeiten!

Abschnitt 1: Bau des Entwurfs

Wir haben bereits erwähnt, dass wir die Struktur unseres Designs im ersten Teil schaffen würden. Sobald wir mit der Einrichtung der Bild-Overlay mit geteilten Textläden fertig sind, werden wir die Animation auf den nächsten Teil laden.

Hinzufügen: Zeile 1

Zeileneinstellungen

Fügen Sie eine reguläre 2-Spaltenzeile im Abschnitt hinzu, und ändern Sie vor dem Hinzufügen weiterer Module die folgenden Einstellungen.

• Gutter breite: 2

Spalteneinstellungen

Spalten halten unsere Bilder und Verschluss-Overlay-Elemente, so wird dies unser Hauptcontainer sein. Außerdem initiiert diese Spalte die Hovereffekte der Shutter-Animation. Einfach, wenn eine Maus in dieser Spalte kommt - die gesamte Animation wird gestartet und, sobald die Maus aus ist, wird sie in den vorherigen Zustand zurückkehren.

Fügen Sie der Spalte die CSS-Klasse hinzu, um unsere Spalte als "Shutter-Spalte" auszuwählen und sie später "on hover" zu animieren.

• CSS-Klasse: Verschlusssäule on-hover

Nehmen Sie auch die folgenden Anpassungen vor.

• Horizontaler Überlauf: Ausgeblendet
• Vertikaler Überlauf: Ausgeblendet

Hinzufügen: Image-Modul

Jetzt fügen wir unser Hauptbild hinzu, das hinter unserem Verschluss-Overlay mit einem Bildmodul sitzt.

Nehmen Sie nun eine leichte Änderung an der Ausrichtung unter der Registerkarte Entwurf vor.

• Bildausrichtung: Mitte

Erstellen eines Top-Shutter-Split-Textes

Wenn unser Bild platziert wird, fügen wir ein Textmodul unter dem Bildmodul hinzu, um einen oberen Verschluss hinzuzufügen.

Aktualisieren Sie das Textmodul mit einem Text.

Öffnen Sie die Entwurfsregisterkarte, nehmen Sie diese Anpassungen vor.

• Textschriftart: Poppins
• TextSchriftgewicht: Schwer
• TextSchriftstil: TT
• Texttextfarbe: #ffffff
• Texttextgröße: 150px (Desktop), 20vw (Tablet und Telefon)
• Textbuchstabenabstand: -0.03em
• Textlinie Höhe: 0em
• Textausrichtung: Mitte

Aktualisieren Sie nun die Größen- und Abstandseinstellungen.

• Breite: 100%
• Höhe: 50%
• Rand: 0px unten

Fügen Sie nun die folgende CSS-Klasse auf der erweiterten Registerkarte hinzu.

• CSS-Klasse: Top-Shutter

Später verwenden wir die Klasse, um die Transformationsanimation mit benutzerdefiniertem Code ein- und auszuschalten. Fügen Sie dann diesen CSS-Code zum Hauptelement hinzu.

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

Um unseren Text in Position zu bringen, müssen wir diese Änderungen vornehmen.

Erstellen eines untersten Shutter-Split-Texts

Da unser oberster Verschluss-Split-Text fertig ist, duplizieren Sie das Textmodul, um einen unteren Verschluss-Split-Text zu erstellen. Sie müssen keine CSS-Klasse hinzufügen. Da wir gerade das vorherige Modul geklont haben, ist die CSS-Klasse bereits da. Aber wir müssen einige Anpassungen am CSS-Code auf Main Element vornehmen.

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

Verweis auf "Flex-Start", der Text ist vertikal am oberen Rand des Moduls ausgerichtet. Im vorherigen Textmodul haben wir die Zeilenhöhe auf 0 gesetzt, so dass die untere Hälfte des gesamten Textes sichtbar ist.

Fügen Sie eine absolute Position mit einem vertikalen Versatz hinzu.

• Vertikaler Versatz: 50%

Jetzt haben wir erfolgreich die Struktur unseres heutigen Tutorials erstellt, wo wir Animation mit der Codierung im nächsten Teil machen werden. Benennen wir die Module um, um zukünftige Sinnen zu verstehen.

Abschnitt 2: Der Kodex

Um shutter Animation Effekt auf unsere Struktur zu bringen, benötigen wir einige CSS und JS-Code. Dazu verwenden wir ein Codemodul. Fügen Sie das Codemodul oben in der rechten Spalte hinzu.

Der CSS-Code

Fügen Sie den folgenden CSS-Code in ein Style-Tag ein.

/* transition duration of shutter animation */
.top-shutter,
.bottom-shutter {
  transition: transform 1s;
}
/* disables all transform options created in
Divi Builder for both shutters */
.divi-transform-none .top-shutter,
.divi-transform-none .bottom-shutter {
  transform: none;
}
.on-click {
  cursor:pointer;
}

Der JS-Code

Fügen Sie dann den folgenden JQuery-Code in einem Skript-Tag hinzu.

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");
 
    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });
 
    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");
 
    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });
 
    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Abschnitt 3: Split Text Shutter Animation Design

Jetzt duplizieren wir den ersten Abschnitt unseres Designs, um unsere erste Shutter-Animation zu erstellen.

Hinzufügen: Top Shutter Transformation-Eigenschaften

Wenn wir etwas mit CSS-Transformationseigenschaften animieren, gibt es normalerweise am Anfang keinen Transformationsstil für dieses Element. Nachdem wir dann über das Element schweben, können wir diesen Stil sehen. In Divi werden wir den gesamten Prozess umkehren. Wir transformieren dieses Element zuerst mit Divi Builder. Der Vorteil dabei ist, dass wir alles visuell bearbeiten können. Wenn das Styling abgeschlossen ist, deaktivieren wir es zunächst mit einer CSS-Klasse. Schalten Sie es dann ein und aus, wenn der Benutzer mit dem Overlay interagiert.

Um das Transformationsdesign zum oberen Verschluss hinzuzufügen, öffnen Sie die Einstellungen des oberen Verschlusstextmoduls, und aktualisieren Sie Folgendes:

• Transformationsskala (X und Y): 150%
• Transformieren Sie Y-Achse: -101%
• Transform Origin: oberstemitte

Wenn Sie alles korrekt bearbeiten, ist der obere Verschlusstext nicht mehr sichtbar, da das gesamte Bild nach dem Animationsübergang verfügbar gemacht werden soll.

Hinzufügen: Bottom Shutter Transformation-Eigenschaften

Aktualisieren Sie für den Bottom Shutter die folgenden Transformationsentwurfsoptionen:

• Transformationsskala (X und Y): 150%
• Transformtranslate Y-Achse: 101%
• Transform Origin: untere Mitte

Hinzufügen: CSS-Klasse zum Deaktivieren der Transform-Eigenschaft (zunächst)

Wir wissen bereits, dass wir nach dem Entwerfen von Transformationseigenschaften für Die Shutter-Animation Transformationsentwürfe mit einer kleinen CSS-Klasse deaktivieren. Aufgrund des benutzerdefinierten CSS-Codes, den wir zuvor hinzugefügt haben, wird das Design ohne Transformationsentwürfe angezeigt.

Hinzufügen: On-Click-Funktionalität

Unsere erste Animation war auf dem Schwebeeffekt. Wenn Sie also mit dem Mauszeiger über das Bild und den Text fahren, würde das Schweben die Animation tatsächlich auslösen. Jetzt werden wir sehen, wie wir dies mit dem Mausklick tun können, ohne zu schweben. Ganz einfach, wir lassen den Befehl "on-hover" weg und fügen den Befehl "on-click" zum Abschnitt hinzu.

• CSS-Klasse: Shutter-Spalte auf Klick divi-transform-none

Das Design wird also so aussehen.

Umkehren der Animation

Nun, wenn wir wollen, können wir eine Animation machen, in der das gesamte Bild freigelegt bleibt und der Text kommt, wenn wir schweben - was genau das Gegenteil von dem bedeutet, was wir jetzt haben. Wir können solche Animationen leicht erhalten, indem wir die CSS-Klasse "divi-transform-none" entfernen.

Ein weiteres Design

Hier haben wir ein weiteres Design.

Update-Shutter

Wählen Sie die oberen und unteren Textmodule aus jeder Verschlussvorlage aus. Öffnen Sie dann die Elementeinstellungen für beide, und aktualisieren Sie Folgendes:

• Hintergrund: #ffffff
• Texttextfarbe: #000000
• Mischmodus: Bildschirm

Endgültiges Design

Unser endgültiges Design wird so aussehen.

Schlussfolgerung

Jedes Design einschließlich Split-Text-Shutter-Design, kann sehr einfach durch Divi getan werden. Es ist eine sehr effektive Möglichkeit, Besucher anzulocken. Hoffentlich wird das heutige Tutorial Ihrem Website-Design eine neue Dimension hinzufügen. Wenn Ihnen dieses Tutorial gefällt, vergessen Sie nicht, uns im Kommentarfeld zu informieren.