Studio Editor: Eine Scroll-Animation hinzufügen
5 min
In diesem Artikel
- Eine Scroll-Animation hinzufügen
- Eine Scroll-Animation anpassen
- Eine Scroll-Animation entfernen
- Fehlerbehebung bei Scroll-Animationen
- Der Scroll-Effekt setzt zu spät ein
- (Nur Mobile) Der Scroll-Effekt setzt nicht im Querformat ein
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.
Tipp:
Sieh dir unseren Kurs der Wix Studio Academy an und erfahre mehr über das Hinzufügen von Animationen und Interaktionen.
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 Animationstyp (In oder Out) aus.
Um eine Scroll-Animation hinzuzufügen:
- Wähle das entsprechende Element aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
.
- Klicke auf den Tab Animationen und Effekte
. - Klicke unter Scrollen auf + Hinzufügen.
- Richte die Animation ein:
- Wähle unter Animiertes Element, welches Element die Animation anzeigt.
- Wähle unter Animationstyp eine Option aus, um festzulegen, ob das Element in seine ursprüngliche Platzierung hinein oder aus dieser heraus animiert wird:
- In: Der Endpunkt der Animation ist das aktuelle Design auf der Arbeitsfläche (z. B. das Element wird beim Scrollen eingeblendet).
- Out: Der Ausgangspunkt der Animation ist das aktuelle Design auf der Arbeitsfläche (z. B. das Element wird ausgeblendet, wenn du nach unten scrollst)
- Wähle eine Animation aus der Liste aus.
Tipp: Fahre mit der Maus über Animationen, um eine Vorschau zu sehen.
Hinweise:
- Es ist nicht möglich, gepinnte Elemente als Trigger verwenden, da es immer an der gleichen Position bleibt (relativ zum Viewport des Besuchers).
- Stelle sicher, dass auf der Seite genug Platz ist, damit die Scroll-Animation richtig angezeigt wird. Wenn sich dein Element beispielsweise in der ersten oder letzten Spalte der Seite befindet, siehst du die Scroll-Animation möglicherweise nicht.
Suchst du nach horizontalem Scrollen?
Die Optionen im Inspektor gelten für vertikales Scrollen, aber du kannst unserer Anleitung in der Wix Academy folgen, um eindrucksvolle horizontale Scroll-Effekte zu erstellen.
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 aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Klicke auf den Tab Animationen und Effekte .
- Klicke auf die Scroll-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 Scrollvorgangs die Animation beginnt und endet. 0 % ist der untere und 100 % der obere Rand des Bildschirms. Wenn du zum Beispiel den Bereich auf 0 %-50 % festlegst, beginnt die Animation, wenn sich das Element am unteren Bildschirmrand befindet und endet, wenn es die Mitte erreicht.
Tipp:
Aktiviere den Schieberegler 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 das Symbol für Inspektor öffnen .
- Klicke auf den Tab Animationen und Effekte .
- Fahre mit der Maus über die Animation und klicke auf das Symbol für Weitere Aktionen
. - Klicke auf Entfernen.
Fehlerbehebung bei Scroll-Animationen
Der Scroll-Effekt setzt zu spät ein
Wenn deine Scroll-Animation zu spät beginnt oder sich nicht wie erwartet verhält, kannst du die Einstellungen für Animationstyp (In oder Out) und Animationsbereich anpassen, um das Problem zu beheben.
Sieh dir die Video-Anleitung an, um zu herauszufinden, was die Verzögerung verursacht und wie du sie beheben kannst.
(Nur Mobile) Der Scroll-Effekt setzt nicht im Querformat ein
Wenn du die Website deines Kunden auf einem Mobilgerät anzeigst, funktioniert die Scroll-Animation möglicherweise nicht mehr, wenn der Besucher seinen Bildschirm während des Browsens dreht. Mit anderen Worten: Wenn Besucher beim Scrollen ihr Telefon in die horizontale Richtung (Querformat) drehen, wird die Scroll-Animation nicht angezeigt.
Um dieses Problem zu beheben, können Besucher die Seite im Querformat aktualisieren. Dadurch wird die Animation „neu gestartet“.