So transformieren Sie Ihr Design mit Scroll-Geschwindigkeit mit Divi & GSAP

Veröffentlicht: 2021-05-21

Je vertrauter Sie mit Divi sind, desto mehr erkennen Sie, dass es ein sehr flexibles Werkzeug ist. Es ermöglicht Ihnen, direkt in ein Seitendesign einzutauchen, ohne zuerst andere Designanwendungen durchgehen zu müssen. Es legt auch die Grundlage für Sie, um mit einigen der integrierten Funktionen wie Scroll-Effekte und Sticky-Optionen noch fortschrittlichere Erlebnisse zu schaffen. Obwohl dies für sich genommen schon ziemlich leistungsstarke Funktionen sind, haben sie ihre Grenzen. Grenzen, die Sie leicht durchbrechen können, wenn Sie externe Bibliotheken verwenden. Im heutigen Tutorial zeigen wir Ihnen beispielsweise, wie Sie mit Divi, GSAP und ScrollTrigger für GSAP Ihr Design mit Scroll-Geschwindigkeit transformieren. Während wir im Design nach unten scrollen, verändern sich bestimmte Elemente je nach der Geschwindigkeit, mit der Sie scrollen, was zu einem hochinteraktiven Erlebnis führt. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Vertikaler Versatz

Desktop

Scroll-Geschwindigkeit

Handy, Mobiltelefon

Scroll-Geschwindigkeit

Horizontale Schräglage

Desktop

Scroll-Geschwindigkeit

Handy, Mobiltelefon

Scroll-Geschwindigkeit

Drehen

Desktop

Scroll-Geschwindigkeit

Handy, Mobiltelefon

Scroll-Geschwindigkeit

Laden Sie die Layouts KOSTENLOS herunter

Um die kostenlosen Layouts in die Hände zu bekommen, müssen Sie sie 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!

Was wir verwenden

  • Division
  • GSAP
  • ScrollTrigger für GSAP
  • ScrollTrigger-Demo

1. Elementstruktur aufbauen

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Wir beginnen dieses Tutorial, indem wir die Elementstruktur auf einer neuen oder vorhandenen Seite erstellen. Fügen Sie einen neuen Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und fügen Sie einen Verlaufshintergrund ein.

  • Farbe 1: #162c2d
  • Farbe 2: #122223
  • Verlaufstyp: Linear
  • Verlaufsrichtung: 90deg
  • Startposition: 20%
  • Endposition: 20%

Scroll-Geschwindigkeit

Abstand

Wechseln Sie zur Design-Registerkarte des Abschnitts und ändern Sie als nächstes die Padding-Werte.

  • Obere Polsterung: 100px
  • Untere Polsterung: 100px

Scroll-Geschwindigkeit

Überläufe

Um sicherzustellen, dass nichts den Abschnittscontainer überschreitet, blenden wir auch die Überläufe des Abschnitts aus.

  • Horizontaler Überlauf: Versteckt
  • Vertikaler Überlauf: Versteckt

Scroll-Geschwindigkeit

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Scroll-Geschwindigkeit

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

  • Benutzerdefinierte Dachrinnenbreite verwenden: Ja
  • Dachrinnenbreite: 1
  • Spaltenhöhen ausgleichen: Ja
  • Breite: 90%
  • Maximale Breite: 1580px

Scroll-Geschwindigkeit

Hauptelement

Wir richten unseren Zeileninhalt vertikal aus, indem wir dem Hauptelement der Zeile auf der Registerkarte "Erweitert" die folgenden Zeilen CSS-Code hinzufügen:

Desktop: 

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

Tablet & Telefon: 

display: block;

Scroll-Geschwindigkeit

Spalte 1 Einstellungen

Hauptelement

Dann öffnen wir die Einstellungen von Spalte 1 und ändern die Breite der Spalte über verschiedene Bildschirmgrößen auf der Registerkarte "Erweitert".

Desktop: 

width: 45% !important;

Tablet & Telefon: 

width: 100% !important;

Scroll-Geschwindigkeit

Scroll-Geschwindigkeit

Spalte 2 Einstellungen

Hintergrundfarbe

Wir öffnen dann die Einstellungen von Spalte 2 und verwenden eine Hintergrundfarbe.

  • Hintergrundfarbe: #193738

Scroll-Geschwindigkeit

