So kombinieren Sie Animationen und Parallaxe in Divi für einzigartige Designs
Veröffentlicht: 2019-08-07Ob wir ein Essen zubereiten oder eine Website gestalten, die Zutaten allein garantieren kein schmackhaftes Gericht oder eine schöne Seite. Es ist die gute Kombination dieser Elemente, die den Unterschied ausmacht. In diesem Tutorial zeige ich Ihnen, wie Sie Animation und Bildparallaxe auf eine Weise kombinieren können, die Sie vielleicht noch nie zuvor in Betracht gezogen haben. Falls Sie es noch nicht wissen: Animation ist eine integrierte Divi-Funktion, die beim Laden der Seite zu jedem Divi-Element hinzugefügt werden kann. Parallax ist auch eine Divi-Option, mit der Sie Ihren Hintergrundbildern beim Scrollen eine einzigartige Bewegung hinzufügen können.
Heute werden wir die integrierten Designeinstellungen von Divi verwenden, um Animationen und Parallaxe auf alle möglichen kreativen Arten zu kombinieren. Die Kombination arbeitet auf magische Weise zusammen, um ein wunderschönes Layout animierter Parallaxenbilder zu erstellen, die beim Scrollen auf der Seite fantastisch aussehen.
Lass uns anfangen!
Vorgeschmack
Laden Sie das Layout KOSTENLOS herunter
Um die Designs aus diesem Tutorial 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.
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!
Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.
Kommen wir zum Tutorial, sollen wir?
Was Sie brauchen, um loszulegen
Um zu beginnen, benötigen Sie Folgendes:
- Das Divi Theme installiert und aktiv
- Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
- Bilder, die für simulierte Inhalte verwendet werden sollen. Die für dieses Tutorial verwendeten Bilder finden Sie im Life Coach Divi Layout Pack.
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Die Grundidee
Die Grundidee dieses Gestaltungskonzeptes ist die Verwendung von CSS Parallaxe auf Hintergrundbildern. Aufgrund der Funktionsweise von CSS Parallax bleibt das Parallax-Bild fest und füllt automatisch das Browserfenster aus, unabhängig von der Größe des Elements, das es verwendet. Die feste Beschaffenheit des Bildes ermöglicht es Ihnen, dasselbe Parallaxenbild für mehrere Elemente in Divi zu verwenden und diese Elemente dann mithilfe von Animationen zu verschieben. Wenn sich die Animation beruhigt, werden die verwendeten Parallax-Hintergrundbilder übereinstimmen und wie erwartet funktionieren, wenn Sie auf der Seite nach unten scrollen.
Teil 1: Erstellen der Divi-Animation und des Parallax-Designs (Version 1)
Erstellen Sie einen neuen Abschnitt mit einer zweispaltigen (1/2 1/2) Zeile.
Bevor wir unsere Module hinzufügen, nehmen wir einige Anpassungen an Abschnitt und Zeile vor.
Abschnitts- und Zeileneinstellungen aktualisieren
Öffnen Sie zunächst die Abschnittseinstellungen und entfernen Sie die Standardpolsterung wie folgt:
Padding: 0px oben, 0px unten
Öffnen Sie dann die Zeileneinstellungen und geben Sie der Zeile ein Parallax-Hintergrundbild.
Hintergrundbild: [Bild hochladen]
Verwenden Sie den Parallax-Effekt: JA
Parallaxenmethode: CSS
Hier muss die Parallax-Methode auf CSS gesetzt werden, damit das Design funktioniert.
Breite: 100%
Maximale Breite: 100%
Polsterung: 10vw oben, 10vw links, 10vw rechts
Fügen Sie das Textmodul mit passendem Parallax-Hintergrund hinzu
Jetzt können wir mit dem Hinzufügen unserer Textmodule zum Design beginnen. Der erste Textbaustein ist der Schlüssel zu diesem Design. Durch das Anwenden des exakt gleichen Hintergrundbilds und der gleichen CSS-Parallaxe auf das Textmodul können wir mit der Animation kreativ werden, um einen völlig einzigartigen Effekt zu erzielen.
Fahren Sie fort und fügen Sie der Spalte 1 ein neues Textmodul hinzu.
Aktualisieren Sie dann die Textmoduleinstellungen wie folgt:
Inhalt des Körpers:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Geben Sie dann dem Textmodul das gleiche CSS-Parallax-Hintergrundbild, das Sie der Zeile hinzugefügt haben.
Hintergrundbild: [Bild hochladen]
Verwenden Sie den Parallax-Effekt: JA
Parallaxenmethode: CSS
Textschriftart: Fira Sans
Schriftstärke des Textes: Leicht
Text Textfarbe: #ffffff
Text Textgröße: 70px
Textzeilenhöhe: 1em
Link-Schriftart: Unterstreichen (U)
Linktextfarbe: #ffffff (Standard), #881e67 (Hover)
Linktextgröße: 30px
Link-Buchstaben-Abstand: 2px
Polsterung: 20 % oben, 20 % unten, 10 % links, 10 % rechts
Rahmenbreite: 20px
Rahmenfarbe: #ffffff
Fügen Sie dann dem Textmodul die folgende Animation hinzu:
Animationsstil: Folie
Animationsrichtung: Rechts
Animationsdauer: 1500 ms
Animationsintensität: 80%
Anfangsdeckkraft der Animation: 20 %
Schauen wir uns den bisherigen Effekt an…
Beachten Sie, wie das Hintergrundbild des animierten Textbausteins an der passenden Stelle des Zeilenhintergrunds zu liegen kommt. Dies liegt daran, dass beide das gleiche Hintergrundbild mit dem CSS-Parallax-Effekt teilen.
Hinzufügen des zweiten Textmoduls mit einem echten Parallax-Hintergrundbild
An dieser Stelle sind wir bereit, unser nächstes Textmodul hinzuzufügen. Dieses nächste wird ein anderes Hintergrundbild haben, das den echten Parallax-Effekt verwendet. Wir werden auch einige Animationen geben.
Fügen Sie in Spalte 2 einen neuen Textbaustein hinzu.
Aktualisieren Sie dann den Body-Content mit dem Wort „mein Blog“.
Fügen Sie dann ein Hintergrundbild mit der True Parallax-Methode hinzu.
Hintergrundbild: [Bild hochladen]
Verwenden Sie den Parallax-Effekt: JA
Parallaxenmethode: Echte Parallaxe
Textschriftart: Fira Mono
Textschriftart: TT
Text Textausrichtung: Mitte
Text Textfarbe: #ffffff
Text Buchstabenabstand: 10px
Breite: 320px
Maximale Breite: 320px
Modulausrichtung: Mitte
Rand: (Desktop): -5vw oben, 4vw unten
Marge (Tablet und Telefon): 3vw top
Polsterung: 70px oben, 70px unten
Rahmenbreite: 20px
Rahmenfarbe: #ffffff
Animationsstil: Folie
Animationsrichtung: nach unten
Animationsverzögerung: 200ms
Erstellen des dritten Textmoduls mit einem neuen Parallax-Hintergrundbild
Um den dritten Textbaustein zu erstellen, duplizieren Sie den soeben erstellten Textbaustein in Spalte 2.
Dann werden wir das Hintergrundbild gleich lassen, aber den Parallax-Effekt mit der CSS-Parallax-Methode aktualisieren.
Breite: 240px
Maximale Breite: 240px
Modulausrichtung: links
Rand: 0px unten
Padding: 170px oben, 170px unten, 95px links, 95px rechts
Die benutzerdefinierte Breite und der rechte und linke Abstand werden verwendet, um die vertikale Textanzeige zu erstellen, die gut zum längeren Moduldesign passt.
Aktualisieren Sie dann die Animationsrichtung nach oben statt nach unten.
Animationsrichtung: AUF
Endergebnis
Schauen wir uns nun das Endergebnis an.
Teil 2: Erstellen des Animations- und Parallax-Designs (Version 2)
Dieses nächste Design wird eine einzigartige Animation hinzufügen, indem das Parallax-Hintergrundbild für die Zeile nach der anfänglichen Animation der Module geladen wird. Dazu müssen wir ausschließlich eine separate Zeile für das CSS-Parallax-Hintergrundbild verwenden, das sich hinter den Inhalt bewegt. Und da unser Abschnittshintergrund anfangs angezeigt wird, können wir vor der Zeilenanimation eine benutzerdefinierte Hintergrundfarbe für unseren Inhalt hinzufügen.
So geht's.
Stellen Sie zunächst den Drahtmodell-Ansichtsmodus bereit. Dann duplizieren Sie die Zeile mit Ihren Textbausteinen. Jetzt haben Sie zwei identische Zeilen. Löschen Sie als Nächstes die Textbausteine in der oberen Zeile. Wir wollten eigentlich nur einen Vorsprung beim Design unserer obersten Reihe haben.
Aktualisieren Sie als Nächstes die Einstellungen für die oberste Zeile wie folgt:
Höhe: 900px (Desktop), 2000px (Tablet und Telefon)
Padding: 0px oben, 0px unten
Animationsstil: Folie
Animationsrichtung: Rechts
Animationsdauer: 1250 ms
Animationsverzögerung: 1800 ms
Wir geben der Zeile eine festgelegte Höhe, da die leere Zeile standardmäßig keine Höhe hat. Sie müssen also sicherstellen, dass die Höhe der Zeile ausreicht, um den Inhalt Ihrer zweiten Zeile mit dem Inhalt abzudecken. Außerdem haben wir der Zeile eine Animation mit einer Verzögerung verpasst, damit sie nach dem Erscheinen der Textbausteine hinter den Inhalt gleitet.
Überlappung der beiden Reihen
Jetzt müssen wir nur noch die untere Reihe mit negativem Rand nach oben bringen, damit sie die obere Reihe mit unserer Hintergrundanimation überlappt.
Öffnen Sie die Einstellungen für die untere Zeile und aktualisieren Sie den Rand wie folgt:
Rand: -900px oben (Desktop), -2000px (Tablet und Telefon)
Nehmen Sie dann das Hintergrundbild mit der CSS-Parallaxe-Methode für die Zeile heraus, da wir stattdessen das Hintergrundbild der obersten Zeile verwenden.
Hier das bisherige Design. Beachten Sie die verzögerte Hintergrundanimation in der ersten Zeile und wie der Parallaxenhintergrund für das Textmodul in Spalte 1 perfekt dazu passt.
Hinzufügen einer Abschnittshintergrundfarbe
Um den Textbausteinen vor der Zeilenanimation eine initiale Hintergrundfarbe zu geben, können Sie dem Abschnitt eine Hintergrundfarbe zuweisen.
Öffnen Sie die Abschnittseinstellungen und fügen Sie Folgendes hinzu:
Hintergrundfarbe links: rgba(136,30,103,0.61)
Hintergrundfarbe rechts: #881e67
Verlaufstyp: Radial
Endergebnis
Schauen wir uns nun das Endergebnis an.
Optionale Kombination aus Mischmodus und Animation
Sie können auch noch kreativer werden, indem Sie der zweiten Reihe einen Mischmodus hinzufügen und eine Zoom-Animation hinzufügen, die mit den Modulanimationen zusammenarbeitet.
Mischmodus: Helligkeit
Animationsstil: Zoom
Hier ist das Endergebnis.
Und so sieht es auf dem Handy aus.
Abschließende Gedanken
Ich hoffe, Sie haben dabei ein paar Dinge gelernt, als wir einige einzigartige Möglichkeiten erforscht haben, Animationen und Parallaxenbilder zu kombinieren. Die Ergebnisse sind definitiv einzigartig und ich bin sicher, Sie können dieses Setup leicht optimieren, um unzählige andere Kombinationen zu erstellen, die bei Ihrem nächsten Projekt umwerfend aussehen.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!