Animationen | Sitely-Dokumentation

In Sitely können Sie Elemente auf Ihrer Website durch Animationen zum Leben erwecken. Es gibt zwei Haupttypen: Die eine tritt auf, wenn ein Element auf dem Bildschirm erscheint, und die andere ist mit dem Scrollen auf der Seite verknüpft.

Einmalige Animationen

Einmalige Animationen erzeugen einen Effekt, wenn ein Element zum ersten Mal angezeigt wird. Sie haben viele Effekte zur Auswahl, aber diese werden nicht auf der Sitely-Leinwand angezeigt – um sie zu sehen, müssen Sie eine Vorschau Ihrer Website aufrufen.

Wenn ein Element in den Sichtbereich gelangt, wird die Animation gestartet. Sie kann entweder sofort beginnen, wenn das Element sichtbar wird, oder nach ein wenig mehr Scrollen. Sie können steuern, wie weit das Element scrollen muss, bevor die Animation startet. Wenn das Element bereits beim Laden der Seite auf dem Bildschirm ist, startet die Animation sofort.

Sie können auch die Verzögerung und die Dauer der Animation steuern. Dies ist besonders nützlich, wenn Sie mehrere Elemente animieren und möchten, dass sie zu unterschiedlichen Zeiten starten, um einen fließenderen Effekt zu erzielen.

In the example here, text has been set to animate after coming into a fixed position in the browser viewport. It’s been set to repeat the animation 5 times before stopping. If you don’t see the animated text, scroll the page until it starts, or increase the height of your browser window - it’s been set to begin 600 px from the bottom of the browser viewport.

This is an example of animated text using the Zoom effect, coupled with the ‘Move Up Subtle’ option

Ein Hinweis: Zu viel Animation kann Besucher manchmal nerven, besonders wenn sie an Werbung erinnert. Verwenden Sie Animationen daher mit Bedacht und vermeiden Sie es, sie zu oft zu wiederholen. Zudem könnten Animationen am oberen Rand der Seite den Eindruck erwecken, dass die Seite langsam lädt.

Einmalige Animationen anwenden

Animationen beim Scrollen

Animationen, die an das Scrollen gebunden sind, verleihen Ihrer Website eine dynamische Note. Sie können mit verschiedenen Effekten wie vertikalem und horizontalem Scrollen, Skalierung, Rotation, Unschärfe und Änderung der Deckkraft experimentieren.

Jeder Effekt hat einen Sichtbereichsbereich, der steuert, wann die Animation beim Scrollen beginnt und endet. Zum Beispiel beginnt ein Element normalerweise zu bewegen, wenn es in den Sichtbereich gelangt und stoppt, wenn es ihn verlässt.

Sie können auch wählen, wo die Animation auf dem Element beginnen soll: oben, in der Mitte oder unten. Dies ist besonders nützlich für Animationen am oberen Rand der Seite.

Hier sind einige der Effekte:

Vertikales Scrollen: Dies ähnelt dem Parallax-Effekt, bei dem sich Elemente mit unterschiedlichen Geschwindigkeiten beim Scrollen bewegen.
Horizontales Scrollen: Ähnlich wie das vertikale Scrollen, jedoch in horizontaler Richtung.
Skalierung: Ändert die Größe des Elements während des Scrollens.
Rotation: Dreht das Element während des Scrollens.
Blur: Macht das Element unscharf.
Deckkraft: Passt die Transparenz des Elements an.

In the example here, we’ve applied an opacity effect to the various elements to create a changing color effect as the page is scrolled.

Changing Colours

In this example, we can see the ‘vertical Motion’ effect applied to four boxes. As the page scrolls, the boxes move upwards - revealing some hidden text beneath them. Each box moves a slightly different distance because they’ve all been set to travel at different speeds - essentially, the faster the speed, the sooner the element reaches its destination at the end of the animation.

One

Step

At a

Time

