Animationen zu Ihrer Komponente hinzufügen?
Fragestellungen:
- Wie animiere ich meine Komponente?
- Welche Animationsoptionen stehen für Komponenten zur Verfügung?
- Wie lasse ich das Banner in den sichtbaren Bereich gleiten?
- Wie verzögere ich eine Animation?
Beschreibung:
In dieser Anleitung wird erläutert, wie Sie Ihrer Komponente beim Erscheinen auf dem Bildschirm Einblendeffekte hinzufügen können. Diese durch den Viewport ausgelösten Animationen starten automatisch, sobald die Komponente sichtbar wird, und tragen so dazu bei, die Aufmerksamkeit der Besucher zu gewinnen und ein dynamisches Seitenerlebnis zu schaffen.
Wir zeigen Ihnen Schritt für Schritt, wie Sie:
-
einen Effekt auswählen: Wählen Sie zwischen Überblend-, Bewegungs-, Zoom- oder Drehbewegungen.
-
Geschwindigkeit und Richtung steuern: Passen Sie genau an, wie schnell und von wo aus die Animation einblendet.
-
Eintritte staffeln: Wenden Sie Verzögerungen an, um eine raffiniertere Präsentation zu erzielen.
Vorgehen:
-
Wählen Sie einen Animationstyp aus – Wählen Sie im Animationsfenster einen Basiseffekt aus, um festzulegen, wie die Komponente dargestellt werden soll. Sie können zwischen „Einblenden“, „Bewegen“, „Vergrößern“, „Verkleinern“ oder „Drehen&Springen“ wählen.
-
Bewegungsrichtung festlegen
Wenn Sie die Animation „Verschieben“ ausgewählt haben, legen Sie mithilfe der Pfeiltasten den Startpunkt fest. Damit legen Sie fest, ob das Banner von oben, unten, links oder rechts in seine Endposition gleitet.
-
Geschwindigkeit der Dauer anpassen
Wählen Sie unter den Einstellungen für die Dauer entweder „Schnell“ oder „Langsam“ aus. Dies bestimmt die allgemeine Dynamik und das Timing des Übergangs.
-
Konfigurieren Sie die Animationsverzögerung
Wählen Sie eine kurze, mittlere oder lange Verzögerung, bevor die Animation ausgelöst wird. Durch die Einstellung einer Verzögerung wird sichergestellt, dass die Komponente nach dem Einblenden in den Ansichtsbereich eine bestimmte Zeit lang wartet, was sich ideal für die Erstellung gestaffelter Einblendeffekte eignet.
-
Vorschau Ihrer Effekte
Klicken Sie auf die Schaltfläche „Vorschau abspielen“ am unteren Rand des Einstellungsfensters für die Animation, um vor dem Speichern zu sehen, wie Ihre Konfiguration aussieht.
Tips und Tricks:
Profi-Tipps:
-
Verwenden Sie das Reset-Symbol neben jeder Einstellungszeile, wenn Sie Ihre Konfigurationen schnell löschen und zum Standardzustand zurückkehren möchten.
-
Wenn Sie die Verzögerungen auf die verschiedenen Komponenten der Seite verteilen, entsteht ein deutlich raffinierteres, professionelleres Erscheinungsbild.
Hinweise:
-
Behalten Sie Ihre Zielgruppe im Blick, da sehr dynamische Animationen wie „Spin & Pop“ auf stark textlastigen oder seriösen Landingpages ablenkend wirken können.