Studio Editor: Über Animationen
3 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.
Hinweis:
Die Größe der Animation wird für deinen spezifischen Browser berechnet, wenn die Seite zum ersten Mal geladen wird. Wenn du die Größe des Browserfensters änderst (indem du die Ziehpunkte ziehst), wird die Animation möglicherweise nicht richtig angezeigt. Wir empfehlen, die Seite zu aktualisieren, um eine optimale Anzeige zu erzielen.
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.
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.
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.
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.
War das hilfreich?
|