Jeder Effekt hat seine eigenen Einstellungen, wie z.B. die Geschwindigkeit für Scroll-Effekte und den Rotationswinkel. Sie können wirklich kreativ werden, indem Sie Effekte kombinieren und Ihrer Website ein besonderes Flair verleihen!

Applying One Time Animations

Alle Animationen werden über das Stil-Panel auf der rechten Seite des Bildschirms unter dem Abschnitt Scroll-Effekte angewendet. Dort sehen Sie die Option, einmalige Animationen zu nutzen. Wenn Sie diese Option auswählen, werden Ihnen verschiedene Effekte angezeigt, die auf das ausgewählte Element auf der Leinwand angewendet werden können. Wenn Sie die Option Andere auswählen, erscheint eine sekundäre Liste von Animationen, die Ihre Auswahlmöglichkeiten noch erweitern.

Wenn Sie eine Animation ausgewählt haben, erscheinen mehrere weitere Optionen, die es Ihnen ermöglichen, verschiedene Bewegungsarten für Ihre Animation auszuwählen, die Dauer der Animation festzulegen, eine Verzögerungszeit einzustellen und eine Anzahl von Wiederholungen zu definieren, bevor die Animation stoppt. Eine letzte Option ermöglicht es Ihnen, die Entfernung vom unteren Rand des Browser-Sichtfensters festzulegen, die das Element erreichen muss, bevor die Animation startet. Wenn Sie keinen Offset einstellen, könnte die gesamte Animation starten und enden, bevor jemand sie tatsächlich auf der Seite sieht.

Scroll-Animationen anwenden
Scroll-Animationen werden durch Auswahl der Option Während des Scrollens animieren im Abschnitt Scroll-Effekte des Stil-Panels angewendet. Dort finden Sie alle grundlegenden Scroll-Effekte, die auf Elemente auf Ihrer Leinwand angewendet werden können. Wählen Sie einfach einen Effekt aus und passen Sie die Einstellungen an, um den gewünschten Effekt zu erzielen.

Die Einstellungen passen Sie an, indem Sie auf das Einstellungssymbol rechts neben dem Effektnamen klicken. Es sieht so aus:

Bevor wir zu den Einstellungen kommen, sollten wir kurz darüber sprechen, wie Scroll-Animationen funktionieren.

Beim Scrollen einer Webseite wird der Seiteninhalt im Wesentlichen vom unteren Rand des Browser-Sichtfensters nach oben verschoben. Daher kann eine Scroll-Animation erst beginnen, wenn das animierte Element am unteren Rand des Sichtfensters erscheint, und sie endet, wenn es den oberen Rand des Sichtfensters erreicht. Offensichtlich wollen wir nicht immer, dass eine Animation ganz unten im Browserfenster startet, und wir wollen auch nicht immer warten, bis sie ganz oben endet. Daher ermöglicht es Ihnen Sitely, einen Sichtbereich festzulegen, in dem die Aktion stattfindet – zur Klarstellung nennen wir diesen Bereich Aktionsfenster. Dabei handelt es sich im Wesentlichen um den Bereich des Browserfensters, in dem sich die Dinge bewegen.

Sitely macht es sehr einfach, dieses Aktionsfenster einzurichten, indem es eine einfache grafische Benutzeroberfläche für die Einstellungen bereitstellt. Wenn Sie auf das Einstellungssymbol eines Effekts klicken, sehen Sie ein Popup, in dem die Einstellungen vorgenommen werden. Auf der linken Seite des Popups wird ein grafisches Gerätedisplay dargestellt. Innerhalb dieses Displays befinden sich zwei Markierungen. Sie können diese Markierungen nach oben oder unten verschieben, um Ihr Aktionsfenster zu erstellen. Im folgenden Beispiel wurden die Markierungen auf 25 % (oben) und 75 % (unten) gesetzt. Der weiße Raum dazwischen ist unser Aktionsfenster, in dem der Effekt stattfindet.

