Gib deinen Kundenprojekte mit unseren WebGL-Effekten das besondere Etwas. Sie wurden entwickelt, um Medienhintergründe in Hingucker zu verwandeln. Die Effekte sprechen Website-Besucher an und sorgen gleichzeitig für eine optimale Performance. Wähle aus einer Vielzahl beeindruckender Presets, optimiere ihre Eigenschaften und entscheide, wie sie aktiviert werden – automatisch beim Scrollen oder durch die Mausbewegung des Besuchers.
Einen WebGL-Effekt hinzufügen
Öffne das Inspektor-Panel, um einen WebGL-Effekt zum Medienhintergrund eines Abschnitts hinzuzufügen. Du kannst aus verschiedenen Presets wählen, je nachdem, welches Design und welche Interaktion du erreichen möchtest.
Um einen WebGL-Effekt hinzuzufügen:
- Füge ein Bild oder Video zu dem gewünschten Abschnittshintergrund hinzu.
Hinweis: WebGL-Effekte werden für GIF-Hintergründe sowie Medienhintergründe, die als Kacheln eingestellt sind, nicht unterstützt. - Wähle den Abschnitt auf der Arbeitsfläche aus.
- Wende einen WebGL-Effekt an:
- Klicke oben rechts im Editor auf das Symbol für Inspektoröffnen
.
- Klicke auf den Tab Animationen und Effekte
. - Klicke unter WebGL-Effekte auf + Hinzufügen.
- Wähle einen Effekt aus der Liste aus.
Einen WebGL-Effekt anpassen
Passe das Design und Verhalten der WebGL-Effekte an – egal, ob mit leichten Verzerrungen oder kräftigen, dynamischen Bewegungen. Jeder Effekt hat seine eigenen anpassbaren Einstellungen, wie zum Beispiel Intensität, Geschwindigkeit und Richtung, sodass du die volle Kontrolle darüber hast, wie der Effekt mit deinen Inhalten interagiert.
Bei bestimmten Effekten kannst du auch festlegen, welche Trigger auf der Website deines Kunden diese Effekte auslösen – automatische Wiedergabe, Scrollen, Mausbewegung oder eine Kombination aus mehreren Aktionen.
Um einen WebGL-Effekt anzupassen:
- Wähle den entsprechenden Abschnitt aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Klicke auf den Tab Animationen und Effekte .
- Klicke auf den Effekt, den du ändern möchtest.
- Klicke auf Animation anpassen, um die Einstellungen zu ändern:
- Zeigergröße: Ziehe den Schieberegler, um den Bereich zu ändern, der auf den Effekt reagiert, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt. Wenn du den Bereich vergrößerst, wird der Effekt sichtbarer, wenn du ihn verkleinerst, bleibt der Bereich im Fokus.
- Rauschen: Ziehe den Schieberegler, um das Rauschen anzupassen. Wenn du das Rauschen erhöhst, sieht der Effekt strukturierter und verzerrter aus.
- Zeigergeschwindigkeit: Ziehe den Schieberegler, um zu steuern, wie schnell die Bewegung der Maus folgt, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt.
- Intensität: Ziehe den Schieberegler, um die Stärke des Effekts zu steuern. Wenn du die Intensität erhöhst, sieht der Abschnittshintergrund verzerrt aus, wenn Besucher mit der Maus darüber fahren.
- Zeigergröße: Ziehe den Schieberegler, um den Bereich zu ändern, der auf den Effekt reagiert, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt. Wenn du den Bereich vergrößerst, wird der Effekt sichtbarer, wenn du ihn verkleinerst, bleibt der Bereich im Fokus.
- Zeigergeschwindigkeit: Ziehe den Schieberegler, um zu steuern, wie schnell die Bewegung der Maus folgt, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt.
Hinweis: Die verfügbaren Einstellungen können je nach gewähltem Trigger variieren.
- Trigger: Wähle einen oder mehrere Trigger aus, die den Effekt auslösen sollen – automatische Wiedergabe, Mausbewegung oder Scrollen. Füge weitere Trigger hinzu, indem du auf das Symbol für Hinzufügen
klickst, und entferne einen Trigger, indem du daneben auf das Symbol für Entfernen 
klickst.
- Richtung: Lege die Richtung für den Effekt fest: horizontal oder vertikal.
- Duplizieren: Ziehe den Schieberegler, um zu steuern, wie der Spalt neue Zeilen aus dem Bild- oder Videohintergrund erfasst. Eine höhere Anzahl an Duplikaten macht den Effekt dynamischer, während eine kleinere Anzahl eine langsamere Transformation ermöglicht.
- Zeigergeschwindigkeit: Ziehe den Schieberegler, um zu steuern, wie schnell die Bewegung der Maus folgt, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt.
- Automatische Wiedergabe: Ziehe den Schieberegler, um die Geschwindigkeit zu steuern, mit der sich die Zeilen bewegen.
- Farben: Wähle die Farben, die sich vermischen, um den Orb-Effekt zu erzeugen – Alle, Grün & Magenta usw.
- Farbwinkel: Ziehe den Schieberegler, um den Winkel festzulegen, in dem sich Farben vermischen und in einander übergehen.
- Zeigergröße: Ziehe den Schieberegler, um den Bereich zu ändern, der auf den Effekt reagiert, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt. Wenn du den Bereich vergrößerst, wird der Effekt sichtbarer, wenn du ihn verkleinerst, bleibt der Bereich im Fokus.
- Rauschen: Ziehe den Schieberegler, um das Rauschen anzupassen. Wenn du das Rauschen erhöhst, sieht der Effekt strukturierter und verzerrter aus.
- Zeigergeschwindigkeit: Ziehe den Schieberegler, um zu steuern, wie schnell die Bewegung der Maus folgt, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt.
- Stretch Ripple: Ziehe den Schieberegler, um die Breite der einzelnen Wellen im Ripple-Effekt anzupassen, sodass er sich ausdehnt oder zusammenzieht.
- Intensität: Ziehe den Schieberegler, um die Stärke des Effekts zu steuern. Wenn du die Intensität erhöhst, werden die Wellen größer und leichter zu sehen.
- Rauschen: Ziehe den Schieberegler, um das Rauschen anzupassen. Wenn du das Rauschen erhöhst, sieht der Effekt strukturierter und verzerrter aus.
- Geschwindigkeit der automatischen Wiedergabe: Ziehe den Schieberegler, um die Geschwindigkeit zu steuern, mit der sich die Ripples-Wellen bewegen.
Hinweis: Die verfügbaren Einstellungen können je nach gewähltem Trigger variieren.
- Trigger: Wähle einen oder mehrere Trigger aus, die den Effekt auslösen sollen – automatische Wiedergabe, Mausbewegung oder Scrollen. Füge weitere Trigger hinzu, indem du auf das Symbol für Hinzufügen klickst, und entferne einen Trigger, indem du daneben auf das Symbol für Entfernen klickst.
- Farben: Wähle die Farben, die den Split-Effekt erzeugen sollen – Alle, Grün & Magenta usw. Diese Farben erscheinen als fragmentierte Ebenen über dem Abschnittshintergrund.
- Kanalabstand: Ziehe den Schieberegler, um die Ausrichtung der Farbkanäle anzupassen. Wenn du den Abstand erhöhst, werden die Farben getrennt und verschwimmen, wodurch ein intensiverer und psychedelischer Effekte entsteht.
- Winkel: Ziehe den Schieberegler, um den Winkel festzulegen, in dem Farben innerhalb des Effekts gedreht werden.
- Zeigergröße: Ziehe den Schieberegler, um den Bereich zu ändern, der auf den Effekt reagiert, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt. Wenn du den Bereich vergrößerst, wird der Effekt sichtbarer, wenn du ihn verkleinerst, bleibt der Bereich im Fokus.
- Rauschen: Ziehe den Schieberegler, um das Rauschen anzupassen. Wenn du das Rauschen erhöhst, sieht der Effekt strukturierter und verzerrter aus.
- Zeigergeschwindigkeit: Ziehe den Schieberegler, um zu steuern, wie schnell die Bewegung der Maus folgt, wenn ein Besucher mit der Maus über den Abschnittshintergrund fährt.
- Geschwindigkeit der automatischen Wiedergabe: Ziehe den Schieberegler, um die Geschwindigkeit zu steuern, mit der sich die Farben bewegen.
Einen WebGL-Effekt entfernen
Du kannst einen WebGL-Effekt, den du zuvor zum Abschnittshintergrund hinzugefügt hast, jederzeit entfernen.
Um einen WebGL-Effekt zu entfernen:
- Wähle den entsprechenden Abschnitt aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Klicke auf den Tab Animationen und Effekte .
- Klicke neben dem WebGL-Effekt auf das Symbol für Weitere Aktionen
. - Wähle Löschen.
Häufig gestellte Fragen (FAQ)
Klicke unten auf eine Frage, um mehr über WebGL-Effekte im Studio Editor zu erfahren.
Funktionieren WebGL-Effekte auf Touchscreen-Geräten?
Für einige WebGL-Effekte ist ein Mauszeiger erforderlich, sodass sie nicht auf Touch-Geräten angezeigt werden:
- Noisy Track, RGB Orb und Liquify können nur durch Mausbewegung ausgelöst werden. In diesem Fall kannst du zu einem anderen Effekt wechseln, um das Problem zu beheben.
- Bei Slitscan und RGB split kannst du auswählen, was den Effekt auslöst. Wenn eine Mausbewegung dein einziger Auslöser ist, wird der Effekt auf Touch-Geräten deaktiviert. Um den Effekt anzuzeigen, füge einen weiteren Trigger hinzu (z. B. Automatische Wiedergabe).
- Der Ripples-Effekt ist so eingestellt, dass er auf jedem Gerät automatisch abgespielt wird – also auch auf Touchscreens, und zwar ohne dass du etwas tun musst.
Warum ist die Option zum Hinzufügen von WebGL-Effekten in meinem Editor ausgegraut?
Das kann mehrere Gründe haben:
- Möglicherweise hast du einen GIF-Hintergrund hinzugefügt, der keine WebGL-Effekte unterstützt.
- Möglicherweise hast du deinen Medienhintergrund auf Kacheln festgelegt (unter Anpassoptionen).
Um den Hintergrund zu ändern:
- Wähle den entsprechenden Abschnitt aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Scrolle unter Design nach unten zu Anpassoptionen.
- Wähle Originalgröße oder Füllen.
