So kombinieren Sie Hover-Effekte mit CSS Parallax-Hintergründen in Divi
Veröffentlicht: 2019-08-30Die Verwendung von CSS Parallax mit Hintergrundbildern in Divi ermöglicht es uns, Hover-Effekte zu erstellen, die überraschend einzigartig sind. Parallax ist eine von vielen Möglichkeiten, wie wir unseren Websites Leben einhauchen können. Und wenn wir Parallaxe mit den zahlreichen Schwebeoptionen von Divi kombinieren, erwecken wir Inhalte noch mehr zum Leben.
In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi schnell und einfach einzigartige CSS-Hover-Effekte mit Parallaxenhintergrund entwerfen können. Kein Plugin oder benutzerdefinierte Codierung erforderlich!
Lass uns anfangen.
Vorgeschmack
Hier ist ein kurzer Blick auf die CSS-Parallax-Hintergrund-Hover-Effekte, die wir in diesem Tutorial entwerfen werden.
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
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Teil 1: Erstellen eines Breakout Parallax Hover-Effekts in Divi
Erstellen Sie zunächst einen regulären Abschnitt mit einer einspaltigen Zeile. 
Öffnen Sie vor dem Hinzufügen eines Moduls die Abschnittseinstellungen und fügen Sie ein Hintergrundbild mit CSS-Parallaxe hinzu.
Stellen Sie sicher, dass das Bild mindestens 1920px breit ist. Das Design funktioniert gut mit einem dunkleren Hintergrundbild mit viel Textur. Ich verwende eines aus unserem Coffee Shop Layout Pack, das im Divi Builder erhältlich ist.
Fügen Sie dann dem Abschnitt wie folgt etwas Auffüllung hinzu:
Polsterung: 10vw oben, 10vw unten
Ein Blurb-Modul hinzufügen
Sobald der Abschnittshintergrund und die Auffüllung vorhanden sind, fügen Sie der Zeile ein Klappenmodul hinzu.
Aktualisieren Sie dann den Klappentext mit ein paar Sätzen Fließtext. Sie können den Standardtitel dort beibehalten.
Klicken Sie dann auf ein Symbol, um es zu verwenden, und wählen Sie das Kaffeesymbol für den Klappentext aus.
Nachdem der Inhalt fertig ist, aktualisieren Sie die Designeinstellungen wie folgt:
Symbolfarbe: #ffffff
Symbolschriftgröße: 50px
Textausrichtung: Mitte
Titelschriftart: Oswald
Titelschriftart TT
Titeltextfarbe: #ffffff
Abstand der Titelbuchstaben: 2px
Körperschriftart: Nunito
Textkörperfarbe: #ffffff
Abstand des Hauptbuchstabens: 1px
Padding: 30px oben, 30px unten, 30px links, 30px rechts
Reihenbreite anpassen
Nachdem der Klappentext entworfen wurde, springen Sie zu den Zeileneinstellungen und passen Sie die maximale Breite an.
Maximale Breite: 80%
Spalteneinstellungen
In diesem Beispiel aktivieren wir den Hover-Effekt auf Spaltenebene. Auf diese Weise können Sie mehrere Module verwenden, um den Inhalt zu erstellen, obwohl wir derzeit nur ein einziges Klappenmodul verwenden.
Damit dieser Parallax-Hover-Effekt funktioniert, müssen wir der Spalte, die wir in unserem Abschnitt verwendet haben, dasselbe Hintergrundbild hinzufügen. Wir müssen die gleiche CSS-Parallaxe-Methode auch für das Spaltenhintergrundbild verwenden.
Öffnen Sie die Spalteneinstellungen und fügen Sie das gleiche Hintergrundbild mit CSS-Parallaxe hinzu.
Sie können keinen Unterschied zwischen dem Hintergrundbild der Spalte und dem Hintergrundbild des Abschnitts sehen, da beide CSS-Parallaxe verwenden, die das Bild im Wesentlichen an genau derselben Stelle auf der Webseite fixiert. Sie werden jedoch den Unterschied sehen, sobald der Hover-Effekt aktiviert ist.
Aktualisieren Sie die Spaltendesigneinstellungen wie folgt weiter:
Polsterung: 4vw oben, 4vw unten
Abgerundete Ecken: 10px
Geben Sie der Spalte dann einen Boxschatten, der nur beim Hover angezeigt wird, wie folgt:
Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenunschärfe: 36px
Schattenfarbe (Standard): rgba(0,0,0,0)
Schattenfarbe (Hover): rgba(0,0,0,0,72)
Gehen wir nun zu den Transformationsoptionen und aktualisieren die folgenden Transformationsstile beim Hover:
Skalierung transformieren (Hover): 105%
Dadurch wird die Spalte (und deren Inhalt) leicht vergrößert, um den Effekt zu erzeugen, dass sie leicht aus dem Hintergrundbild herausspringt.
Transformieren Y-Achse übersetzen (Hover): -2,5%
Dadurch wird die Säule beim Schweben leicht nach oben bewegt, um eine leichte asymmetrische Verschiebung zu erzeugen.
Ursprung der Transformation: 100 % 50 % (unten Mitte)
Damit beginnt der Skalierungseffekt vom unteren mittleren Ursprung, der in Kombination mit dem Übersetzungswert einem subtilen Scharniereffekt ähnelt.
Hier ist der bisherige CSS-Parallax-Hover-Effekt.
Öffnen Sie nun die Zeileneinstellungen und duplizieren Sie die Spalte zweimal, um insgesamt drei Spalten mit jeweils denselben Klappen- und Schwebeeffekten zu erstellen.
Endergebnis
Hier ist das endgültige Design. Beachten Sie, wie die Parallax-Hintergrundbilder standardmäßig ausgeblendet sind, wenn Sie auf der Seite nach unten scrollen. Dann erscheinen sie, wenn Sie mit der Maus über jede der Spalten fahren, wenn sie herausspringen. Sie können auch sehen, dass die Parallaxe in der Spalte weiterhin funktioniert, wenn Sie auf der Seite nach unten scrollen, während Sie mit der Maus über die Spalte fahren. Es ist ein subtiler, aber äußerst einzigartiger Schwebeeffekt.
Hinzufügen einer Drehung zum Hover-Effekt
Wir können dem CSS-Parallax-Hover-Effekt auch eine Drehung hinzufügen, die dem Design eine schöne Note verleiht. Öffnen Sie einfach jede der Spalteneinstellungen und aktualisieren Sie Folgendes:
Transformieren Z-Achse drehen (beim Schweben): 5deg
Wenn Sie es verwechseln möchten, können Sie der mittleren Spalte eine -5-Grad-Drehung geben.
Hier ist das Endergebnis.
Und hier ist das gleiche Design mit einem helleren Hintergrundbild und dunklerem Text.
Teil 2: Erstellen eines Lupen-Parallax-Hover-Effekts in Divi
Duplizieren Sie den Abschnitt aus dem ersten Design und öffnen Sie dann die Abschnittseinstellungen und ersetzen Sie das Hintergrundbild durch ein neues. Ich verwende das aus unserem Video Game Layout Pack, weil es den Vergrößerungsparallax-Hover-Effekt wirklich hervorhebt.
Zeileneinstellungen aktualisieren
Wir werden etwas zusätzlichen Platz für dieses Design benötigen, also öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
Dachrinnenbreite: 1
Breite: 100%
Maximale Breite: 98%
Springen Sie danach zum Inhalts-Tab und löschen Sie zwei der Spalten, sodass nur noch eine übrig bleibt.
Spalteneinstellungen
Für dieses Design müssen wir den Hover-Effekt auf Modulebene statt auf Spaltenebene anwenden, also müssen wir die Standardstile für die Spalte zurücksetzen. Klicken Sie dazu mit der rechten Maustaste auf das Spaltenelement und wählen Sie "Elementstile zurücksetzen".
Blurb-Modul aktualisieren
Nachdem die Spalteneinstellungen auf die Standardstile zurückgesetzt wurden, öffnen Sie die Einstellungen des Klappenmoduls und fügen Sie das gleiche CSS-Parallax-Hintergrundbild hinzu, das dem Abschnitt hinzugefügt wurde.
Größe
Um ein kreisförmiges Modul zu erstellen, müssen wir ihm zunächst eine passende Breite und Höhe wie folgt zuweisen:
Breite: 300px
Modulausrichtung: Mitte
Höhe: 300px
Grenze
Um den kreisförmigen Effekt zu vervollständigen, müssen wir die abgerundeten Ecken aktualisieren und ihm einen leichten Rand geben.
Abgerundete Ecken: 50%
Rahmenbreite: 1px
Rahmenfarbe: rgba(255,255,255,0.12)
Box-Schatten-Hover-Effekt
Als Nächstes geben Sie dem Klappentext wie folgt einen Box-Schatten beim Schweben:
Box Shadow: siehe Screenshot
Stärke der Box-Schattenunschärfe: 36px
Schattenfarbe (Standard): rgba(0,0,0,0)
Schattenfarbe (Hover): rgba(0,0,0,0.7)
Hover-Effekte transformieren
Sobald Ihr Boxschatten platziert ist, aktualisieren Sie die Transformationsoptionen wie folgt:
Ursprung transformieren (Standard): 50% 0% (Mitte links)
Dadurch wird sichergestellt, dass der Klappentext nicht über die Seite hinausragt, sobald er ganz links in der dreispaltigen Zeile platziert wird.
Skalierung transformieren (Hover): 130%
Dadurch wird der Klappentext vergrößert und das Parallax-Hintergrundbild für einen coolen Schwebeeffekt wirklich vergrößert.
Duplizieren Sie die Spalte
Sobald der Klappentext fertig ist, können wir die Spalte duplizieren, um drei Spalten mit jeweils demselben Klappentextmodul zu erstellen.
Öffnen Sie die Zeileneinstellungen und duplizieren Sie die Spalte zweimal für insgesamt drei Spalten.
Transform-Ursprung aktualisieren
Da bei allen unseren Klappenmodulen der Transformationsursprung auf „Mitte links“ eingestellt ist, müssen wir dies für die Klappen in der mittleren und rechten Spalte so anpassen, dass sie von der entsprechenden Position aus skalieren.
Öffnen Sie die Einstellungen für das Klappenmodul in Spalte 2 und aktualisieren Sie Folgendes:
Ursprung der Transformation: 50 % 50 % (Mitte Mitte)
Öffnen Sie dann die Einstellungen für das Klappenmodul in Spalte 3 und aktualisieren Sie Folgendes:
Transformationsursprung: 50 % 100 % (Mitte rechts)
Endergebnis
Sehen Sie sich nun das Endergebnis an. Beachten Sie, wie der Effekt das CSS-Parallax-Hintergrundbild hinter dem Klappentext wirklich vergrößert. Und wenn Sie mit der Maus über den Klappentext nach unten scrollen, sieht es aus wie eine Lupe.
Tatsächlich ist dies so cool, dass wir es vielleicht als Standardstil belassen möchten, anstatt nur im Hover-Zustand.
Abschließende Gedanken
Ich hoffe, die Beispiele in diesem Beitrag haben Ihre kreativen Säfte etwas zum Fließen gebracht, damit Sie noch mehr coole Designs und Hover-Effekte erkunden können, die Sie mit CSS-Parallaxe kombinieren können. Der Einrichtungsprozess ist wirklich einfach, aber die Möglichkeiten sind scheinbar endlos.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!