Auf der rechten Seite des Popups befinden sich Effektspezifische Einstellungen. In diesem Beispiel einer vertikalen Bewegungsanimation haben wir eine Geschwindigkeit von 2x der Scrollgeschwindigkeit festgelegt und der Animation gesagt, dass sie startet, wenn die Oberseite des animierten Elements im Aktionsfenster liegt. Das Endergebnis? Wenn der untere Rand des Elements die 75%-Markierung überschreitet, beginnt das Element, sich vertikal nach oben zu bewegen, bis es die 25%-Markierung erreicht. An diesem Punkt stoppt es. Dies setzt voraus, dass der Startpunkt der Bewegung des Elements die Position ist, an der es auf der Leinwand platziert wurde. Aber was ist, wenn wir wollen, dass es früher beginnt und seine Bewegung an seiner Leinwandposition endet? Dazu würden wir auf die Schaltfläche Tauschen klicken, um den Effekt umzukehren. Im Wesentlichen beginnt das Element dann unter seiner aktuellen Position auf der Leinwand und bewegt sich nach oben zu seiner Position auf der Leinwand. Der Punkt, an dem die Bewegung des Elements beginnt, wird durch die untere Zonenmarkierung bestimmt. Eine animierte Darstellung des Effekts wird in der grafischen Benutzeroberfläche angezeigt, sodass Sie eine Vorschau sehen können, wie der Effekt aussehen wird.

Einstellungen variieren

Jeder Animationseffekt hat leicht unterschiedliche Einstellungen, aber alle folgen denselben allgemeinen Prinzipien. Stellen Sie ein Aktionsfenster ein und wenden Sie dann die gewünschten Einstellungen an, um den gewünschten Effekt zu erzielen. Bei horizontalen Animationen können Sie beispielsweise die Bewegungsrichtung einstellen. Im folgenden Beispiel haben wir ein Element so eingestellt, dass es sich von seiner Leinwandposition nach rechts bewegt. Die untere Reihe von Richtungsschaltflächen gibt die Startposition des Elements an, während die obere Reihe von Richtungsschaltflächen die Bewegungsrichtung angibt.

Bei horizontalen Animationen ist zu beachten, dass die Bewegungsroute unbegrenzt ist – das Element bewegt sich im Wesentlichen während der Scrollzeit durch das Aktionsfenster außerhalb des Bildschirmrands. Je größer das Aktionsfenster, desto länger dauert die Animation. Wenn Sie die horizontale Bewegung einschränken möchten, sodass das Element nicht vollständig vom Bildschirm verschwindet, können Sie beide Richtungsschaltflächen auf Leinwand setzen. Dadurch können Sie eine Scroll-Geschwindigkeit festlegen, die die Bewegung im Wesentlichen einschränkt. Dies führt dazu, dass die Animation startet, wenn das Element in das Aktionsfenster eintritt, und stoppt, wenn es es verlässt. Wenn die Scroll-Geschwindigkeit niedrig genug eingestellt ist (normalerweise unter 1x), stoppt die Animation, bevor das Element den Bildschirm verlässt.

Schlussgedanken

Animationen können eine großartige Bereicherung für Ihre Website sein, wenn sie durchdacht und mit einem Ziel eingesetzt werden. Es gibt auch viele verschiedene Möglichkeiten, wie sie eingerichtet werden können, um bestimmte Effekte zu erzielen – es geht darum, alles auszuprobieren und zu verstehen, wie es funktioniert. In vielerlei Hinsicht ist es ein bisschen wie das Fliegenlernen mit einem Hubschrauber – drücken Sie den Steuerknüppel in eine bestimmte Richtung und beobachten Sie, was der Hubschrauber tut. Wenn Sie möchten, dass er es wieder tut – das ist die Richtung, in die der Knüppel geht. Spielen Sie also mit den Animationsoptionen herum und lernen Sie, wie jede Option funktioniert. Mit etwas Übung werden Sie ein Animationsmeister. Vielleicht erreichen Sie nicht die schwindelerregenden Höhen von Walt Disney, aber Sie werden in der Lage sein, großartige Effekte auf Ihre Sitely-Webseiten anzuwenden.