Wix Editor: Eine Animation hinzufügen und anpassen
5 Min. Lesezeit
Verwende Animationen, um deine Website zum Leben zu erwecken. Füge Effekte wie „Einschweben“ und „Ausdehnen“ hinzu, um fantasievolle, ansprechende Seiten zu erstellen. Stelle deine Animationen so ein, dass sie einmal, in Endlosschleife oder beim Scrollen deiner Website angezeigt werden, und lenke die Aufmerksamkeit der Besucher auf deinen Inhalt.
Du kannst Animationen auf eine Vielzahl von Elementen anwenden. Du kannst sogar verschiedene Effekte auf dasselbe Element sowohl auf deinen Desktop-Seiten als auch in der mobilen Version der Website anwenden. Die Animation auf deiner mobilen Website ist auf kleinere Bildschirme eingestellt, damit du deine Besucher auch auf dieser Ebene begeistern kannst. Mehr über Animationseffekte erfahren
In diesem Artikel erfährst du mehr über folgende Themen:
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.
Um eine Animation hinzuzufügen:
- Klicke im 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 kontinuierlich in einer Schleife abgespielt.
- Scroll: Die Animation wird abgespielt, wenn das Element in die Ansicht gescrollt wird.
Hinweis:
Entferne Animationseffekte von deinen Elementen, indem du auf dem Element auf das Symbol für Animation 
und dann auf Nichts 
klickst.
und dann auf Nichts klickst.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.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.
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 Aufklappmenü 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 vergrößern oder zu verkleinern.
- Dauer: Verwende den Schieberegler, um festzulegen, wie lange die Animation abgespielt werden soll.
- Verzögerung: Ziehe 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.
Hinweis:
Die verfügbaren Anpassungsoptionen hängen von der ausgewählten Animation ab.
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:
Wenn du möchtest, dass ein Element sowohl in der Desktop- als auch in der mobilen Version deiner Website animiert wird, musst du den Effekt in beiden Editoren hinzufügen. Animationseffekte, die du auf dem Desktop hinzugefügt hast, werden nicht auf deine mobile Website übertragen, da sie für unterschiedliche Bildschirmgrößen optimiert sind.
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.
Wichtig:
Wenn ein Element mithilfe von Velo ausgeblendet/angezeigt wird, müssen die zugehörigen Animationen auch über Velo eingestellt werden. Mehr erfahren (nur auf Englisch verfügbar)
Probleme mit deiner Animation?
Folge unseren Schritten hier, damit sie auf deiner Live-Website wie erwartet funktionieren.
War das hilfreich?
|