Animate On Scroll Library | Animierte Einkaufswelten
von: Christian Kilian (1) Bewertungen Quelloffen 47 DownloadsAktuelle Version:
Cloud / Self-hosted
Diese/s Erweiterung/Theme kann nicht in einem Shopware Cloud Shop verwendet werden. Cloud Self-hosted
Dieses Plugin ist für Shopware 6 verfügbar
Support
- Support durch: Christian Kilian
- Support verfügbar in:
Plugin Details
- Artikel-Nr.: webse46168926995
- Hersteller: Christian Kilian
- Version: 1.0.5
- Letztes Update: 08.07.2019
- Plugin verfügbar in:
- Self-hosted Kompatibilität: 5.2.0 – 5.2.275.3.0 – 5.3.75.4.0 – 5.4.65.5.0 – 5.5.105.6.0 – 5.6.9
Produktinformationen
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.
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
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
Kundenbewertungen
Als Besitzer dieser Erweiterung kannst Du diese im Shopware Account bewerten
Jetzt im Account bewertenDurchschnittliche Kundenbewertung aus 1 Bewertungen:
Support leider nicht vorhanden
Nach der Installation haben wir festgestellt, dass wir Probleme bei dem Zeitpunkt der Animation haben. Die Elemente "sliden" zu früh ins Bild.
Auf unsere erste Mail bekamen wir als Antwort "scheint alles zu klappen", daraufhin fiel uns auf, dass das Problem nur im Firefox Explorer existiert.
Daraufhin haben wir das Problem erneut geschildert und keine Antwort mehr erhalten.
Aufgrund des fehlenden Supports ist dieses Plugin für uns nicht zu gebrauchen. Wirklich schade, da die Idee sehr gut ist.
Installationsanleitung
- Installiere das Plugin im Plugin-Manager
- Leeren nach der Installation den Cache
- Kompilieren das Theme neu
- Laden das Backend neu
- Öffne eine beliebige Einkaufswelt
- Öffne den Designer
- Öffne ein Element
- Tragen unter CSS-Klassen eine gewünschten Animation ein
Änderungen
Version 1.0.5
Plugin ist mit Shopware 5.6 kompatibelVersion 1.0.4
Verbesserung der PerformanceVersion 1.0.3
Es können nun beliebig viele CSS-Klassen verwendet werden. In der Pligin-Einstellung lässt sich die Dauer und der Animationsverlauf festlegen und die Scrollrichtung einschränken.Version 1.0.2
Plugin kompatibel mit Digital PublishingVersion 1.0.1
Kompatibel mit Shopware v 5.5Version 1.0.0
ErstveröffentlichungBundles (2)
Infos zum Hersteller
