Studio Editor: Eine Scroll-Animation hinzufügen
4 Min. Lesezeit
Füge Scroll-Animationen hinzu, um das Surferlebnis ansprechender und einprägsam zu gestalten. Der Verlauf der Animation ist direkt mit der Bildlaufposition verknüpft, sodass ein Element beim Hoch- und Runterscrollen sichtbar wird oder sich verändert.
In diesem Artikel erfährst du mehr über folgende Themen:
Eine Scroll-Animation hinzufügen
Um eine neue Scroll-Animation hinzuzufügen, wähle das Element aus, das diese auslöst. Die von dir gewählte Animation beginnt, wenn Besucher an diesem Element vorbei scrollen. Entscheide dann, welches Element animiert werden soll, und wähle einen Animationspfad aus.
Um eine Scroll-Animation hinzuzufügen:
- Wähle das entsprechende Element oder den Abschnitt aus.
- Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen
. - Klicke auf den Tab Interaktionen
. - Klicke unter Scrollen auf + Hinzufügen.
- Richte die Animation ein:
- Wähle unter Animiertes Element, welches Element die Animation anzeigt.
- Wähle unter Animationspfad eine Option aus, um zu entscheiden, wie die Animation in Bezug auf das von dir entworfene Element beginnt. Du kannst das Design auf der Arbeitsfläche zum Startpunkt (Zu dessen Design) oder Zielpunkt der Animation (Zu dessen Design) machen.
- Wähle eine Animation aus der Liste aus.
Tipp: Fahre mit der Maus über Animationen, um eine Vorschau zu sehen.
Eine Scroll-Animation anpassen
Nachdem du eine Animation ausgewählt hast, richte sie so ein, dass sie sich wie gewünscht verhält. Die verfügbaren Einstellungen hängen von der spezifischen Animation ab, die du ausgewählt hast.
Um eine Scroll-Animation anzupassen:
- Wähle das entsprechende Element oder den Abschnitt aus.
- Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
- Klicke auf den Tab Interaktionen .
- Klicke auf die Animation, die du ändern möchtest.
- Klicke auf Animation anpassen, um die Einstellungen zu ändern:
- Richtung: Wähle die Richtung, aus der die Animation kommen soll (z. B. von links, von oben).
- Skalierung: Lege die Zielgröße für das Element in dieser Animation fest. Zum Beispiel bedeutet 80 %, dass das Element in der Animation um 20 % schrumpft.
- Entfernung: Entscheide, wie weit sich das Element in dieser Animation bewegt.
- Animationsbereich: Lege fest, an welcher Stelle des Scrollens die Animation beginnt und endet. 0 % ist der untere und 100 % der obere Rand des Bildschirms. Wenn du zum Beispiel den Bereich auf 100 % festlegst, beginnt die Animation, wenn das Element ganz unten ist, und endet, wenn es den oberen Rand erreicht hat.
Tipp:
Aktiviere den Schalter Scrollen für Vorschau, um die Animation, die du erstellst, direkt auf der Arbeitsfläche zu sehen.
Eine Scroll-Animation entfernen
Du kannst eine Scroll-Animation jederzeit über das Inspektor-Panel entfernen.
Um eine Scroll-Animation zu entfernen:
- Wähle das entsprechende Element oder den Abschnitt aus.
- Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
- Klicke auf den Tab Interaktionen .
- Fahre mit der Maus über die Animation und klicke auf das Symbol für Weitere Aktionen
. - Klicke auf Entfernen.
War das hilfreich?
|