Möchten Sie einen Hintergrund gestalten Divi animiert beim Scrollen der Seite dank Masken und Mustern? Dieses Tutorial ist für dich...
Hinzufügen einer Scroll-Animation zu Divi und seine Hintergrundmasken und -muster ist ein nützlicher Designtipp, der Ihren Hintergrunddesigns neues Leben einhauchen kann. Website.
In diesem Tutorial zeigen wir Ihnen, wie Sie Masken und Hintergrundmuster mit den Bildlaufoptionen von erstellen und animieren Divi (kein benutzerdefinierter Code erforderlich).
Dazu erstellen wir eine schwebende Hintergrundebene mit einer Linie Divi mit dem wir Masken und Hintergrundmuster animieren, wenn ein Benutzer durch einen Abschnitt von scrollt Inhalt.
Wir glauben, dass Ihnen das Ergebnis gefallen wird.
Lassen Sie uns beginnen!
Übersicht
Hier ist eine kurze Illustration, wie die Hintergrund-Scroll-Animation für dieses Tutorial aussehen wird.
Das Konzept
Das Konzept dieses Designs sollte nicht zu schwer zu verstehen sein. Wir beginnen mit einem Abschnitt mit einem Hintergrund mit Farbverlauf.
Dann erstellen wir eine Linie, die (absolut) so positioniert ist, dass sie den Abschnitt vollständig abdeckt (wie eine Überlagerung). Wir können der Zeile ein Hintergrundmuster hinzufügen.
Als nächstes können wir der Spalte eine Hintergrundmaske hinzufügen.
Dann fügen wir hinzu Scroll-Effekte zu Zeile und Spalte (wie Skalierung und Drehung), wodurch das Muster animiert und separat im Hintergrund des Abschnitts maskiert wird.
Wenn wir den Abschnittsüberlauf ausblenden, sehen wir nur die im Abschnitt enthaltene Animation.
Beginnen wir mit der Erstellung einer Seite mit Divi Builder
Um zu beginnen, müssen Sie Folgendes tun:
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie die Divi Baumeister
klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Lesen Sie auch: Divi: So verwenden Sie den "Gradient Builder", um Ihre Bilder zu verschönern
So erstellen Sie mit Divi animierte Hintergrundmasken und Muster mit Bildlauf
Abschnitt Hintergrunddesign
Zuerst überspringen wir das Erstellen einer Zeile und springen direkt in die Bearbeitung des vorhandenen Standardabschnitts im Theme Builder.
Damit unser Hintergrunddesign den Browser ausfüllt, müssen wir dem Abschnitt eine vertikale Höhe hinzufügen. Eine einfache Möglichkeit, dies zu tun, besteht darin, dem Abschnitt eine Mindesthöhe hinzuzufügen.
Bereichseinstellungen öffnen. Unter der Registerkarte Design, aktualisieren Sie die Mindesthöhe und entfernen Sie die Polsterung wie folgt:
- Rand: 80 vh (oben und unten)
- Polsterung: 0px (oben und unten)
Entwerfen eines Hintergrundverlaufs für den Abschnitt
Wir können dem Abschnitt jetzt einen benutzerdefinierten Hintergrundverlauf hinzufügen.
Um die ersten Gradientenstopps hinzuzufügen, stellen Sie sicher, dass die Abschnittseinstellungen unter der Registerkarte geöffnet sind Inhalt. Wählen Sie dann die Registerkarte aus Hintergrundverlauf und klicken Sie auf , um einen neuen Farbverlauf hinzuzufügen. Dadurch werden zwei Standardverlaufsfarben hinzugefügt. Fügen Sie die folgenden Verlaufsstopps mit Farbe und Position wie folgt hinzu:
- Gradientenstopps:
- 0 %: #4158d0
- 50 %: #c850c0
- 100 %: #ffcc70
Ändern Sie dann die Richtung des linearen Farbverlaufs:
- Steigungsrichtung: 270 Grad
Zeilen zum Abschnitt hinzufügen
Nachdem unser Abschnitt nun vorhanden ist, fügen Sie dem Abschnitt eine einspaltige Zeile hinzu. Diese Zeile wird für unsere Hintergrundmasken- und Musterscroll-Animation verwendet.
Als nächstes duplizieren Sie die gerade erstellte Zeile. Diese zweite (duplizierte) Zeile wird für unsere verwendet Inhalt wie Sie es normalerweise tun würden.
Sie sollten jetzt eine obere Zeile für die Hintergrund-Scroll-Animation und eine Zeile für die haben Inhalt Normal.
Linie anpassen
Jetzt, da wir unseren Hintergrundgradienten für den Abschnitt fertig haben, können wir unsere Aufmerksamkeit auf die Linie richten, die wir für unsere Background-on-Scroll-Animation verwenden werden.
Leitungseinstellungen öffnen. Unter der Registerkarte Fortgeschrittener, aktualisieren Sie Folgendes:
- Position: Absolut
Dadurch kann die Linie den Abschnitt überlappen, ohne echten Platz im Dokument einzunehmen.
Jetzt müssen wir nur noch die Höhe und Breite aktualisieren, sodass sie die volle Breite und Höhe des Abschnitts umfassen. Dadurch wird die benötigte Überlagerung und unsere zweite Hintergrunddesignebene erstellt.
Unter der Registerkarte Design, aktualisieren Sie die Größenoptionen wie folgt:
- Aquasize-Säulenhöhen: JA
- Breite: 100 %
- Maximale Breite: 100 %
- Höhe: 100 %
- Polsterung: 0px (oben und unten)
Jetzt können Sie die Linie möglicherweise nicht sehen, aber sie deckt jetzt perfekt den Hintergrund des gesamten Abschnitts ab.
Erstellen Sie ein Hintergrundmuster für die Linie
In diesem Beispiel fügen wir das Muster hinzu Konfetti als Linienhintergrund.
Leitungseinstellungen öffnen. Unter der Option HintergrundWählen Sie die Registerkarte Hintergrundmuster und aktualisieren Sie Folgendes:
- Hintergrundmuster: Konfetti
- Muster :
- Farbe: #f6bef7
- Größe: Benutzerdefinierte Größe
- Breite: 35 vw
- Ursprung wiederholen: Mitte
HINWEIS : Die Verwendung der VW-Längeneinheit stellt sicher, dass das Muster mit dem Browser skaliert wird, wodurch das Design konsistent und ansprechend bleibt.
Fügen Sie der Linie Scroll-Effekte hinzu
Jetzt, da unser Hintergrundmuster vorhanden ist, können wir der Linie Bildlaufeffekte hinzufügen.
Gehen Sie zur Registerkarte Fortgeschrittener. Unter der Option Bildlaufeffekte, aktualisieren Sie Folgendes:
Wählen Sie die Registerkarte Horizontale Bewegung und aktualisieren Sie Folgendes:
- Horizontale Bewegung aktivieren: JA
- Start-Offset: 0,5 (bei 0 %)
- Mittenversatz: 0 (von 40 % bis 60 %)
- Endversatz: -0,5 (bei 100 %)
Dadurch wird das Linienhintergrundmuster beginnend 50 Pixel nach links und endend 50 Pixel nach rechts verschoben.
Wählen Sie die Registerkarte „Scale Up and Down“ und aktualisieren Sie Folgendes:
- Aufwärts- und Abwärtsskalierung aktivieren: JA
- Ausgangsskala: 150 % (bei 0 %)
- Mittlere Skala: 100 % (von 40 % bis 60 %)
- Endskala: 150 % (bei 100 %)
Dadurch wird das Hintergrundmuster der Zeile beim Scrollen skaliert.
Wählen Sie die Registerkarte « Rotierend » und aktualisieren Sie Folgendes:
- Drehen aktivieren: JA
- Startrotation: 10 Grad (bei 0%)
- Mittlere Drehung: 0 Grad (von 40 % bis 60 %)
- Endrotation: -10 Grad (bei 100 %)
WICHTIGER TIPP: Sie müssen die Drehung auf ein Minimum beschränken, da Sie sonst riskieren, Lücken zu zeigen, wo die Linie nicht über den Abschnitt hinausragt. Eine gute Faustregel ist, den Maßstab zu erhöhen, wenn Sie die Drehung erhöhen möchten. Dadurch kann die Linie über den Abschnitt schwenken, ohne die Kanten freizulegen.
Fügen Sie der Spalte eine Hintergrundmaske mit Bildlaufeffekten hinzu
Sobald unsere Reihe fertig ist, können wir der Spalte derselben Reihe eine Hintergrundmaske mit Bildlaufeffekten hinzufügen. Lassen Sie uns zunächst eine Hintergrundmaske hinzufügen.
Öffnen Sie dazu die Spalteneinstellung. Unter der Registerkarte Hintergrundmaske, aktualisieren Sie Folgendes:
- Maske: Layer Blob
- Farbe: #ffffff
- Maskentransformation: Horizontaler Flip, Umkehrung
Bildlaufeffekte zur Spalte hinzufügen
Jetzt, da unsere Hintergrundmaske vorhanden ist, können wir der Spalte Bildlaufeffekte hinzufügen. Denken Sie daran, dass die Spalte bereits Bildlaufeffekte hat, die von der übergeordneten Zeile geerbt wurden.
Alles, was wir tun werden, ist, die Spalte in die entgegengesetzte Richtung der Reihe zu drehen, um eine stärkere Trennung von Maske und Muster für die Dauer des Scrollens zu erreichen.
Gehen Sie zur Registerkarte Fortgeschrittener. Unter Optionen BildlaufeffekteWählen Sie die Registerkarte Rotatng und aktualisieren Sie Folgendes:
- Drehen aktivieren: JA
- Startrotation: -15 Grad (bei 0%)
- Mittlere Drehung: 0 Grad (von 40 % bis 60 %)
- Endrotation: 15 Grad (bei 100 %)
Abschnittsüberlauf ausblenden
Derzeit bleibt die Linie immer dann sichtbar, wenn sie durch Scrollen über den Abschnitt hinausragt.
Um dies zu bereinigen, müssen wir den Abschnittsüberlauf ausblenden. Öffnen Sie dazu die Bereichseinstellungen. Unter der Registerkarte Fortgeschrittener, aktualisieren Sie die Sichtbarkeitsoptionen wie folgt:
- Horizontaler Überlauf: Ausgeblendet
- Vertikaler Überlauf: Ausgeblendet
Jetzt sieht es besser aus.
Siehe auch: Divi: 12 Kombinationen von Masken und Hintergrundmustern
Hinzufügen von Inhalten zu der zu diesem Zweck erstellten Zeile
An diesem Punkt sind die Hintergrundmaske und die Muster-Scroll-Animation fertig. Alles, was wir tun müssen, ist, den gewünschten Inhalt zu der Zeile hinzuzufügen, die wir zuvor für den Inhalt erstellt haben.
Für dieses Beispiel haben wir einen Dummy-Titel hinzugefügt, damit wir sehen können, wie die Hintergrundanimation mit statischem Text aussehen wird.
Endergebnis
Werfen wir einen Blick auf das Endergebnis unseres Designs.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Es ist erstaunlich, wie einfach es ist, mit den Hintergrundoptionen von Divi so schöne Hintergründe zu erstellen. Außerdem erweckt das Hinzufügen von Animationen mit den Bildlaufeffekten von Divi diesen Designs neues Leben.
Für ein anderes Aussehen können Sie auf jeder Ebene verschiedene Masken und Muster ausprobieren. Wenn Sie mehr Inspiration für die Verwendung der Masken und Muster Hintergrund, sehen Sie sich diese an 12 Hintergrundmasken- und Musterkombinationen
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
