Studio Editor: Eine Scroll-Animation hinzufügen
7 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.
Tipp:
Sieh dir unseren Kurs der Wix Studio Academy an und erfahre mehr über das Hinzufügen von Animationen und Interaktionen.
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 Animationstyp (In oder Out) aus.
Um eine Scroll-Animation hinzuzufügen:
- 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
. - 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.
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 das Symbol für Inspektor öffnen .
- Klicke auf den Tab Animationen und Effekte .
- 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.
Den Bereich einer Scroll-Animation festlegen
Lege fest, an welcher Stelle des Scrollens die Animation beginnt und endet. 0 % steht für den unteren Rand des Bildschirms und 100 % für den oberen Rand.
Wenn du zum Beispiel den Bereich auf 0 %-50 % festlegst, beginnt die Animation, wenn sich das Element ganz unten auf dem Bildschirm befindet, und endet, wenn es die Mitte erreicht hat.
Um den Bereich der Scroll-Animation festzulegen:
- 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 .
- Klicke auf die Animation, die du ändern möchtest.
- Klicke auf Animation anpassen
- Ziehe die Punkte unter dem Animationsbereich, um festzulegen, wann sie beginnt und endet.
Tipp: Du kannst auf die Punkte klicken, um den Prozentsatz manuell einzugeben.
Den Animationsbereich testen:
Wenn der Schalter Scrollen für Vorschau aktiviert ist, wird auf dem Schieberegler Animationsbereich ein Hinweis angezeigt, damit du besser verstehst, auf welchem Teil des Bildschirms die Animation angezeigt wird.
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 eine Scroll-Animation nicht wie gewünscht abläuft, musst du dir zwei Eigenschaften ansehen, den Animationspfad und den Animationsbereich. Folge den Schritten in diesem Video-Tutorial, um 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“.
War das hilfreich?
|