Klassische Animationen (AOS)

WebAcappella bietet seit langem Erscheinungsanimationen über WOW.js an. Jetzt können Sie direkt in den Projekteigenschaften auswählen, ob Sie die AOS-Bibliothek (Animate On Scroll) verwenden möchten. AOS bietet moderne Erscheinungseffekte, die flüssig und einfach einzustellen sind, ohne Code zu schreiben.

AOS im Projekt aktivieren

  1. Öffnen Sie Ihr WebAcappella-Projekt.

  2. Gehen Sie zu Projekteigenschaften → Animationen.

Anwenden eines Erscheinungseffekts auf eine Komponente

  1. Wählen Sie eine Komponente (Text, Bild, Schaltfläche, Block usw.).

  2. Öffnen Sie das Panel Animation beim Erscheinen.

  3. Wählen Sie einen Effekttyp (z. B. Ausblenden, Ziehen, Zoomen, leichte Drehung).

Gute Praktiken

  • Weniger ist mehr Beschränken Sie sich auf wenige zusammenhängende Effekte (z. B. Fading + leichte Verschiebung).

  • Priorität für den Inhalt Der Effekt muss dem Verständnis dienen (Titel, CTA, Schlüsselschritt hervorheben).

  • Leistung Vermeiden Sie es, zu viele Elemente gleichzeitig zu animieren, insbesondere auf Mobilgeräten.

  • Visuelle Kohärenz Harmonisieren Sie Dauer, Zeitrahmen und Arten von Effekten auf der Ebene des Standorts.

  • Zugänglichkeit / Komfort Bevorzugen Sie kurze und moderate Effekte, die angenehm für das Auge sind und nicht aufdringlich wirken.

  • Browserkompatibilität Einige Effekte können in verschiedenen Browsern (insbesondere Safari) unterschiedlich erscheinen. Testen Sie Ihre Seiten auf mehreren Geräten.

Empfohlene Anwendungsfälle

  • Abschnittsüberschriften: Leichtes Einblenden + dezentes vertikales Verschieben.

  • Visuelle Blöcke (Karten, Vignetten): Sehr leichter Zoom beim Erscheinen.

  • CTAs (Aktionsschaltflächen): sauberes und schnelles Einblenden, um reaktionsfähig zu bleiben.

  • Listen von Elementen: kaskadenartiges Auftreten (kleine aufeinanderfolgende Verzögerungen).

Migration von WOW.js

  • Ältere Projekte, die mit WOW.js konfiguriert wurden, bleiben funktionsfähig.

  • So nutzen Sie AOS: 1. Aktivieren Sie AOS in den Projekteigenschaften. 2. Gehen Sie noch einmal über Ihre Schlüsselkomponenten und wenden Sie die Erscheinungseffekte erneut an. 3. Richten Sie Zeitspannen und Verzögerungen aus, um visuelle Einheitlichkeit zu gewährleisten.

Marketingerinnerung

Gut gewählte Animationen verstärken die Hervorhebung Ihrer Botschaften (Werbung, Neuigkeit, sozialer Beweis) und lenken die Aufmerksamkeit. Ein Übermaß an Effekten lenkt vom Inhalt ab, ermüdet den Nutzer und kann die Wahrnehmung von Qualität und Schnelligkeit beeinträchtigen.