Telefon +49 (0) 911 92 89 91 49
info@kilian-shopware-freelancer.de
Bürozeiten Mo bis Fr 9:30 bis 15:00 Uhr
Mitglied beim Händlerbund
100 % sichere Zahlung durch SSL-Technologie
 
AOS | Animierte Einkaufswelten

AOS | Animierte Einkaufswelten

25,00 € *

* Alle Preise verstehen sich zzgl. Mehrwertsteuer

Sofort versandfertig, Lieferzeit ca. 1-3 Werktage

  • ML10191
AOS | Animierte Einkaufswelten Um Elemente auf einer Website beim Scrollen zu animieren,... mehr
Produktinformationen "AOS | Animierte Einkaufswelten"

AOS | Animierte Einkaufswelten

Um Elemente auf einer Website beim Scrollen zu animieren, gibt es bereits zahlreiche Libraries auf dem Markt. Das Problem an der Sache: Gerade bei umfangreichen Seiten hat der Webentwickler nur wenig Kontrolle, außerdem werden die Animationen vollständig von JavaScript gehandhabt, indem Inline-CSS eingefügt wird. 

Demo: https://michalsnik.github.io/aos/ 
Demo: https://webse.kilian-shopware-freelancer.de/animate-on-scroll-library 

AOS ist zwar ebenfalls vollständig in JavaScript geschrieben, bietet aber bessere Möglichkeiten zur Kontrolle der Elemente. So sorgt AOS dafür, dass die Position von Elementen erkannt wird und erst dann ausgeführt wird wenn das Element im Viewport erscheint. 

Die gesamte Logik von AOS ist in JavaScripts geschrieben und die Animationen wird über CSS ausgeführt. Entwickler können so leicht eigene Animationen hinzufügen und, wenn nötig, für den Viewport passend ändern.

So funktioniert AOS:

Eigentlich ist die Idee hinter der Animate-on-Scroll-Library simpel. Alle Elemente und ihre Positionen werden auf der Website überwacht. Für die Animation wird dann lediglich die CSS-Klasse hinzugefügt beziehungsweise wieder entfernt. 

Außerdem bringt AOS eine Reihe von verschiedenen Animationen mit, die bereits Out-of-the-Box verfügbar sind. Doch auch neue Animationen lassen sich leicht erstellen – und zwar ohne, dass man sich über die Dauer oder Verzögerung Sorgen machen müsste.

So wird AOS in die Einkaufswelt eingebaut:

Gebe eine gewünschte Animation in die CSS-Klasse das jeweilige Einkaufswelt-Element ein.

  • Fade animations:

    • fade
    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left
    • fade-down-right
    • fade-down-left
  • Flip animations:

    • flip-up
    • flip-down
    • flip-left
    • flip-right
  • Slide animations:

    • slide-up
    • slide-down
    • slide-left
    • slide-right
  • Zoom animations:

    • 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

Installationsanleitung

  1. Installiere das Plugin im Plugin-Manager
  2. Leeren nach der Installation den Cache
  3. Kompilieren das Theme neu
  4. Laden das Backend neu
  5. Öffne eine beliebige Einkaufswelt
  6. Öffne den Designer
  7. Öffne ein Element
  8. Tragen unter CSS-Klassen eine gewünschten Animation ein
Weiterführende Links zu "AOS | Animierte Einkaufswelten"
Bewertungen lesen, schreiben und diskutieren... mehr
Kundenbewertungen für "AOS | Animierte Einkaufswelten"
Bewertung schreiben
Bewertungen werden nach Überprüfung freigeschaltet.
Bitte geben Sie die Zeichenfolge in das nachfolgende Textfeld ein.

Die mit einem * markierten Felder sind Pflichtfelder.

Onlineshop-Service