Studio Editor: Über Animationen

2 Min. Lesezeit
Wenn du unsere Animationen in deine Designs integrierst, kannst du diese wirklich auf die nächste Stufe heben. Der Studio Editor bietet 5 verschiedene Animationstypen, basierend darauf, wann sie angezeigt werden sollen.
Lass Animationen erscheinen, wenn Besucher mit der Maus über ein Element fahren, es anklicken oder an ihm vorbei scrollen. Du kannst auch eine Entrance-Animation hinzufügen, wenn das Element zum ersten Mal geladen wird oder eine, die sich in einer Endlosschleife befindet — alles ohne eine einzige Zeile Code.

Entrance-Animation

Das Hinzufügen einer Entrance-Animation zu einem Element ist eine großartige Möglichkeit, die Aufmerksamkeit der Besucher darauf zu lenken. Die Animation wird angezeigt, wenn das Element zum ersten Mal sichtbar wird, sodass sie sofort ins Auge fällt. Es gibt viele Arten, aus denen du wählen und die genauen Bedürfnisse deines Kunden anpassen kannst.
Beispiel für eine Entrance-Animation, die auf eine gesamte Seite angewendet wird und sie beim Laden angezeigt wird

Mouseover- und Klick-Interaktionen

Füge tolle Effekte hinzu, die angezeigt werden, wenn Besucher mit der Maus über ein Element fahren oder darauf klicken. Du kannst Elemente beim Mouseover oder Klicken verändern, verschieben oder neue Inhalte anzeigen.
Wähle aus einer Reihe vorgefertigter Effekten oder erstelle einen individuellen Effekt mit deinen genauen Spezifikationen. Verwalte Timing, Reihenfolge und Easing, um alles zusammenzufügen und zeige dann das Endergebnis direkt im Editor an.
Du kannst auch Interaktionen zwischen Elementen erstellen, sodass ein Element dadurch animiert wird, dass man mit der Maus über ein anderes Element fährt oder es anklickt.
Im folgenden Beispiel werden der Button und das Bild verschoben, wenn man mit der Maus über einen Absatz fährt.
GIF, das zeigt, wie Interaktionen auf einer Live-Website aussehen

Scroll-Animationen

Steigere die Interaktion mit deiner Website und erstelle interessante Effekte mit scrollgesteuerten Animationen. Der Verlauf der Animation steht in direktem Zusammenhang mit der Bildlaufposition und läuft vorwärts und rückwärts, wenn die Besucher nach oben oder unten scrollen.
Du kannst auch Interaktionen zwischen Elementen erstellen, sodass ein Element animiert wird, wenn man an einem anderen Element vorbei scrollt.
Im folgenden Beispiel wird der Repeater größer, wenn du am Titel vorbei scrollst.
Beispiel für eine Scroll-Animation auf einer Live-Website

Loop-Animation

Erzeuge mit Loop-Animationen, die sich in kontinuierlicher Schleife wiederholen, ein Gefühl von Bewegung in deinem Design. Du kannst jedem Element eine Loop-Animation hinzufügen, die den Besuchern auffällt. Einige sind eher subtil, während andere die Aufmerksamkeit auf sich ziehen.
Beispiel für ein Textmaskenelement mit einer Loop-Animation auf einer Live-Website

War das hilfreich?