Wix Editor: Eine Animation hinzufügen und anpassen
4 min
Verwende Animationen, um deine Website zum Leben zu erwecken. Füge Effekte wie „Einschweben“ und „Ausdehnen“ hinzu, um fantasievolle, ansprechende Seiten zu erstellen. Du kannst auswählen, wie und wann deine Animationen abgespielt werden sollen - nur einmal, beim Scrollen, in Loop und mehr.
Du kannst Animationen auf eine Vielzahl von Elementen anwenden und sogar unterschiedliche Effekte auf dasselbe Element auf deiner Desktop- und Mobile-Website anwenden. Unsere Mobile-Animationen sind für kleinere Bildschirme geeignet, sodass du deine Besucher auf jedem Gerät beeindrucken kannst.
In diesem Artikel erfährst du mehr über folgende Themen:
Probleme mit deiner Animation?
Folge unseren Schritten hier, damit sie auf deiner Live-Website wie erwartet funktionieren.
Animation zu einem Element hinzufügen
Füge eine Animation zu deinen Elementen hinzu, um deine Website dynamisch und ansprechend zu gestalten. Jede Animation hat ihren eigenen Effekt, sodass du sie mit verschiedenen Elementen kombinieren kannst und bei deinen Besuchern einen bleibenden Eindruck hinterlässt.
Tipp:
Du kannst einer Gruppe von Elementen eine Animation hinzufügen, indem du die Gruppe auswählst und auf das Symbol für Animation 
klickst.
klickst.Um eine Animation hinzuzufügen:
- Klicke in deinem Editor auf das entsprechende Element.
- Klicke auf das Symbol für Animation .
- Wähle eine Animation aus den verfügbaren Optionen aus.
- Entrance: Die Animation wird einmal abgespielt, wenn das ausgewählte Element auf dem Bildschirm angezeigt wird.
- Loop: Die Animation wird in einer Endlosschleife abgespielt.
- Scroll: Die Animation wird abgespielt, wenn das Element in die Ansicht gescrollt wird.
Hinweis:
Elemente in deiner Kopfzeile werden nur einmal beim ersten Besuch der Seite animiert.
Eine Animation anpassen
Nachdem du eine Animation zu einem Element hinzugefügt hast, kannst du diese so anpassen, dass sie sich so verhält, wie du möchtest und wie es zu deiner Website passt.
Passe Einstellungen wie Leistung, Richtung und Verzögerung an, um deine Besucher zu beeindrucken und zu begeistern.
Hinweis:
Die verfügbaren Anpassungsoptionen hängen von der ausgewählten Animation ab.
Um die Animation anzupassen:
- Klicke in deinem Editor auf das entsprechende Element.
- Klicke auf das Symbol für Animation .
- Klicke auf Anpassen und verwende die folgenden Optionen, um deine Animation anzupassen:
- Leistung: Klicke auf das Dropdown-Menü und wähle aus, wie stark die Animation beim Abspielen ist.
- Richtung: Wähle, aus welcher Richtung die Animation ausgeführt wird (z. B. im Uhrzeigersinn oder von rechts).
- Abstand: Verwende den Schieberegler, um den Abstand zwischen dem Start- und dem Endpunkt des Effekts zu ändern.
- Dauer: Verwende den Schieberegler, um festzulegen, wie lange die Animation abgespielt werden soll.
- Verzögerung: Verwende den Schieberegler, um die Verzögerung zwischen dem Laden der Seite und dem Beginn der Animation zu erhöhen oder zu verringern.
- Animationstyp: Wähle beim Scrollen zwischen In-, Out- oder kontinuierlicher Animation.
- Bewegungsstil: Wähle die Intensität der Bewegung aus, zum Beispiel leicht oder mäßig.
Animationen zu der mobilen Version deiner Website hinzufügen
Du kannst nicht nur Animationen zu Elementen auf deiner Desktop-Website hinzufügen, sondern sie auch zu der mobilen Version deiner Website hinzufügen, damit deine Besucher ein großartiges Browser-Erlebnis auf all ihren Geräten erhalten.
Animationen für Mobile wurden speziell für kleinere Bildschirmauflösungen und -größen entwickelt, sodass du dir keine Gedanken über die Abstände machen musst.
Hinweis:
Animationseffekte, die du auf dem Desktop hinzufügst, werden nicht auf deine Mobile-Website übertragen, da sie für unterschiedliche Bildschirmgrößen optimiert sind. Wenn du möchtest, dass ein Element auch in der Mobile-Ansicht Mobile animiert wird, folge den untenstehenden Schritten.
Um eine Animation zu der mobilen Version hinzuzufügen:
- Öffne deinen Mobile-Editor.
- Klicke auf das entsprechende Element.
- Klicke auf das Symbol für Animation .
- Wähle eine Animation aus den verfügbaren Optionen aus.
Wichtiger Hinweis zu Velo:
Wenn du Velo (Code) verwendest, um ein Element ein- oder auszublenden, muss die Animation auch über Velo eingestellt werden.