So scrollen Sie automatisch horizontal beim vertikalen Scrollen mit Divi & GSAP

Veröffentlicht: 2021-03-17

Je mehr Sie Websites im Web erkunden, desto mehr werden Sie auf einige wirklich maßgeschneiderte On-Page-Erlebnisse stoßen. Sie haben sich vielleicht gefragt, wie Sie bestimmte erweiterte Funktionen erreichen können, und die Antwort lautet oft: durch die Verwendung einer JavaScript-Bibliothek für Animationen. Eine beliebte Animationsbibliothek ist heutzutage GSAP. Aber nur weil Sie eine JavaScript-Bibliothek für etwas verwenden möchten, heißt das nicht, dass Sie auch den HTML- und CSS-Teil manuell durchgehen müssen. Divi kann den größten Teil Ihres Webdesign-Prozesses übernehmen; Bauen und Entwerfen, sodass Sie mehr Zeit haben, sich auf benutzerdefinierte Funktionen und Animationen zu konzentrieren. Im heutigen Tutorial zeigen wir Ihnen beispielsweise, wie Sie mit Divi und GSAP horizontal scrollen, wenn Sie tatsächlich vertikal scrollen. Dies führt zu einem erweiterten Animationseffekt, den Sie nach Belieben anpassen können. 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.

Desktop

horizontales Scrollen

Handy, Mobiltelefon

horizontales Scrollen

Laden Sie das Layout KOSTENLOS herunter

Um das kostenlose Layout 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!

Überblick über den Ansatz

Was wir verwenden

  • Division
  • GSAP-JavaScript-Bibliothek
  • ScrollTrigger-Plugin für GSAP
  • ScrollTrigger-Demo

Was wir erschaffen

  • Gefälschtes horizontales Scrollen beim vertikalen Scrollen
  • Pin-Effekt
  • Funktionieren des Effekts in einer Reihe von Abschnitten unserer Wahl (nicht unbedingt auf der gesamten Seite)
  • Ein müheloses horizontales Bildschirmerlebnis über alle Bildschirmgrößen hinweg

1. Platzhalterabschnitte hinzufügen

Abschnitt 1 hinzufügen

Beginnen Sie damit, der Seite, an der Sie arbeiten, einen ersten Abschnitt hinzuzufügen. Dieser Abschnitt dient als Platzhalter, damit wir den Effekt beobachten können.

horizontales Scrollen

Größe

Öffnen Sie die Schnitteinstellungen und weisen Sie den Größeneinstellungen eine Höhe zu.

  • Höhe: 60vh

horizontales Scrollen

Abschnitt 1 klonen

Klonen Sie dann den Platzhalterabschnitt einmal. Dies hilft uns dabei, oben und unten auf unserer Seite etwas Platz zu schaffen, ohne dass es Teil des horizontalen Scrollens ist (siehe Vorschau).

horizontales Scrollen

1. Abschnittsdesign erstellen

Neuen Abschnitt zwischen Abschnitten hinzufügen

Nachdem wir nun die beiden Platzhalterabschnitte eingerichtet haben, ist es an der Zeit, den ersten Abschnitt zu erstellen, den wir in unserem horizontalen Scrollen verwenden. Fügen Sie diesen Abschnitt direkt zwischen den beiden Platzhalterabschnitten hinzu.

horizontales Scrollen

Größe

Öffnen Sie die Abschnittseinstellungen und weisen Sie in den Größeneinstellungen eine maximale Höhe zu.

  • Maximale Höhe: 100vh

horizontales Scrollen

Überläufe

Wir setzen auch den vertikalen Überlauf auf auto. Dies hilft uns in Kombination mit der maximalen Höhe im vorherigen Schritt, automatisch eine Bildlaufleiste auf bestimmten Bildschirmgrößen zu generieren, bei denen die Abschnittselemente die Ansichtsfensterhöhe überschreiten.

  • Vertikaler Überlauf: Auto

horizontales Scrollen

Neue Zeile hinzufügen

Spaltenstruktur

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

horizontales Scrollen

