Wenn Sie nach einer Möglichkeit suchen, mit den integrierten Bildlaufeffekten von Divi flüssige Animationen zu erstellen, werden Sie dieses Tutorial lieben. Wir zeigen Ihnen, wie Sie den Scroll-Snap mit den integrierten Bewegungseffekten von Divi kombinieren, um Abschnitte mit voller Höhe zu erstellen, durch die Sie auf einmal scrollen können.
Wir beginnen mit der Erstellung des ersten Abschnitts. Wir werden diesen Abschnitt daher im gesamten Design unserer Seite wiederverwenden. Um das Scroll-Snapping zu aktivieren, verwenden wir die CSS-Scroll-Snap-Eigenschaften, die wir den Abschnitten, HTML, Kopf- und Fußzeilen unserer Seite zuweisen.
Mögliches Ergebnis
Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.
1. Erstellen Sie eine neue Seite und beginnen Sie mit dem Entwerfen des ersten Abschnitts
Fügen Sie eine neue Seite hinzu und wechseln Sie zu Visual Builder
Fügen Sie zunächst eine neue Seite hinzu. Geben Sie den Seitentitel ein, veröffentlichen Sie die Seite und wechseln Sie zu Visual Builder.
Abschnittseinstellungen
Sizing
Öffnen Sie auf der neuen Seite den bereits vorhandenen Abschnitt und ändern Sie die Größeneinstellungen.
- Min. Höhe: 100vh
Hauptelement
Wir fügen dem Abschnitt auch zwei Zeilen CSS-Code hinzu. Diese Zeilen CSS-Code helfen uns, den Abschnitt in einen Fangpunkt für den Bildlauf-Fang zu verwandeln.
Scroll-Snap-Align: Start; Scroll-Snap-Stop: Normal;
Sichtbarkeit
Um sicherzustellen, dass sich nichts außerhalb des Abschnittscontainers befindet, werden die Abschnittsüberläufe ausgeblendet.
- Horizontaler Überlauf: versteckt
- Vertikaler Überlauf: versteckt
Zeile 1 hinzufügen
Spaltenstruktur
Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:
Sizing
Öffnen Sie die Zeileneinstellungen und ändern Sie die Größe wie folgt, ohne noch Module hinzuzufügen:
- Benutzerdefinierte Dachrinnenbreite verwenden: Ja
- Dachrinnenbreite: 1
- Breite: 100%
- Maximale Breite: 100%
Abstand
Wir entfernen auch die standardmäßige obere und untere Polsterung des Abschnitts.
- Top Polsterung: 0px
- Bodenpolsterung: 0px
Position
Und wir werden die Zeile entsprechend neu positionieren:
- Position: Absolut
- Ort: Unten Mitte
Fügen Sie der Spalte ein Textmodul hinzu
Inhaltsfeld leer lassen
Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul. Stellen Sie sicher, dass Sie das Inhaltsfeld des Moduls leer lassen.
Hintergrundfarbe
Ändern Sie dann die Hintergrundfarbe.
- Hintergrundfarbe: # ffee00
Texteinstellungen
Wir werden auch die Textzeilenhöhe des Moduls entfernen.
- Textzeilenhöhe: 1em
Größe
Dann gehen wir zu den Größeneinstellungen und ändern die Breite.
- Breite: 30%
Abstand
Wir werden das Modul in ein Quadrat verwandeln, indem wir auch eine obere Polsterung hinzufügen.
- Top Polsterung: 30%
Fügen Sie Zeile 2 hinzu
Spaltenstruktur
In der nächsten Zeile. Verwenden Sie die folgende Spaltenstruktur:
Sizing
Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen auf der Registerkarte Design, ohne noch Module hinzuzufügen.
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Breite: 60vw
- Maximale Breite: 100%
Abstand
Fügen Sie dann einen benutzerdefinierten oberen Rand für verschiedene Bildschirmgrößen hinzu.
- Oberer Rand: 20vh (Desktop), 5vw (Tablet und Telefon)
Spalte 2 Abstand
Dann öffnen wir die Einstellungen in Spalte 2 und fügen benutzerdefinierte Füllwerte hinzu.
- Obere Polsterung: 2vh (Tablet und Telefon)
- Linke Polsterung: 2vw
- Rechte Polsterung: 2vw
Fügen Sie Spalte 1 ein Bildmodul hinzu
Bild hochladen
Es ist Zeit, Mods hinzuzufügen, einen Image-Mod zu Spalte 1 hinzuzufügen und ein Bild Ihrer Wahl hochzuladen.
Sizing
Wir werden dann die volle Breite auf das Modul erzwingen.
- Volle Breite erzwingen: Ja
Fügen Sie den Textbaustein # 1 in die Spalte 2 ein
Fügen Sie H2-Inhalte hinzu
In der zweiten Spalte benötigen wir als erstes Modul ein Textmodul mit Inhalt H2.
H2-Texteinstellungen
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H2-Texteinstellungen wie folgt:
- Überschrift 2 Schriftart: Anton
- Punkt 2 Textgröße: 5vw (Desktop), 7vw (Tablet), 9vw (Telefon)
Fügen Sie den Textbaustein # 2 in die Spalte 2 ein
Inhalt hinzufügen
Fügen Sie direkt unter dem vorherigen einen weiteren Textbaustein hinzu und fügen Sie den ein Inhalt der Beschreibung Ihrer Wahl.
Texteinstellungen
Ändern Sie die Texteinstellungen des Moduls wie folgt:
- Textschrift: Öffnen Sie Sans
- Textgröße: 0.8vw (Desktop), 2vw (Tablet), 2.5vw (Telefon)
- Textzeilenhöhe: 1,8 em
Abstand
Fügen Sie den Abstandseinstellungen einen benutzerdefinierten oberen und unteren Rand hinzu.
- Oberer Rand: 2vw
- Unterer Rand: 2vw
Fügen Sie der 2-Spalte ein Schaltflächenmodul hinzu
Kopie hinzufügen
Das nächste und letzte Modul, das wir in dieser Spalte benötigen, ist ein Schaltflächenmodul. Fügen Sie eine Kopie Ihrer Wahl hinzu.
Tasteneinstellungen
Gestalten Sie die Schaltfläche entsprechend:
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
- Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Textfarbe der Schaltfläche: # 333333
- Farbe des Schaltflächenrahmens: # 333333
- Tastenradius: 1px
- Button Font: Anton
- Schaltflächenstil: Großbuchstaben
Abstand
Vervollständigen Sie die Moduleinstellungen, indem Sie einen benutzerdefinierten Wert basierend auf den Bildschirmgrößen hinzufügen.
- Hohe interne Marge: 1 VW (Desktop), 2 VW (Tablet), 3 VW (Telefon)
- Niedriger interner Spielraum: 1 VW (Desktop), 2 VW (Tablet), 3 VW (Telefon)
- Linker interner Rand: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
- Rechter Internet-Rand: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
2. Fügen Sie verschiedenen Elementen Bildlaufeffekte hinzu
Textmodul in Zeile 1
Vertikale Animation
Sobald alle Elemente vorhanden sind, ist es Zeit, die Bildlaufeffekte hinzuzufügen. Öffnen Sie das Textmodul in Ihrer ersten Zeile und verwenden Sie eine vertikale Bewegung.
- Vertikale Bewegung aktivieren: Ja
- Startversatz: 4
- Mittlerer Versatz: 0
- Endversatz: -4
- Bewegungseffekt-Trigger: Mitte des Elements
Zeile 2
Spalte 1
Horizontale Animation
Öffnen Sie dann die erste Spalte Ihrer zweiten Zeile und fügen Sie eine horizontale Bewegung hinzu.
- Horizontale Bewegung aktivieren: Ja
- Startoffset: -3
- Durchschnittlicher Offset: 0 (von 40% bis 60%)
- Endversatz: -3
- Bewegungseffekt auslösen: Mitte des Elements
Ein- und Ausblenden
Wir wenden auch einen Ein- und Ausblendeffekt auf dieselbe Spalte an.
- Ein- und Ausblenden aktivieren: Ja
- Anfangsopazität: 0%
- Durchschnittliche Deckkraft: 100%
- Endopazität: 100%
- Bewegungseffekt auslösen: Mitte des Elements
Spalte 2
Horizontale Bewegung
Dann öffnen wir die Parameter der zweiten Spalte und wenden die folgenden horizontalen Bewegungsparameter an:
- Horizontale Bewegung aktivieren: Ja
- Startoffset: 3
- Durchschnittlicher Offset: 0 (von 40% bis 60%)
- Endversatz: 3
- Bewegungseffekt auslösen: Mitte des Elements
Ein- und Ausblenden
Mit einem eingehenden und ausgehenden Fade-Effekt.
- Ein- und Ausblenden aktivieren: Ja
- Anfangsopazität: 0%
- Durchschnittliche Deckkraft: 100%
- Endopazität: 100%
- Bewegungseffekt auslösen: Mitte des Elements
4. Verwenden Sie den ersten Abschnitt erneut
Abschnitt viermal klonen
Sobald Sie den ersten Abschnitt und seine Bildlaufeffekte abgeschlossen haben, können Sie ihn beliebig oft klonen.
Ändern Sie die Hintergrundfarben aller anderen Abschnitte
Wir werden die Hintergrundfarbe aller anderen Abschnitte ändern.
- Hintergrundfarbe: # 111111
5. Fügen Sie CSS-Code hinzu, um die Bildlauferfassung in Seiten-HTML zu aktivieren
Fügen Sie dem letzten Abschnitt der Seite ein Codemodul hinzu
Um nun die Bildlauferfassung im HTML-Code unserer Seite zu aktivieren, fügen wir an einer beliebigen Stelle im letzten Abschnitt unserer Seite ein Codemodul hinzu.
Fügen Sie HTML-CSS-Code ein
Diese Zeilen CSS-Code helfen uns, die Bildlaufausrichtung auf den HTML-Code unserer Seite anzuwenden:
<style>
html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);}
</style>
Hinzufügen von Scroll Snapping Start zu Kopf- und Fußzeile
Wir werden sicherstellen, dass unsere Kopf- und Fußzeile auch Bildlauferfassungspunkte sind (genau wie unsere Abschnitte), indem wir auch die folgenden Zeilen CSS-Code hinzufügen:
Kopf- und Fußzeile {scroll-snap-align: start;}
zu beenden
In diesem Artikel haben wir Ihnen gezeigt, wie Sie flüssige Animationen erstellen, indem Sie den Bildlauf-Snap mit den in Divi integrierten Bewegungseffekten kombinieren. Dies ist eine großartige Möglichkeit, um Scroll-Effekte mit nur einem Scroll zu aktivieren.
Scroll-Capture hilft Besucher um mühelos die verschiedenen Teile Ihres zu durchsuchen Website. Wir haben es mit einem Abschnittsdesign in voller Höhe kombiniert. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.