So fügen Sie Ken Burns Hover-Effekte zu Bildern, Modulen und Zeilen in Divi . hinzu
Veröffentlicht: 2019-03-20Den Ken Burns Effekt gibt es schon seit einiger Zeit. Der Effekt wurde durch den amerikanischen Dokumentarfilmer Ken Burns berühmt, der eine Kombination aus Schwenk- und Zoomtechniken verwendete, um Bilder in seinen Filmen zum Leben zu erwecken. Im Webdesign hat sich der Ken-Burns-Effekt als beliebte Designtechnik erwiesen, um Hintergrundbilder zum Leben zu erwecken.
Der Ken Burns-Effekt kann auch als Hover-Effekt für Bilder verwendet werden. Sicher haben Sie das schon einmal gesehen. Um Bilder zum Leben zu erwecken, fügen Webdesigner den Bildern Hover-Effekte hinzu, die sie zum Zoomen, Verschieben und Drehen veranlassen.
Mit der Veröffentlichung der Transform-Effekte für den Divi Builder war es noch nie so einfach, Ken-Burns-Hover-Effekte auf Ihre Bilder zu bringen. Mit diesen Transformationsoptionen können Sie ein Bild beliebig skalieren (zoomen), verschieben (oder schwenken) und drehen. Und da Sie diese Transformationen auf den Schwebezustand des Bildes anwenden können, sind die Gestaltungsmöglichkeiten nahezu endlos.
In diesem Tutorial zeige ich Ihnen, wie einfach es ist, mit dem Divi Builder völlig einzigartige Ken Burns-Hover-Effekte für Bilder und Zeilen zu erstellen.
Lass uns anfangen.
Vorgeschmack
Hier ist ein kleiner Vorgeschmack auf den Hover-Effekt von Ken Burns, der mit den Transformationsoptionen von Divi leicht erreicht werden kann.
Das Grundkonzept erklärt
Das Grundkonzept zum Erstellen des Ken Burns-Hover-Effekts besteht darin, die neuen Transformationsoptionen von Divi zu verwenden, um das Bild zu skalieren, zu positionieren und zu drehen, wenn der Mauszeiger über dieses Bild bewegt wird. Sie können die Skalierungstransformationseigenschaft um einen bestimmten Prozentsatz erhöhen, damit das Bild beim Bewegen größer wird. Sie können die Eigenschaft translate transform verwenden, um das Bild entlang der x- und y-Achse zu verschieben. Und Sie können das Bild mit der Eigenschaft „Drehen transformieren“ drehen, indem Sie einen bestimmten Gradwert festlegen (in diesem Fall den Gradwert für die Drehung auf der x-Achse). Schließlich können Sie die Übergangsdauer (Geschwindigkeit) und die Geschwindigkeitskurve steuern, um die Geschwindigkeit eines Flusses des Ken Burns Hover-Effekts zu steuern. Die drei Transformationseigenschaften und Übergangseigenschaften wirken zusammen, um einen Ken Burns Hover-Effekt zu erzeugen, der Ihre Fotos zum Leben erweckt.
Sie können die Transformationseigenschaften und Übergangseigenschaften mithilfe der integrierten Einstellungen, die Divi bereitstellt, ganz einfach feinabstimmen. Der Schlüssel zum Funktionieren dieses Effekts besteht jedoch in einer einfachen CSS-Zeile (overflow:hidden), die auf die Spalte mit Ihrem Bild angewendet werden muss. Da Sie das Bild skalieren, verschieben und drehen, möchten Sie, dass der Überlauf des Bildes außerhalb der Spalte, die es enthält, ausgeblendet wird.
Sobald Sie die Grundidee und die Funktionalität festgelegt haben, ist es bemerkenswert, wie einfach es ist, das Bild mit den Transformationsoptionen von Divi genau so zu positionieren, wie Sie es möchten.
Laden Sie die Ken Burns Hover-Effekt-Beispiele KOSTENLOS herunter
Um die kostenlosen Ken Burns Hover-Effekt-Beispiele in die Hände zu bekommen, müssen Sie sie 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.
Nachdem Sie die Zip-Datei heruntergeladen haben, entpacken Sie den Ordner. Importieren Sie als Nächstes das .json-Layout mithilfe der Divi Builder-Portabilitätsfunktion. Oder ziehen Sie die Datei einfach in den Divi Builder, indem Sie die Drag-and-Drop-Funktion von Divi verwenden. Das ist es!
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!
Erste Schritte mit einer neuen Seite
Als erstes müssen Sie eine neue Seite erstellen. Geben Sie dann der Seite einen Titel und stellen Sie den Divi Builder am Frontend bereit. Wählen Sie dann die Option „Von Grund auf neu erstellen“.
Hinzufügen des Ken Burns-Effekts zu einem Bild in einer einspaltigen Zeile
In diesem ersten grundlegenden Beispiel zeige ich Ihnen, wie Sie den Hover-Effekt von Ken Burns zu einem einzelnen Bild in einer einspaltigen Zeile hinzufügen. Ich werde die Transformationsoptionen Skalieren, Übersetzen und Drehen verwenden, um diesen Effekt zu erzielen.
Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann der Zeile ein Bildmodul hinzu.
Überlauf der Spalte ausblenden
Bevor wir mit der Aktualisierung der Bildeinstellungen beginnen, öffnen Sie die Zeileneinstellungen und klicken Sie auf die Registerkarte Erweitert. Fügen Sie dann das folgende benutzerdefinierte CSS zum Column Main Element hinzu:
overflow: hidden;
Dadurch wird verhindert, dass sich das Bild über den Spaltencontainer hinaus erstreckt (oder überläuft), wenn das Bild beim Schweben auf eine größere Größe skaliert wird. Wenn Sie dies nicht hinzufügen, bricht das Bild aus dem Container aus und verbirgt andere Elemente der Seite. Technisch gesehen könnten Sie dieses CSS zum Hauptelement der Zeile anstelle der Spalte hinzufügen, aber Sie müssen auch alle benutzerdefinierten Zeilenauffüllungen entfernen.
Speichern Sie die Zeileneinstellungen.
Hinzufügen Ihres Bildes
Jetzt können wir ein Bild zum Bildmodul hinzufügen. Öffnen Sie die Bildmoduleinstellungen und fügen Sie ein Bild hinzu.
Stellen Sie sicher, dass das Bild deutlich größer als die Spalte ist. Dies ist wichtig, damit das Bild nicht verschwommen aussieht, wenn Sie das Bild beim Schweben auf eine größere Größe skalieren. Wenn Sie die Standardeinstellungen einer einspaltigen Zeile verwenden, beträgt die maximale Breite der Spalte 1080px. Ich verwende also ein Bild mit einer Breite von etwa 1500 Pixeln und einer Höhe von 900 Pixeln.
Wichtig: Als Faustregel gilt: Je größer das Bild, desto mehr Platz haben Sie zum Skalieren, Verschieben und Drehen des Bildes, ohne an Bildqualität zu verlieren.
Hinzufügen von Transform-Hover-Effekten
Nachdem wir nun unser Bild erstellt haben, ist es an der Zeit, diese Transformationsoptionen zu verwenden, um den Ken Burns-Hover-Effekt zu erstellen. Wechseln Sie zum Design-Tab, um die Transformationsoptionen zu öffnen. Aktivieren Sie die Hover-Effekte und wählen Sie die Registerkarte Hover. Alle Anpassungen von Transformationseffekten gelten jetzt nur für den Hover-Status des Bildmoduls. Aktualisieren Sie dann auf der Registerkarte Transform Scale Folgendes:
Transformationsskala x-Achse (Hover): 136%
Y-Achse der Transformationsskala (Hover): 136%
Klicken Sie dann auf die Registerkarte Transform Translate und aktualisieren Sie Folgendes:
Transformieren x-Achse verschieben (Hover): 3%
Transformieren Y-Achse verschieben (Hover): 9%
Dadurch wird das Bild um 3 % nach links und um 9 % nach unten verschoben. Für dieses spezielle Bild habe ich einen Effekt angestrebt, der heranzoomen und das Paar in die Mitte des Säulenansichtsfensters bringen würde.
Standardmäßig werden die Werte für die Übersetzungslänge in Pixeln (nicht in Prozent) angegeben. Sie können Pixel verwenden, um das Bild zu verschieben, aber ich finde, dass die Verwendung von Prozentsätzen die Positionierung reaktionsschneller macht.
Klicken Sie anschließend auf die Registerkarte Transform Rotate und aktualisieren Sie Folgendes:
Transformieren x-Achse drehen (Hover): 6deg
Übergangsoptionen aktualisieren
Schließlich müssen wir die Übergangsdauer (wie lange es dauert, bis der Transform-Hover-Effekt abgeschlossen ist) und die Geschwindigkeitskurve (die Zeitfunktion, die es dem Übergang ermöglicht, die Geschwindigkeit über seine Dauer zu ändern) aktualisieren. In diesem Beispiel möchte ich, dass der Übergang für einen dramatischeren (und klassischen) Ken Burns-Effekt beim Schweben länger dauert. Gehen Sie dazu auf die Registerkarte Erweitert und aktualisieren Sie die Übergangsoptionen wie folgt:
Übergangsdauer: 2000 ms (oder 2 Sekunden)
Übergangsgeschwindigkeitskurve: Linear (dadurch wird sichergestellt, dass sich die Geschwindigkeit des Übergangs nicht in der Dauer ändert)
Endergebnis
Schauen wir uns nun das Endergebnis an. Lassen Sie sich nicht von der abgehackten Gif unten täuschen. Der Übergang ist auf einer Live-Site wirklich reibungslos.
Hinzufügen des Ken Burns Hover-Effekts zu mehreren Bildern in einer Dreispaltenreihe
Wenn Sie Bildern in mehreren Spalten den Hover-Effekt "Ken Burns" hinzufügen möchten, gilt der gleiche Vorgang. Das Wichtigste, was Sie tun müssen, ist sicherzustellen und das CSS-Snippet „overflow:hidden“ in jede der Spalten, die Ihr Bild enthalten, einzufügen.
Ändern Sie anhand unseres vorherigen Beispiels oben die Spaltenstruktur der Zeile in ein dreispaltiges Layout.
Aktualisieren Sie als Nächstes die Zeileneinstellungen mit den benutzerdefinierten CSS-Snippets, die den Überlauf jeder Spalte ausblenden.
Spalte 1 Hauptelement-CSS:
overflow:hidden;
Spalte 2 Hauptelement-CSS:
overflow:hidden;
Spalte 3 Hauptelement-CSS:
overflow:hidden;
Als nächstes kopieren Sie das Bildmodul und fügen es in Spalte 2 und Spalte 3 ein.
Das ist es. Hier ist das Endergebnis.
Da dieses Design eher für ein Galerieraster-Layout typisch ist, möchten Sie wahrscheinlich die Übergangsdauer etwas beschleunigen, um die Hover-Animation zu schärfen. Sie können dies ganz einfach mit der Multiselect-Funktion von Divi tun. Halten Sie Strg oder cmd gedrückt und wählen Sie alle Bildmodule aus. Klicken Sie dann auf das Zahnradsymbol für die Einstellungen in einem der Bilder, um das Elementeinstellungen-Modal zu öffnen.
Jetzt werden alle Aktualisierungen, die Sie in den Elementeinstellungen vornehmen, auf alle Bilder gleichzeitig angewendet. Aktualisieren Sie die Übergangsoptionen in den Elementeinstellungen wie folgt:
Übergangsdauer: 500ms
Hier gilt die neue Übergangsdauer.
Hinzufügen des Ken Burns Hover-Effekts zu einem beliebigen Modul mit einem Hintergrundbild
Der Hover-Effekt von Ken Burns kann auch für andere Module als das Image Module verwendet werden. Dies funktioniert gut, wenn Sie Text oder Symbole zusammen mit dem Hintergrundbild eines Moduls transformieren möchten.
So fügen Sie einem Textmodul den Ken Burns-Effekt hinzu.
Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann der Zeile einen Textbaustein hinzu.
Aktualisieren Sie den Textbaustein mit folgenden Inhalten:
<h1>We're Engaged!</h1>
Fügen Sie dann dem Modul ein Hintergrundbild hinzu. Denken Sie daran, ein Bild hinzuzufügen, das groß genug ist, um Platz zum Skalieren und Verschieben des Bildes beim Schweben zu lassen.
Aktualisieren Sie dann die Gestaltungsoptionen für Überschriften wie folgt:
Überschrift Schriftart: Prata
Überschriftstextgröße: 6vw
Benutzerdefinierte Polsterung: 10vw oben, 10vw unten, 3vw links
Übergangsdauer: 5000ms
Fügen Sie nun die folgenden Transformationseinstellungen zum Textmodul hinzu.
Transformationsskala x-Achse (Hover): 118%
Transformationsskala y-Achse (Hover): 118%
Transformieren x-Achse verschieben (Hover): 6%
Transformieren Y-Achse verschieben (Hover): 6%
Aktualisieren Sie nun die Zeileneinstellungen mit dem folgenden benutzerdefinierten CSS für die Spalte.
Spaltenhauptelement-CSS:
overflow:hidden;
Sehen Sie sich nun das Ergebnis an.
Beachten Sie, wie sich der Text und das Hintergrundbild beim Bewegen des Mauszeigers zusammen transformieren.
Kombinieren des Ken Burns Hover-Effekts mit zusätzlichen Hover-Effekten
Sie können den Ken Burns Hover-Effekt, der auf ein Modul angewendet wird, auch mit zusätzlichen Effekten für noch mehr Kreativität kombinieren.
Ken Burns Hover-Effekt mit Filtereffekten kombinieren
Falls Sie sie vergessen haben, sind Filtereffekte eine großartige Möglichkeit, Ihren Modulen ein kreatives Styling hinzuzufügen, insbesondere beim Schweben. Und Sie können diese Filtereffekte mit dem Transformationseffekt kombinieren, um einige ziemlich einzigartige Hover-Übergänge zu erzielen.
Um es Ihnen zu zeigen, verwenden wir das obige Beispiel, das den Ken Burns-Effekt zu einem Textmodul hinzugefügt hat. Da das Textmodul bereits über den Hover-Effekt für die Transformation verfügt, fügen wir einen zusätzlichen Filtereffekt hinzu, um das Bild von Schwarzweiß in Farbe zu ändern.
Öffnen Sie die Textbausteineinstellungen und aktualisieren Sie die folgende Filteroption:
Sättigung (Standard): 0%
Sättigung (Hover): 100%
Dieser Übergang setzt das Textmodul standardmäßig auf 0% Sättigung, wodurch die Farbe entfernt wird und es schwarzweiß wird. Wenn Sie den Mauszeiger auf 100 % zurücksetzen, wird die Originalfarbe des Bildes wieder hinzugefügt.
Hier ist der endgültige Effekt des Filtereffekts in Kombination mit dem Ken Burns Hover-Effekt.
Kombinieren des Ken Burns Hover-Effekts mit Zeilentransformationseffekten
In diesem Beispiel zeige ich Ihnen, wie Sie den Hover-Effekt von Ken Burns mit einem zusätzlichen Transformationseffekt kombinieren, der der Zeile hinzugefügt wird. Die Idee besteht darin, Transformationseffekte zu verwenden, um die Zeile in ihrem Standardzustand zu skalieren und zu drehen und dann das ursprüngliche Design beim Schweben wiederherzustellen.
HINWEIS: Diese Technik funktioniert wirklich nur gut für eine einspaltige Zeile mit einem einzelnen Modul. Dies liegt daran, dass der Besucher gleichzeitig über das Modul und die Zeile fahren muss. Daher muss das Modul die volle Höhe und Breite der Reihe einnehmen. Zusätzliche Module oder Abstände unterbrechen den Schwebezustand und verursachen Probleme.
Dazu bleiben wir bei unserem aktuellen Textbaustein-Design, das bereits den Hover-Effekt von Ken Burns mit einem zusätzlichen Filtereffekt kombiniert. Dies ist also tatsächlich ein Triple-Hover-Effekt!
Öffnen Sie die Einstellungen der Zeile, die den Textbaustein enthält. Aktualisieren Sie dann Folgendes:
Benutzerdefiniertes Auffüllen: 0 Pixel oben, 0 Pixel unten, 0 Pixel links, 0 Pixel rechts
Damit soll sichergestellt werden, dass kein zusätzlicher Abstand zwischen dem Textbaustein und der Zeile entsteht. 
Als nächstes fügen wir der Zeile wie folgt einen Boxschatten hinzu:
Box Shadow: siehe Screenshot
Stärke der Box-Schattenunschärfe: 36px
Schattenfarbe: rgba(0,0,0,0.17)
Fügen Sie nun die folgenden Transformationseffekte hinzu:
Transformationsskala x-Achse (Standard): 70 %
Transformationsskala x-Achse (Hover): 100 %
Y-Achse der Transformationsskalierung (Standard): 70%
Transformationsskala y-Achse (Hover): 100 %
Transformieren Y-Achse drehen (Standard): 19deg
Transformieren Y-Achse drehen (Hover): 0deg
Transformieren Z-Achse drehen (Standard): 23deg
Transformieren Z-Achse drehen (Hover): 0deg
Schauen wir uns nun das Endergebnis an.
Hinzufügen des Ken Burns Hover-Effekts zu einer ganzen Reihe von Inhalten
Nur für den Fall, dass Sie sich wundern, der Hover-Effekt von Ken Burns kann auch verwendet werden, um eine ganze Reihe von Inhalten beim Schweben zum Leben zu erwecken. Dies ist für Zeilen mit vielen Inhalten nicht sehr praktisch, da es für Besucher zu verwirrend oder ablenkend ist. Aber für Dinge wie Header kann dies eine nützliche Designtechnik sein. Der Trick besteht darin, dem Abschnitt das benutzerdefinierte CSS-Snippet „overflow:hidden“ hinzuzufügen. Anschließend können Sie der Zeile die Transformationseffekte hinzufügen.
Abschließende Gedanken
Obwohl es den Ken Burns-Effekt schon seit einiger Zeit gibt, können Sie ihn immer noch nützlich finden, um einige ziemlich einzigartige Hover-Effekte für Ihre Bilder und Module in Divi zu erstellen. Der Trick besteht darin, die überraschend intuitiven Divi-Transformationsoptionen zu kennen. Diese Beispiele in diesem Tutorial sollten das Konzept vorstellen und hoffentlich ein wenig Inspiration für Ihre eigene Verwendung bieten. Wenn Sie darüber nachdenken, wie Sie Transformationsoptionen mit all den anderen in Divi verfügbaren Styling-Optionen kombinieren, tauchen unzählige Ideen auf.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!