Hintergrundbild

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und verwenden Sie ein Hintergrundbild.

  • Hintergrundbildgröße: Cover
  • Position des Hintergrundbilds: Mitte

horizontales Scrollen

Größe

Ändern Sie als nächstes die Größeneinstellungen der Zeile.

  • Benutzerdefinierte Dachrinnenbreite verwenden: Ja
  • Dachrinnenbreite: 1
  • Breite:
    • Desktop: 70%
    • Tablet & Telefon: 80%

horizontales Scrollen

Abstand

Zusammen mit den Abstandseinstellungen.

  • Obere Polsterung:
    • Desktop: 30vh
    • Tablet & Telefon: 20vh
  • Untere Polsterung: 0px

horizontales Scrollen

Spalteneinstellungen

Öffnen Sie dann die Spalteneinstellungen.

horizontales Scrollen

Hintergrundfarbe

Verwenden Sie eine weiße Hintergrundfarbe für die Spalte.

  • Hintergrundfarbe: #ffffff

horizontales Scrollen

Abstand

Wechseln Sie zur Registerkarte Entwurf der Spalte und wenden Sie einige benutzerdefinierte Abstandswerte an.

  • Obere Polsterung: 5%
  • Untere Polsterung: 5%
  • Linke Polsterung: 5%
  • Rechte Polsterung: 5%

horizontales Scrollen

Grenze

Verwenden Sie auch einen Rand.

  • Randbreite: 1px
  • Randfarbe: #000000

horizontales Scrollen

Textmodul Nr. 1 zur Spalte hinzufügen

H4-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul mit H4-Inhalten.

horizontales Scrollen

H4-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H4-Texteinstellungen wie folgt:

  • Überschrift 4 Schriftart: Source Code Pro
  • Überschrift 4 Textfarbe: #000000
  • Überschrift 4 Textgröße:
    • Desktop: 1.2vw
    • Tablet: 2.5vw
    • Telefon: 3.5vw
  • Überschrift 4 Buchstabenabstand: 1px

horizontales Scrollen

Textmodul #2 zur Spalte hinzufügen

H3-Inhalt hinzufügen

Fügen Sie ein weiteres Textmodul direkt unter dem vorherigen hinzu und verwenden Sie einige H3-Inhalte im Inhaltsfeld.

horizontales Scrollen

H3-Texteinstellungen

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

  • Überschrift 3 Schriftart: Alata
  • Überschrift 3 Textgröße:
    • Desktop: 2.5vw
    • Tablet: 4vw
    • Telefon: 7vw

horizontales Scrollen

Textmodul Nr. 3 zur Spalte hinzufügen

Inhalt hinzufügen

Fügen Sie der Spalte ein letztes Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl hinzu.

horizontales Scrollen

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls entsprechend:

  • Textfont: Source Code Pro
  • Textgröße:
    • Desktop: 0.8vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Textzeilenhöhe: 1.5em

horizontales Scrollen

Größe

Ändern Sie als nächstes die Größeneinstellungen.

  • Breite:
    • Desktop: 67 %
    • Tablet & Telefon: 100%

horizontales Scrollen

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie einige responsive Padding-Werte auf die Abstandseinstellungen anwenden.

  • Obere Polsterung:
    • Desktop: 3vh
    • Tablet & Telefon: 5vh
  • Untere Polsterung:
    • Desktop: 3vh
    • Tablet & Telefon: 5vh

horizontales Scrollen

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir brauchen, um das Zeilendesign zu vervollständigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

horizontales Scrollen

Tasteneinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Schaltflächeneinstellungen entsprechend:

  • Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
  • Schaltflächentextgröße:
    • Desktop: 0.8vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Schaltflächentextfarbe: #ffffff
  • Schaltflächenhintergrundfarbe: #000000
  • Breite des Tastenrahmens: 0px
  • Schaltflächenrandradius: 0px
  • Schaltflächenschriftart: Source Code Pro
  • Schaltflächenschriftart: Großbuchstaben

horizontales Scrollen

horizontales Scrollen

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

  • Obere Polsterung: 15px
  • Untere Polsterung: 15px
  • Linke Polsterung: 50px
  • Rechte Polsterung: 50px