Scroll-Geschwindigkeit

Abstand

Als Nächstes ändern wir die Abstandswerte der Spalte.

  • Obere Polsterung:
    • Desktop: 200px
    • Tablet: 100px
    • Telefon: 50px
  • Untere Polsterung:
    • Desktop: 200px
    • Tablet: 100px
    • Telefon: 50px
  • Linke Polsterung: 5%
  • Rechte Polsterung: 5%

Scroll-Geschwindigkeit

Hauptelement

Und wir vervollständigen die Spalteneinstellungen, indem wir dem Hauptelement der Spalte die folgenden CSS-Codezeilen hinzufügen:

Desktop: 

width: 55% !important;

Tablet & Telefon: 

width: 100% !important;

Scroll-Geschwindigkeit

Bildmodul zu Spalte 1 hinzufügen

Bildbox leer lassen

Beginnen Sie mit dem Hinzufügen von Modulen, beginnend mit einem Image-Modul in Spalte 1. Lassen Sie das Image-Feld leer.

Scroll-Geschwindigkeit

Hintergrundbild

Stattdessen verwenden wir ein Hintergrundbild für dieses Modul.

Scroll-Geschwindigkeit

Größe

Wir werden die Größeneinstellungen im Design-Tab ändern.

  • Breite:
    • Desktop: 100 %
    • Tablet & Telefon: 90%
  • Modulausrichtung: Mitte

Scroll-Geschwindigkeit

Abstand

Dann wenden wir die folgenden Werte auf die Abstandseinstellungen an:

  • Oberer Rand:
    • Desktop: 100px
    • Tablet & Telefon: 0px
  • Unterer Rand:
    • Desktop: 100px
    • Tablet & Telefon: 0px
  • Obere Polsterung:
    • Desktop: 250px
    • Tablet: 200px
    • Telefon: 150px
  • Untere Polsterung:
    • Desktop: 250px
    • Tablet: 200px
    • Telefon: 150px

Scroll-Geschwindigkeit

Textmodul Nr. 1 zu Spalte 2 hinzufügen

H3-Inhalt hinzufügen

Weiter zu Spalte 2. Dort brauchen wir als erstes Modul ein Textmodul mit H3-Inhalten.

Scroll-Geschwindigkeit

H3-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H3-Texteinstellungen entsprechend:

  • Überschrift 3 Schriftart: Karla
  • Überschrift 3 Textfarbe: #e0ca9a
  • Überschrift 3 Textgröße:
    • Desktop: 44px
    • Tablet: 30px
    • Telefon: 26px

Scroll-Geschwindigkeit

Textmodul #2 zu Spalte 2 hinzufügen

Beschreibungsinhalt hinzufügen

Fügen Sie ein weiteres Textmodul direkt unter dem vorherigen hinzu und fügen Sie einen Beschreibungsinhalt Ihrer Wahl ein.

Scroll-Geschwindigkeit

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls entsprechend:

  • Textschriftart: Alata
  • Textfarbe: rgba(255,255,255,0.67)
  • Textgröße:
    • Desktop: 17px
    • Tablet: 15px
    • Telefon: 14px
  • Textzeilenhöhe: 2.2em

Scroll-Geschwindigkeit

Abstand

Und fügen Sie den Abstandseinstellungen etwas oberen Rand hinzu.

  • Höchste Marge: 5%

Scroll-Geschwindigkeit

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir dieser Spalte hinzufügen, ist ein Button-Modul. Verwenden Sie eine Kopie Ihrer Wahl.

Scroll-Geschwindigkeit

Tasteneinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Schaltflächeneinstellungen wie folgt:

  • Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
  • Schaltflächentextgröße:
    • Desktop: 20px
    • Tablet & Telefon: 18px
  • Schaltflächentextfarbe: #ffffff
  • Breite des Tastenrahmens: 0px

Scroll-Geschwindigkeit

  • Button-Schriftart: Karla
  • Schaltflächensymbol anzeigen: Ja
  • Platzierung der Schaltflächensymbole: Links
  • Nur Symbol beim Hover für Schaltfläche anzeigen: Nein

Scroll-Geschwindigkeit

Abstand

Fügen Sie als nächstes benutzerdefinierte Werte zu den Abstandseinstellungen hinzu.

  • Höchste Marge: 5%
  • Obere Polsterung: 20px
  • Untere Polsterung: 20px

