An international version is available for our store.
Zum Hauptinhalt springen
Christian Kilian

AOS Animate Scroll für Erlebniswelten

Bewertung: keine Bewertung ( Bewertung schreiben )
Downloads: <25

Beschreibung

Highlights

  • Flexible Elementanimationen: Animieren Sie jedes Element in Ihrem Shopware-Erlebniswelt, um ein dynamischeres und ansprechendes Einkaufserlebnis zu schaffen.
  • Umfangreiche Animationssammlung: Mit über 25 vordefinierten Animationen können Sie Ihrem Shop eine einzigartige Ästhetik verleihen.
  • Viewport-Auslöser: Die Animationen werden ausgelöst, sobald sie in das Sichtfeld des Benutzers gelangen, was für eine nahtlose und interessante Interaktion sorgt.
  • Performance-optimiert: AOS überwacht nur die Elemente, die sich im Sichtbereich des Benutzers befinden.

Features

  • Einmalige Wiedergabe: Kontrollieren Sie, ob Animationen wiederholt oder nur einmal abgespielt werden.
  • Dauer: Steuern Sie die Geschwindigkeit der Animation, wählen Sie einen Wert zwischen 50 und 3000 Millisekunden.
  • Verzögerung: Legen Sie eine Startverzögerung für Ihre Animation fest, wählen Sie einen Wert zwischen 50 und 3000 Millisekunden.
  • Offset: Steuern Sie, wann die Animation auf der Grundlage der Scroll-Position beginnt.
  • Easing: Ermöglicht eine weiche Beschleunigung und Verzögerung der Animation.

Über die Erweiterung

Mit diesem Plugin können Sie Animationseffekte beim Scrollen der Seite implementieren. Unter den zahlreichen verfügbaren Bibliotheken steht AOS, kurz für Animate on Scroll, hervor. Diese Bibliothek ermöglicht es Ihnen, verschiedene Animationen auf Elemente anzuwenden, wenn diese beim Scrollen in der Ansicht angezeigt werden.

So funktioniert AOS

Die Idee hinter AOS ist einfach: Alle Elemente und ihre Positionen auf der Website werden überwacht. Für die Animation wird lediglich die CSS-Klasse hinzugefügt oder entfernt. AOS bietet eine Vielzahl von vordefinierten Animationen, die sofort einsatzbereit sind. Darüber hinaus können Sie neue Animationen erstellen, ohne sich Gedanken über die Dauer oder Verzögerung machen zu müssen.

AOS in der Erlebniswelt

Um AOS in Ihre Erlebniswelt zu integrieren, fügen Sie einfach die gewünschte Animation als CSS-Klasse in das jeweilige Erlebniswelt-Element ein:

Fade-Animationen

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

Flip-Animationen

  • flip-up
  • flip-down
  • flip-left
  • flip-right

Zoom-Animationen

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

Details

  • Verfügbar in: Englisch, Deutsch
  • Zuletzt aktualisiert: 14. Oktober 2024
  • Veröffentlicht: 28. Oktober 2019
  • Version: 1.2.0
  • Kategorie: Erlebniswelten

Ressourcen

Bewertungen (0)

Bewertung schreiben

Wenn du diese Erweiterung heruntergeladen hast, kannst du diese im Shopware Account bewerten.

Bewertung schreiben

Über den Extension Partner

Partner Status

  • Shopware Extension Partner Shopware
    Extension Partner

Details

  • Ø-Bewertung: 4

    Durchschnittliche Bewertung von 4 von 5 Sternen

  • Partner seit: 2017
  • Erweiterungen: 8

Support

  • Land: Germany
  • Spricht: Deutsch, Englisch