Wix Harmony Editor: Eine Animation hinzufügen und anpassen
In diesem Artikel
- Animation zu einem Element hinzufügen
- Eine Animation anpassen
- Animationen für deine mobile Website hinzufügen
Mit Animationen bringst du deine Website zum Leben. Sie sorgen für Bewegung und machen dein Design spannender. Wähle je nach gewünschtem Zeitpunkt aus Optionen wie Entrance, Scrollen, Loop und Mauseffekten.
Passe jede Animation an, damit genau der Look entsteht, den du möchtest. Ändere dafür Einstellungen wie Entfernung, Laufzeit und Verzögerung, damit alles zu deiner Vision passt. Alle mobilen Animationen sind für kleinere Bildschirme gemacht, damit deine Website auf jedem Gerät gut aussieht.
Wusstest du schon?
Du kannst auf dasselbe Element verschiedene Animationen und Effekte anwenden.
Animation zu einem Element hinzufügen
Füge deiner Website Bewegung und Energie hinzu, indem du Animationen auf deine Elemente anwendest. Wähle aus vielen Effekten, um jeden Bereich deiner Seite lebendig zu machen und ein Erlebnis zu schaffen, an das sich deine Besucher erinnern.
Um Animationen hinzuzufügen:
- Öffne deinen Editor.
- Klicke auf das relevante Element.
- Klicke auf das Symbol für Animation
in der Aktionsleiste. - Wähle eine Animation aus den verfügbaren Optionen.
- Entrance: Die Animation blendet ein Element auf dem Bildschirm ein – sie läuft nur einmal, wenn das Element zum ersten Mal erscheint.
- Loop: Die Animation wird in einer Endlosschleife abgespielt.
- Scroll: Die Animation wird abgespielt, wenn ein Besucher beim Scrollen auf der Seite näher an das Element herankommt.
- Mouse Effects: Die Animation beginnt sich zu bewegen, wenn der Mauszeiger des Besuchers über dem Element schwebt.
Hinweis:
Elemente in deiner Kopfzeile werden nur einmal animiert, und zwar beim ersten Besuch der Seite.
Eine Animation anpassen
Sobald du einer Element eine Animation hinzugefügt hast, passe sie an, damit sie zum Look and Feel deiner Website passt. Stelle Optionen wie Stärke, Richtung und Verzögerung ein, um genau den Effekt zu erstellen, den du willst, und damit sich deine Besucher einbezogen fühlen.
Hinweis:
Die verfügbaren Anpassungsoptionen hängen von der Animation ab, die du auswählst.
Um die Animation anzupassen:
- Öffne deinen Editor.
- Wähle das passende Element aus.
- Klicke auf das Symbol für Animation in der Aktionsleiste.
- (Falls du das noch nicht getan hast) Wähle eine Animation aus den verfügbaren Optionen aus.
- Klicke auf Anpassen, um deine gewählte Animation einzustellen:
- Stärke: Klicke auf das Dropdown-Menü, um festzulegen, wie stark die Animation beim Abspielen ist.
- Richtung: Wähle aus, aus welcher Richtung die Animation eingeblendet wird, zum Beispiel im Uhrzeigersinn oder von rechts.
- Entfernung: Verwende den Schieberegler, um den Abstand zwischen Anfangs- und Endpunkt des Effekts zu ändern.
- Dauer: Verwende den Schieberegler, um einzustellen, wie lange die Animation abgespielt werden soll.
- Verzögerung: Verwende den Schieberegler, um die Verzögerung zwischen dem Laden der Seite und dem Start der Animation zu verlängern oder zu verkürzen.
- Geschwindigkeit: Ziehe den Schieberegler, um die Geschwindigkeit des Effekts zu ändern. Je kleiner die Zahl, desto schneller ist der Effekt.
- Bewegungsachse: Lege fest, ob sich das Element waagerecht, senkrecht oder auf beiden Achsen bewegt.
- Animationstyp: Wähle beim Scrollen zwischen den Animationstypen hinein, hinaus oder kontinuierlich.
- Drehpunkt: Wähle den Bezugspunkt aus, von dem aus sich das Element bewegt.
- Bewegungsstil: Wähle die Intensität der Bewegung aus, zum Beispiel sanft oder mittel.
Animationen für deine mobile Website hinzufügen
Du kannst Animationen auf deiner mobilen Website genauso hinzufügen wie auf dem Desktop. So genießen Besucher auf jedem Gerät ein ansprechendes Erlebnis. Mobile Animationen sind speziell für kleinere Bildschirme und Auflösungen gemacht, damit alles ohne extra Aufwand perfekt passt.
Hinweis:
Animationen, die du auf dem Desktop hinzufügst, erscheinen auch auf deiner mobilen Website. Du kannst aber für Mobilgeräte eine andere Animation auswählen oder sie deaktivieren, ohne die Desktop-Animation zu ändern.
Um Animationen auf Mobilgeräten hinzuzufügen:
- Öffne deinen Editor.
- Klicke auf das Mobilgerät-
in der oberen rechten Ecke der Seite. - Klicke auf das passende Element.
- Klicke auf das Animation-
in der Aktionsleiste. - Wähle eine Animation aus den verfügbaren Optionen aus.