Scroll-Geschwindigkeit

Zeile zweimal klonen

Nachdem Sie die Zeile und alle Module fertiggestellt haben, können Sie die Zeile beliebig oft klonen.

Scroll-Geschwindigkeit

Bilder & Inhalte ändern

Stellen Sie sicher, dass Sie den doppelten Inhalt in jeder der doppelten Zeilen ändern.

Scroll-Geschwindigkeit

2. Scroll-Velocity-Effekt hinzufügen

CSS-Klasse zu Elementen hinzufügen, die Sie verzerren möchten

Spalte 2

Nachdem wir nun die Elementstruktur eingerichtet haben, können wir uns darauf konzentrieren, den Effekt zum Laufen zu bringen. Öffnen Sie dazu die Spalte 2 Einstellungen jeder Zeile einzeln und weisen Sie eine CSS-Klasse zu.

  • CSS-Klasse: Velocity-Transform

Scroll-Geschwindigkeit

Scroll-Geschwindigkeit

Bildmodul in Spalte 1

Wir fügen jedem Bildmodul in unserem Design dieselbe CSS-Klasse hinzu.

  • CSS-Klasse: Velocity-Transform

Scroll-Geschwindigkeit

Neue Zeile hinzufügen

Spaltenstruktur

Als Nächstes fügen wir am unteren Rand des Abschnitts eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Scroll-Geschwindigkeit

Abstand

Öffnen Sie die Zeileneinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Abstände in den Abstandseinstellungen.

  • Obere Polsterung: 0px
  • Untere Polsterung: 0px

Scroll-Geschwindigkeit

Codemodul zur Spalte hinzufügen

Fügen Sie dann dieser neuen Zeile ein Codemodul hinzu.

Scroll-Geschwindigkeit

GSAP- und ScrollTrigger-Bibliotheken hinzufügen

Bevor wir Code hinzufügen, fügen wir die GSAP- und ScrollTrigger-Bibliotheken zwischen Skript-Tags ein.

  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Scroll-Geschwindigkeit

Skript-Tags hinzufügen

Wir werden neue Skript-Tags direkt unter diesen Bibliotheken hinzufügen.

Scroll-Geschwindigkeit

Benutzerdefinierten Code zwischen Skript-Tags hinzufügen (vertikaler Skew)

Und fügen Sie die folgenden Zeilen JavaScript-Code ein, um einen vertikalen Versatz zu erstellen: 

let proxy = { skew: 0 },
    skewSetter = gsap.quickSetter(".velocity-transform", "skewY", "deg"), 
    clamp = gsap.utils.clamp(-10, 10);

ScrollTrigger.create({
  onUpdate: (self) => {
    let skew = clamp(self.getVelocity() / -400);
    if (Math.abs(skew) > Math.abs(proxy.skew)) {
      proxy.skew = skew;
      gsap.to(proxy, {skew: 0, duration: 0.8, ease: "power0", overwrite: true, onUpdate: () => skewSetter(proxy.skew)});
    }
  }
});

gsap.set(".velocity-transform", {force3D: true});

Scroll-Geschwindigkeit

Verwenden Sie stattdessen horizontale Neigung oder Drehung

Wenn Sie stattdessen horizontale Neigung oder Drehung verwenden möchten, wie in der Vorschau dieses Beitrags zu sehen, können Sie das „SkewY“ im Code einfach durch „SkewX“ für horizontale Neigung oder „rotate“ für Drehen ersetzen! Das ist es.

Scroll-Geschwindigkeit

Scroll-Geschwindigkeit

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Vertikaler Versatz

Desktop

Scroll-Geschwindigkeit

Handy, Mobiltelefon

Scroll-Geschwindigkeit

Horizontale Schräglage

Desktop

Scroll-Geschwindigkeit

Handy, Mobiltelefon

Scroll-Geschwindigkeit

Drehen

Desktop

Scroll-Geschwindigkeit

Handy, Mobiltelefon

Scroll-Geschwindigkeit

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein interaktives Design beim Scrollen erstellen. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Ihr Design in Abhängigkeit von der Scroll-Geschwindigkeit transformieren können. Wir haben das Beste von Divi mit zwei externen JavaScript-Bibliotheken kombiniert, nämlich GSAP und ScrollTrigger für GSAP. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.