Der Parallax-Effekt ist eine visuelle Technik, bei der sich Hintergrundbilder beim Scrollen langsamer bewegen als die Bilder im Vordergrund. Diese Technik erzeugt eine Illusion von Tiefe und Dreidimensionalität auf einer ansonsten flachen Webseite, indem sie dem Betrachter ein Gefühl von Bewegung und Raum vermittelt.
Es gibt mehrere Gründe, den Parallax-Effekt auf Webseiten zu verwenden:
Verbesserung der Benutzererfahrung: Der Effekt kann eine Webseite visuell ansprechender und interessanter machen, was die Benutzererfahrung verbessert und dazu beitragen kann, dass Besucher länger auf der Seite verweilen.
Erzähltechnik: Webdesigner nutzen den Parallax-Effekt, um eine Geschichte zu erzählen oder Informationen auf visuell ansprechende und schrittweise Weise zu präsentieren. Durch das Scrollen durch verschiedene Parallax-Schichten kann der Nutzer interaktiv in den Inhalt eingebunden werden.
Differenzierung: Der Parallax-Effekt kann einer Website helfen, sich durch ein einzigartiges visuelles Erlebnis von der Konkurrenz abzuheben. Dies kann besonders für Marken nützlich sein, die eine starke visuelle Identität aufbauen möchten.
Engagement: Durch die Schaffung einer dynamischen und interaktiven Umgebung kann der Parallax-Effekt das Engagement der Nutzer erhöhen. Die Nutzer fühlen sich motivierter, mit den Inhalten zu interagieren und die gesamte Seite zu erkunden.
Um diesen Effekt zu generieren brauchen wir zunächst zwei Dinge: Midjourney und Photoshop. Midjourney generiert zunächst das Bild und in Photoshop „zerlegen“ wir das Bild in seine Einzelteile (und füllen den leeren Raum). Wir beginnen mit Midjourney. Dazu lasse ich mir ein Bild generieren, das die nötige Tiefe hat. In meinem Beispiel:
photo-realistic image of a man with a black hoodie standing in a deep valley, in the background you see a futuristic city --ar 16:9 --v 6.0
Dieses Bild öffne ich nun in Photoshop der aktuellen Version (dies ist notwendig, weil ich dazu die Firefly Engine von Photoshop benötige) und zerlege es in drei Ebenen: a) den Mann im Vordergrund, b) die näheren Berge und c) den Hintergrund:
Nun kommt die „Power“ von Adobes Firefly Engine zum Einsatz. Da ich ja den Mann und die Berge ausgeschnitten habe, fehlen im Hintergrundbild ja wesentliche Details. Dank Firefly ist das relativ schnell behoben. Ich wähle – wirklich „quick and dirty“ – die Stellen aus, wo vorher der Mann und die Berge waren aus und lasse diese mittels „generative fill“ mit Adobes KI neu berechnen:
Diese drei Bilder lade ich nun auf die gewünschte Webseite hoch. In meinem Beispiel ist die Webseite mit WordPress betrieben. Für WordPress gibt es mehrere Erweiterungen, die einen solchen Effekt erstellen können. Das Hintergrundbild nimmt dabei eine unbewegte Position ein. Die nächste Schicht ist die mit den Bergen, diese stelle ich so ein, dass sie sich beim Scrollen mit Geschwindigkeit X nach unten bewegt. Zum Schluss kommt das Bild mit dem Mann, der sich auch nach unten bewegt, aber etwas schneller, als das Bild der Berge. Wichtig ist dann auch, dass der Container, indem sich das Parallax Bild befindet auf „overflow:hidden“ gestellt ist, sonst bewegen sich die Bilder aus dem Container hinaus.
In diesem Kurz-Workshop ging es mir primär darum, in welchem Zeitraum ich die Situation lösen kann. Vom Erstellen des Prompts bis hin zur Implementierung auf der Webseite dauerte dieser Prozess keine 20 Minuten. Ehrlicherweise hab ich zum Tippen länger gebraucht. Wenn man den Prompt nun auch noch perfektioniert und in Photoshop wirklich genau (wie ich es für jeden Kunden machen würde) arbeitet, dann dauert zwar alles länger, aber der Effekt hat noch mehr Qualität. Das hier ist also nur ein „Proof of concept“, aber für euch vielleicht eine nützliche Kurzanleitung, wie man Parallax Bilder mit Midjourney und Photoshop erstellen kann.
DIGITALHANDWERK ist eine Seite über künstliche Intelligenz in Wort und Bild.
Alle Rechte vorbehalten. © 2024 Alex Januschewsky