horizontales Scrollen

Position

Und positionieren Sie das Modul im erweiterten Tab neu.

  • Position: Absolut
  • Ort: Linke untere Ecke
  • Vertikaler Versatz: -5%
  • Horizontaler Versatz: 5%

horizontales Scrollen

2. Abschnitt wiederverwenden

Abschnitt zweimal klonen

Sobald Sie den ersten Abschnitt abgeschlossen haben, können Sie ihn zweimal klonen.

horizontales Scrollen

Bild ändern & kopieren & verlinken

Stellen Sie sicher, dass Sie das Bild, die Kopie und den Link in jedem doppelten Abschnitt ändern.

horizontales Scrollen

2. Funktionalität hinzufügen

Fügen Sie jedem Abschnitt, den Sie in das horizontale Scrollen einschließen möchten, eine CSS-Klasse hinzu

Nachdem wir nun alle Elemente an Ort und Stelle haben, können wir uns auf die Funktionalität des Ganzen konzentrieren. Der erste Schritt zum Erreichen des Ergebnisses besteht darin, jedem Abschnitt, der Teil des horizontalen Scrollens sein soll, eine benutzerdefinierte CSS-Klasse zuzuweisen. In diesem Fall sind das die drei Abschnitte zwischen den Platzhalterabschnitten.

  • CSS-Klasse: horizontal-section

horizontales Scrollen

Neues Codemodul irgendwo auf der Seite hinzufügen

Fügen Sie als Nächstes der Seite ein Codemodul hinzu. Dies kann überall sein, wo Sie möchten.

horizontales Scrollen

Zuerst GSAP- und ScrollTrigger-Bibliotheken hinzufügen

Kopieren Sie die GSAP- und ScrollTrigger-Bibliotheken in das Codemodul. Verwenden Sie dazu Script-Tags mit folgenden Quellen: 

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

horizontales Scrollen

Neue Skript-Tags für benutzerdefinierten Code hinzufügen

Direkt unter den Skript-Tags der Bibliothek fügen wir einige neue Skript-Tags hinzu.

horizontales Scrollen

JS-Code hinzufügen

Bereiten Sie sich auf die Verwendung von JQuery vor

Innerhalb dieser Skript-Tags beginnen wir mit dem Laden von JQuery. 

jQuery(document).ready(function($){  
});

horizontales Scrollen

ScrollTrigger-Plugin registrieren

Dann registrieren wir das ScrollTrigger-Plugin. 

gsap.registerPlugin(ScrollTrigger);

horizontales Scrollen

Wickeln Sie alle relevanten Abschnitte in eine neue Div . ein

Wir platzieren auch jeden der relevanten Abschnitte mit den folgenden Codezeilen in einem neuen div: 

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');

horizontales Scrollen

Erstellen Sie ein neues GSAP-Tween mit ScrollTrigger

Damit das gefälschte horizontale Scrollen funktioniert, verwenden wir ein neues Tween mit einem Scroll-Trigger. Der Code, der dies ermöglicht, ist der folgende: 

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

horizontales Scrollen

Style-Tags für benutzerdefinierten CSS-Code hinzufügen

Als Nächstes fügen wir unserem Code-Modul einige Style-Tags hinzu.

horizontales Scrollen

CSS-Code zwischen Style-Tags einfügen

Und wir vervollständigen das Tutorial und die Funktionalität, indem wir die folgenden CSS-Codezeilen zwischen den Style-Tags hinzufügen: 

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

horizontales Scrollen

Vorschau

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

Desktop

horizontales Scrollen

Handy, Mobiltelefon

horizontales Scrollen

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divi und GSAP die Extrameile für Ihre Website gehen. Genauer gesagt haben wir Ihnen gezeigt, wie Sie horizontal scrollen, wenn Sie tatsächlich vertikal auf Ihrer Seite scrollen. Dies ist eine benutzerdefinierte Art von Animation, auf die Sie vielleicht irgendwann gestoßen sind und sich gefragt haben, wie Sie dies mit DIvi tun könnten. 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.