Bildergalerien sind auf den meisten Websites ein beliebtes Ziel. In vielen Fällen ist es möglicherweise am besten, diese Bildergalerien glücklich und statisch zu halten, damit die Bilder ihre Magie entfalten können.
Fügen Sie jedoch einen gleitenden Puzzle-Scrolling-Effekt hinzu eine Bildergalerie (wie wir es in diesem Tutorial tun werden), kann einem zeitlosen Klassiker einen erfrischenden Touch verleihen.
In diesem Tutorial zeigen wir Ihnen, wie Sie ein einfaches Layout erstellen, das eine Bildergalerie mit einem gleitenden Puzzle-Scrolling-Effekt auf Divi zeigt.
Der Schlüssel ist zu verstehen, wie sich die Größe der Bilder auf die vertikalen und horizontalen Versatzwerte jedes Bildlaufeffekts bezieht, um das Bild genau um einen Punkt zu verschieben. Wenn der Vorgang abgeschlossen ist, ist der resultierende Bewegungseffekt klar und präzise, da er sich allmählich zusammensetzt und auf einzigartige Weise eine Bildergalerie zeigt.
Mögliches Ergebnis
Hier ist eine Übersicht über das Layout der Bildergalerie mit dem Scrolling-Effekt, den wir in diesem Tutorial erstellen werden.
Erstellen des Header-Abschnitts
Lassen Sie uns zunächst einen kurzen Header-Abschnitt erstellen, in dem der Benutzer aufgefordert wird, die Seite zu scrollen, um die Galerie anzuzeigen, und mit den fantastischen Bildlaufeffekten.
Fügen Sie eine Zeile hinzu
Fügen Sie dem Standardabschnitt eine Zeile mit einer Spalte hinzu.
Fügen Sie ein Textmodul hinzu
Fügen Sie innerhalb der Spalte / Zeile ein neues Textmodul hinzu.
Aktualisieren Sie in den Texteinstellungen den Textinhalt wie folgt:
<h1>Image Gallery</h1>
Einstellungen des Textmoduls
Aktualisieren Sie auf der Registerkarte Design das Textdesign wie folgt:
- Titelschrift: Roboto
- Schriftgröße des Titels: fett
- Titelschriftart: TT
- Ausrichtung des Kopfzeilentextes: Mitte
- Header-Textgröße: 50px (Desktop), 40px (Tablet und Telefon)
- Titelbuchstabenabstand: 4px
Fügen Sie ein Klappentext-Modulsymbol hinzu
Sobald der Text vorhanden ist, fügen Sie unter dem Textmodul ein neues Präsentationstextmodul hinzu.
Entfernen Sie dann alle Titel und Textkörper aus dem Standardinhalt und wählen Sie das Abwärtspfeilsymbol.
Einstellungen für Präsentationstexte
Aktualisieren Sie anschließend die Einstellungen für den Präsentationstext mit einer neuen Farbe und einer sich wiederholenden Folienanimation.
- Symbolfarbe: # ffb500
- Animationsstil: Folie
- Animationsrichtung: nach unten
- Animationsintensität: 20%
- Animation wiederholen: Schleife
Abschnittsauffüllung
Aktualisieren Sie den Abstand wie folgt, um dem Abschnitt Platz zum Scrollen zu geben:
- Polsterung: 20vh oben, 50vh unten
Hier verwenden wir die Längeneinheit vh, die relativ zur Höhe des Browserfensters ist, damit sich der Abstand über alle Browsergrößen hinweg einheitlich anpasst.
Erstellung einer Bildergalerie mit Scrolling-Effekten
Nachdem unser Header-Bereich vollständig ist, können wir die eigentliche Bildergalerie mit den gleitenden Puzzle-Scroll-Effekten erstellen. Die gesamte Galerie besteht aus drei Zeilen mit 4 Bildern / Spalten in jeder Zeile, um insgesamt 12 Bilder zu erstellen. Sie können dem Layout jedoch problemlos weitere Linien und Bilder hinzufügen, sobald es fertig ist.
Erstellen des Abschnitts und der Linie
Einen neuen Abschnitt hinzufügen
Beginnen wir mit dem Hinzufügen eines neuen regulären Abschnitts unter dem Titelabschnitt.
Fügen Sie eine Zeile hinzu
Fügen Sie dann dem Abschnitt eine Zeile mit vier Spalten hinzu.
Leitungseinstellungen
Aktualisieren Sie unter den Zeileneinstellungen Folgendes:
- Dachrinnenbreite: 1
- Breite: 100%
- Maximale Breite: 1200 Pixel (Desktop), 600 Pixel (Tablet), 300 Pixel (Telefon)
Wie die Linienbreite die Bildgröße bestimmt
Die Breite der Zeile ist für dieses Design sehr wichtig, da sie die Breite jeder der vier Spalten bestimmt. Sobald wir die Rinnenbreite auf 1 gesetzt haben, gibt es keinen Rand mehr zwischen den Bildern.
Wenn wir die maximale Breite auf 1200 Pixel einstellen, wird durch das Layout mit vier Spalten jede der Spalten / Bilder genau 300 Pixel breit (1200 Pixel / 4 = 300 Pixel).
Da jedes der Bilder quadratisch ist, wissen wir auch, dass die Höhe jedes Bildes ebenfalls 300 Pixel beträgt. Wir müssen es nicht so halten, wenn wir nicht wollen.
Zum Beispiel könnten wir auch ein dreispaltiges Layout mit Bildern von 400 x 400 Pixel wählen. Die Kenntnis der Bildbreite (300px) und -höhe (auch 300px) ist der Schlüssel zum späteren Erstellen des Bildlaufeffekts.
Bilder hinzufügen
Bild hinzufügen 1
Bild 1 Bildlaufeffekte
Beziehung zwischen Bildgröße und Bildlaufeffekt-Offsets
Bei Verwendung des vertikalen und horizontalen Bildlaufeffekts ist es wichtig zu verstehen, was der eingegebene numerische Wert darstellt. In diesem Beispiel haben wir einen vertikalen Startversatz für die Bewegung von -3. Diese -3 ist tatsächlich -300px (oder 300px nach unten), was der Breite des Bildes entspricht.
Der Versatz erreicht dann 0 (die Ausgangsposition), wenn der Benutzer einen Bildlauf durchführt. Dies erzeugt den Bildlaufeffekt, der das Bild auf genau einen Block / Frame verschiebt. Die horizontale Bewegung beginnt bei 3 (300 Pixel von rechts) und endet an der Standardposition. Diese beiden Effekte ergeben zusammen einen einzigartigen zweiteiligen Bildlaufeffekt.
Bild hinzufügen 2
Nach dem Hinzufügen von Bildlaufeffekten zu Bild 1. Fügen Sie Spalte 2 ein neues Bild hinzu.
Wir werden dieses statische Bild ohne Bildlaufeffekt belassen.
Bild hinzufügen 3
Fügen Sie dann ein weiteres Bildmodul zu Spalte 3 hinzu und aktualisieren Sie das Modul mit einem neuen Bild.
Bild 3 Bildlaufeffekte
Aktualisieren Sie unter Bildeinstellungen die folgenden Bildlaufeffekte:
Unter der Registerkarte Horizontale Bewegung ...
- Horizontale Bewegung aktivieren: JA
- Startoffset: -3 (bei 0% des Fensters)
- Durchschnittlicher Versatz: 0 (bei 15% des Ansichtsfensters)
- Endversatz: 0 (bei 100% des Ansichtsfensters)
Bild hinzufügen 4
Um das letzte Bild zu erstellen, kopieren Sie Bild 1 und fügen Sie es in Spalte 4 ein.
Laden Sie ein neues Bild in den Bildeinstellungen hoch.
Bild 4 Bildlaufeffekte
Aktualisieren Sie dann die folgenden Bildlaufeffekte:
Unter der Registerkarte Vertikale Bewegung ...
- Vertikale Bewegung aktivieren: JA
- Startversatz: 3 (bei 0% des Fensters)
- Durchschnittlicher Versatz: 0 (bei 15% -28% des Ansichtsfensters)
- Endversatz: 0 (bei 40% des Ansichtsfensters)
Unter der Registerkarte Horizontale Bewegung ...
- Horizontale Bewegung aktivieren: JA
- Startversatz: 3 (bei 0% des Fensters)
- Durchschnittlicher Versatz: 3 (bei 28% des Ansichtsfensters)
- Endversatz: 0 (bei 40% des Ansichtsfensters)
Doppelte Zeile
Nachdem die Bildlaufeffekte für die erste Zeile ausgeführt wurden, müssen wir nur noch die Zeile duplizieren, um weitere Bilder und die entsprechenden Bildlaufeffekte zu erstellen. In diesem Beispiel duplizieren wir die Zeile zweimal, um insgesamt drei Zeilen zu erstellen.
Ersetzen und ordnen Sie die Bilder nach Bedarf neu
Anschließend können wir die Bilder per Drag-and-Drop beliebig verschieben. Hier können Sie kreativ werden und sehen, wie die bewegten Bilder scrollen. Und sobald die Bilder vorhanden sind, können Sie den Inhalt des Bildmoduls durch neue Bilder ersetzen, die den Anforderungen von entsprechen Website.
Letzte Ausbesserungen
Abschnittssichtbarkeit
Da sich unsere Bilder wahrscheinlich außerhalb des Abschnitts / Fensters erstrecken, sollten Sie den Überlauf ausblenden, um ihn ein wenig zu bereinigen. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:
- Horizontaler Überlauf: versteckt
- Vertikaler Überlauf: versteckt
Abschnittsauffüllung
Wir möchten, dass der vertikale Bildlaufeffekt des oberen Bilds (das sich über den Abschnitt erstreckt) trotz des versteckten Überlaufs sichtbar ist. Fügen wir also eine obere und untere Polsterung hinzu, die der Bildhöhe (300 Pixel) entspricht.
Ergebnis bisher
Im Moment können wir hier anhalten, wenn Sie das Galeriedesign ohne Abstand zwischen den Bildern beibehalten möchten. So sieht das Ergebnis bisher aus. Beachten Sie, wie sich die Bilder vertikal und horizontal genau um einen Block / Frame bewegen.
Platz zwischen Bildern hinzufügen
Da wir die Rinnenbreite auf 1 setzen, haben wir keinen Abstand mehr zwischen unseren Spalten oder Bildern. Um einen ähnlichen Abstand wiederherzustellen, können wir jedem Frame eine Füllung hinzufügen.
Auf diese Weise können wir den erforderlichen Abstand erstellen, ohne die Funktionalität der Bildlaufeffekte zu beeinträchtigen. Dies ist möglich, da durch Hinzufügen von Auffüllungen zum Bild die Breite oder Höhe des Bildcontainers nicht erhöht wird. Sie können einen ähnlichen Effekt auch erzielen, indem Sie auch Rahmen verwenden.
Bild 1 Polsterung
Öffnen Sie die Einstellungen in Bild 1 und aktualisieren Sie Folgendes:
- Auffüllen: 10 Pixel oben, 10 Pixel unten, 10 Pixel links, 10 Pixel rechts
Erweitern Sie die Füllung auf alle Bilder
Klicken Sie vor dem Speichern mit der rechten Maustaste auf die Auffülloption und wählen Sie "Auffüllen erweitern". Klicken Sie im Popup-Fenster "Stile erweitern" auf die Schaltfläche "Erweitern", um diese Füllung auf alle Bilder auf der Seite zu erweitern.
Endergebnis
Hier ist das Ergebnis all der Arbeit, die wir bisher geleistet haben.
Abschließende Gedanken
Der in diesem Artikel vorgestellte Sliding-Puzzle-Scrolling-Effekt bietet mehr als nur ein einzigartiges Design für eine Bildergalerie. Es wird auch darauf hingewiesen, dass horizontale und vertikale Bewegungsversätze für präzisere Bildlaufeffekte verwendet werden können.
Sie können verschiedene Variationen dieses Layouts erkunden, indem Sie die Offsets ändern und die Positionen der Bilder verwechseln.
Sie können auch die Anzahl der Spalten ändern, solange Sie wissen, wie sich die Spalten- / Bildgröße ändert und wie Sie dann die Bildlaufeffekt-Offsets mit dem entsprechenden Wert aktualisieren.
Einige empfohlene Ressourcen
Sie werden diese wahrscheinlich finden Ressourcen interessant, weil Sie damit auch Fotogalerien auf Ihrem erstellen können Wordpress-Blog.