Einführung
Sitely verwenden
Elemente
Anleitungen
Zu diesem Thema ist eine Videoanleitung verfügbar – hier klicken, um sie anzusehen
In Sitely können Sie Elemente Ihrer Website mit Animationen zum Leben erwecken. Es gibt drei Haupttypen::
Eine einmalige Animation erzeugt einen Effekt, wenn ein Element erstmals erscheint. Es stehen viele Effekte zur Auswahl, aber auf dem Sitely-Canvas sind sie nicht sichtbar; Sie müssen eine Vorschau Ihrer Website anzeigen, um sie zu sehen.
Sobald ein Element in den Sichtbereich kommt, startet die Animation. Sie kann entweder sofort beim Erscheinen beginnen oder erst nach weiterem Scrollen. Sie können steuern, wie weit das Element gescrollt sein muss, bevor die Animation beginnt. Befindet sich das Element beim Laden der Seite bereits im Sichtbereich, startet die Animation sofort.
Sie können außerdem Verzögerung und Dauer der Animation steuern. Das ist hilfreich, wenn Sie mehrere Elemente animieren und sie für einen fließenderen Effekt zu unterschiedlichen Zeiten starten lassen möchten.
In diesem Beispiel wurde Text so eingestellt, dass er animiert wird, nachdem er eine feste Position im Browser-Viewport erreicht. Die Animation ist so konfiguriert, dass sie 5-mal wiederholt wird, bevor sie stoppt. Wenn Sie den animierten Text nicht sehen, scrollen Sie, bis er startet, oder vergrößern Sie die Höhe Ihres Browserfensters – der Start ist 600 px vom unteren Rand des Viewports festgelegt.
Dies ist ein Beispiel für animierten Text mit dem Zoom-Effekt in Kombination mit der Option „Leicht nach oben bewegen“.
Nur als Hinweis: Zu viele Animationen können Besucherinnen und Besucher nerven, besonders wenn sie wie Werbung wirken. Nutzen Sie sie daher mit Bedacht und übertreiben Sie es nicht – insbesondere nicht mit sich wiederholenden Animationen. Animationen im oberen Seitenbereich können zudem den Eindruck erwecken, die Seite lade langsam.
An das Scrollen gekoppelte Animationen verleihen Ihrer Website eine dynamische Anmutung. Sie können mit Effekten wie vertikaler und horizontaler Bewegung, Skalierung, Drehung, Unschärfe und Änderung der Deckkraft experimentieren.
Jeder Effekt hat einen „Viewport“-Bereich, der steuert, wann die Animation beim Scrollen beginnt und endet. Ein Element beginnt beispielsweise normalerweise zu bewegen, wenn es in den Viewport eintritt, und hört auf, wenn es ihn verlässt.
Sie können außerdem festlegen, wo die Animation am Element ansetzt: oben, mittig oder unten. Das ist besonders praktisch für Animationen nahe dem Seitenanfang.
Hier eine Übersicht über einige Effekte:
Im Beispiel hier haben wir auf verschiedene Elemente einen Deckkraft-Effekt angewendet, um beim Scrollen einen wechselnden Farbeindruck zu erzeugen.
Jeder Effekt hat eigene Einstellungen, etwa die Geschwindigkeit bei Scrolleffekten oder den Rotationswinkel. Durch das Kombinieren mehrerer Effekte können Sie sehr kreativ werden und Ihre Website richtig hervorheben!
In diesem Beispiel wurde der Effekt „Vertikale Bewegung“ auf vier Boxen angewendet. Beim Scrollen bewegen sich die Boxen nach oben und geben darunter verborgenen Text frei. Jede Box bewegt sich unterschiedlich weit, da sie mit unterschiedlichen Geschwindigkeiten konfiguriert wurden – grundsätzlich gilt: Je höher die Geschwindigkeit, desto früher erreicht das Element sein Ziel am Ende der Animation.
Ein
Schritt
nach
dem anderen
Alle Animationen werden über das Stil-Panel auf der rechten Seite unter dem Abschnitt „Scroll-Effekte“ angewendet. Dort finden Sie die Option für einmalige Animationen. Wenn Sie diese auswählen, erhalten Sie eine Reihe von Effekten zur Auswahl. Wählen Sie einfach einen Effekt, um ihn auf das ausgewählte Element auf dem Canvas anzuwenden. Wenn Sie die Option „Andere“ wählen, erscheint eine zusätzliche Liste mit weiteren Animationen.
Wenn Sie eine Animation auswählen, werden weitere Optionen angezeigt: Sie können die Bewegungsart, die Dauer, eine Startverzögerung sowie die Anzahl der Wiederholungen festlegen. Eine letzte Option legt die Entfernung vom unteren Rand des Browser-Viewports fest, die das Element erreichen muss, bevor die Animation startet. Ohne einen solchen Offset kann es passieren, dass die gesamte Animation beginnt und endet, bevor sie jemand auf der Seite sieht.
Scroll-Animationen werden angewendet, indem Sie im Stil-Panel den Bereich „Scroll-Effekte“ öffnen und die Option „Beim Scrollen animieren“ wählen. Dort finden Sie alle grundlegenden Scroll-Effekte, die auf Elemente Ihres Canvas angewendet werden können. Wählen Sie einfach einen Effekt aus und passen Sie anschließend die Einstellungen an, bis das gewünschte Ergebnis entsteht.
Sie passen die Einstellungen an, indem Sie rechts neben dem Effektnamen auf das Zahnrad-Symbol klicken. Es sieht so aus:
Bevor wir in die Einstellungen einsteigen, ein kurzer Überblick darüber, wie Scroll-Animationen funktionieren.
Das Scrollen einer Webseite bedeutet im Wesentlichen, dass der Seiteninhalt vom unteren Rand des Browser-Viewports nach oben bewegt wird. Eine Scroll-Animation kann daher erst beginnen, wenn das animierte Element am unteren Rand des Viewports erscheint, und nur enden, wenn es den oberen Rand erreicht. Natürlich möchten wir nicht immer, dass eine Animation ganz unten im Browserfenster startet, und auch nicht immer warten, bis sie ganz oben stoppt. Deshalb erlaubt Sitely, einen Bereich des Viewports festzulegen, in dem die Aktion stattfindet – zur Klarheit nennen wir diesen Bereich „Aktionsfenster“. Dabei handelt es sich im Grunde um den Teil des Browserfensters, den Sie als Bewegungszone definieren.
Mit einer einfachen grafischen Oberfläche lässt sich dieses „Aktionsfenster“ in Sitely sehr leicht einrichten. Wenn Sie auf das Einstellungs-Symbol eines Effekts klicken, erscheint ein Popup für die Konfiguration. Links im Popup sehen Sie eine grafische Darstellung eines Gerätescreens mit zwei Markern. Verschieben Sie diese Marker nach oben oder unten, um Ihr „Aktionsfenster“ zu definieren. In diesem Beispiel stehen die Marker auf 60 % (oben) und 75 % (unten). Der weiße Bereich dazwischen ist unser „Aktionsfenster“, in dem der Effekt stattfindet. Diese Einstellung wurde auch im obigen Beispiel mit den verschiebenden Boxen verwendet.
Rechts im Popup befinden sich effektbezogene Einstellungen. In unserem Beispiel der vertikalen Bewegung haben wir eine Geschwindigkeit von 1,5-mal der Scroll-Geschwindigkeit gewählt und festgelegt, dass die Animation startet, wenn die Unterkante des Elements in das „Aktionsfenster“ eintritt. Das Ergebnis: Sobald die Unterkante des Elements die 75%-Marke überschreitet, beginnt es, sich nach oben zu bewegen, bis es die 60%-Marke erreicht. Dann stoppt es. Dabei wird angenommen, dass der Startpunkt der Bewegung die Position ist, an der das Element auf dem Canvas platziert wurde. Möchten wir jedoch, dass es früher startet und seine Bewegung an der Canvas-Position endet, klicken wir auf die Schaltfläche „Swap“, um den Effekt umzudrehen. Das Element beginnt dann unterhalb seiner aktuellen Canvas-Position und bewegt sich nach oben in seine Canvas-Position. Der Startpunkt der Bewegung wird durch den unteren Zonenmarker bestimmt.
Jeder Animationseffekt hat leicht unterschiedliche Einstellungen, folgt aber denselben Grundprinzipien. Legen Sie ein „Aktionsfenster“ fest und konfigurieren Sie dann die Einstellungen, um den gewünschten Effekt zu erzielen. Bei horizontalen Animationen können Sie beispielsweise die Bewegungsrichtung festlegen. In diesem Beispiel haben wir ein Element so eingestellt, dass es sich von seiner Canvas-Position nach rechts bewegt. Die untere Reihe der Richtungsschaltflächen definiert die Startposition des Elements, während die obere Reihe die Bewegungsrichtung angibt.
Bei horizontalen Animationen ist zu beachten, dass die Bewegungsstrecke unbegrenzt ist – das Element bewegt sich im Verlauf des Scrollens durch das „Aktionsfenster“ im Zweifel bis über den Bildschirmrand hinaus. Je größer das „Aktionsfenster“, desto länger dauert die Animation. Möchten Sie die horizontale Bewegung begrenzen, damit das Element nicht komplett aus dem Bild verschwindet, stellen Sie beide Reihen der Richtungsschaltflächen auf „Canvas“. Dadurch können Sie eine Scroll-Geschwindigkeit festlegen, die die Bewegung faktisch begrenzt. Die Animation startet dann, wenn das Element in das „Aktionsfenster“ eintritt, und stoppt, wenn es es wieder verlässt. Ist die Scroll-Geschwindigkeit niedrig genug (typisch unter 1x), stoppt die Animation, bevor das Element den Bildschirmrand erreicht. Hier ein Beispiel: Es nutzt ein sehr kleines „Aktionsfenster“ und eine geringe Geschwindigkeit. Würde die Fenstergröße erhöht, würde sich das Element weiter nach rechts bewegen, bis der Seiten-Scroll den oberen Rand des „Aktionsfensters“ erreicht
Die „Animate on Hover“-Animation ist für die meisten Seitenelemente verfügbar und ermöglicht Effekte, die die Aufmerksamkeit der Betrachterinnen und Betrachter auf sich ziehen.
Animationen können eine große Bereicherung für Ihre Website sein, wenn sie durchdacht und mit einem klaren Zweck eingesetzt werden. Es gibt zudem viele Variationen, wie sie eingestellt werden können, um bestimmte Effekte zu erzielen – es kommt darauf an, alles auszuprobieren und zu verstehen, was passiert. In mancher 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 macht. Möchten Sie, dass er das wieder tut – dann gehört der Knüppel genau dorthin. Spielen Sie also mit den Animationsoptionen und lernen Sie, wie jede Option funktioniert. Mit etwas Übung werden Sie zur Animationsmeisterin bzw. zum Animationsmeister. Vielleicht erreichen Sie nicht ganz die schwindelerregenden Höhen von Walt Disney, aber Sie werden großartige Effekte auf Ihren Sitely-Webseiten umsetzen können.
Für den Einstieg haben wir eine Sitely-Projektdatei mit allen Animationen dieser Seite vorbereitet – den Link finden Sie unten. Öffnen Sie die Projektdatei und wählen Sie die Animationen aus. Sehen Sie sich anschließend die Einstellungen an, mit denen sie erstellt wurden.
Bitte melden Sie uns alle Mängel in dieser Dokumentation, wir beheben sie so schnell wie möglich!
Aktualisiert für Sitely 6
Diese Website verwendet Cookies.
Bitte lesen Sie unsere Datenschutzerklärung für weitere Details.
