So fügen Sie Scroll-Animationen hinzu

‍Sitely legt großen Wert auf das, was man als erste Ebene des Webdesigns bezeichnen könnte: statische visuelle Gestaltung. Das Besuchererlebnis hängt von klassischen Designelementen wie Farbe, Kontrast, Schrift und geometrischem Raum ab. Hier schauen wir uns Sitelys Animationsfunktion an.

‍Die Verwendung des Wortes Erlebnis ist sehr bewusst, denn der Versuch, Animationen zu integrieren, kann sowohl Spaß machen als auch frustrieren (idealerweise mehr Ersteres und weniger Letzteres). Der Grund: Animationen können das gestalterische Gleichgewicht weit stärker stören als statische Elemente. Durch die Illusion von Leben und Bewegung kann man am Ende zu viele oder zu wenige, voneinander losgelöste Teile haben, die nicht zusammenpassen und ihrer Umgebung sogar schaden.

‍Doch richtig eingesetzt lassen diese kurzlebigen „Wesen“ das Design wie eine organische Interaktion wirken. Das Storytelling fließt, und die Inhalte der Seite werden zu freundlichen Einladungen, weiter zu entdecken.

‍Dann mal los.

‍Das ist ein einfaches Design rund um Halloween mit dem Ziel, etwas vom Spaß und der Verrücktheit einzufangen.

‍Scroll-Animationen können auf Bilder, Buttons, Textfelder und Video-Elemente angewendet werden. Sie aktivieren Animationen über ein Kontrollkästchen in der Registerkarte Stil. Dadurch erscheinen zwei Dropdown-Menüs: eines zur Auswahl der Animation und eines für Richtung und Art der Bewegung. Die letzte Option im ersten Menü, „Sonstiges“, öffnet eine Liste unkonventioneller Animationen, die gut zu Halloween passen könnten. Unter der Auswahl des Animationsstils finden Sie Einstellungen für Timing, Wiederholung und Distanz.

‍Auch wenn dies weniger restriktiv ist als etwa ein Corporate Design, müssen wir die Auswahl der Animationen dennoch sorgfältig treffen. Unsere bewegten Elemente: eine Grabplatte, ein Geisterhund, eine Fahrraddekoration, drei kleine Geister und ein Kürbis, der aussieht, als würde er von Wednesday Addams gehalten.

‍Nach einigen Experimenten landen wir bei folgenden Entscheidungen:

• Ein Bounce für den Grabstein vermittelt das Gefühl von Gewicht und Einschüchterung (im Kontext von Halloween).
• Ein Swing für den Hund: Das klassische Motiv des schaukelnden Schilds eines verfallenen Gasthauses aus Halloween-Legenden passt gut zur vertikalen Form des Bildes, und der Hund ist der beste Platz dafür, da er vollkommen neutral ist.
• Nichts für die Fahrraddekoration. Es ist bereits viel los, und am Ende bietet ein stabiles Element einen Ruhepunkt für die Augen und macht die Bewegungen darum herum deutlich angenehmer. Zu versuchen, Geschehnisse mit mehreren bewegten Teilen ohne Fixpunkt wahrzunehmen, sorgte für Verwirrung und minderte den Unterhaltungswert des Effekts.
• Rubber Band für die Geister. Sie ähneln Klecksen, daher passt die Gummi-Animation perfekt zu ihnen und unterstreicht zudem den komödiantischen Charakter ihrer Gesichtsausdrücke.
• Schließlich Tada für den gehaltenen Kürbis. Das erzeugt einen „Schau mal!“-Moment, ähnlich dem Stil des Bildes, in dem das Mädchen den Kürbis dem Betrachter anzubieten scheint.

‍Das Endergebnis:

‍Ein etwas gewöhnlicheres Beispiel für die Animationen: In diesem Design wird die Verzögerungsfunktion genutzt, um ein lineares Entdecken-und-Erkunden-Motiv zu erzeugen und zugleich die Leistungen des beworbenen Unternehmens zu kommunizieren:

‍

‍