Klassische Animationen (AOS)
WebAcappella bietet seit langem Animationen zum Einblenden über WOW.js an. Jetzt können Sie die Bibliothek AOS (Animate On Scroll) direkt in den Projekteigenschaften auswählen. AOS bietet moderne, flüssige und einfach anzupassende Einblendeffekte, ohne dass Sie Code schreiben müssen.
AOS im Projekt aktivieren
- Öffnen Sie Ihr WebAcappella-Projekt.
- Gehen Sie zu Projekteigenschaften → Animationen.
Einen Einblendeffekt auf eine Komponente anwenden
- Wählen Sie eine Komponente aus (Text, Bild, Schaltfläche, Block usw.).
- Öffnen Sie das Fenster Animation beim Erscheinen.
- Wählen Sie einen Effekttyp (z. B. Einblenden, Verschieben, Zoomen, Leicht drehen).
Bewährte Verfahren
- Weniger ist mehr Beschränken Sie sich auf einige wenige, aufeinander abgestimmte Effekte (z. B. Einblenden + leichtes Verschieben).
- Priorität für den Inhalt Der Effekt muss dem Verständnis dienen (Hervorhebung einer Überschrift, eines CTA, eines wichtigen Schritts).
- Leistung Vermeiden Sie es, zu viele Elemente gleichzeitig zu animieren, insbesondere auf Mobilgeräten.
- Visuelle Kohärenz Stimmen Sie Dauer, Verzögerungen und Arten von Effekten auf der gesamten Website aufeinander ab.
- Barrierefreiheit/Komfort Bevorzugen Sie kurze und moderate Effekte, die angenehm für das Auge und nicht aufdringlich sind.
- Browserkompatibilität Bestimmte Effekte können je nach Browser (insbesondere Safari) unterschiedlich dargestellt werden. Testen Sie Ihre Seiten auf mehreren Geräten.
Empfohlene Anwendungsfälle
- Abschnittsüberschriften: leichtes Einblenden + dezentes vertikales Verschieben.
- Visuelle Blöcke (Karten, Miniaturansichten): sehr leichtes Zoomen beim Erscheinen.
- CTA (Aktionsschaltflächen): sauberes und schnelles Einblenden, um reaktionsschnell zu bleiben.
- Elementlisten: kaskadenförmiges Erscheinen (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 Ihre wichtigsten Komponenten durch und wenden Sie die Anzeigeeffekte erneut an. 3. Passen Sie die Dauer und Verzögerungen an, um eine einheitliche Darstellung zu gewährleisten.
Marketing-Hinweis
Gut ausgewählte Animationen unterstreichen Ihre Botschaften (Werbung, Neuheiten, soziale Beweise) und lenken die Aufmerksamkeit auf sich. Der übermäßige Einsatz von Effekten lenkt vom Inhalt ab, ermüdet den Benutzer und kann die Wahrnehmung von Qualität und Geschwindigkeit beeinträchtigen.