Animate on Scroll Library | Shopping Worlds

Animate on Scroll Library | Shopping Worlds

l Quelloffen
10 Downloads
Responsive

Version:

25,00 €  *
ODER erwirb diese Erweiterung in einem Bundle:
Einkaufswelten Bundle
Animate on Scroll Library | Shopping Worlds
SEO Headline | Shopping Worlds
Button Generator | Shopping Worlds
34,00 €  * Statt 65,00 €  *
Einkaufswelten Bundle
Animate on Scroll Library | Shopping Worlds
ID-Number | Shopping Worlds
SEO Headline | Shopping Worlds
Button Generator | Shopping Worlds
64,00 €  * Statt 80,00 €  *
    webse46168926995
  • 1.0.2
  • 05.12.2018
  • de_DE
  • von Christian Kilian
  • 5.2.0 – 5.2.27
    5.3.0 – 5.3.7
    5.4.0 – 5.4.6
    5.5.0 – 5.5.6

Bundles

Für die gewählte Variante sind keine Bundles verfügbar. Für Bundle-Angebote wählen Sie bitte eine andere Variante aus.
Einkaufswelten Bundle
Animate on Scroll Library | Shopping Worlds
SEO Headline | Shopping Worlds
Button Generator | Shopping Worlds
34,00 €  * Statt 65,00 €  *

Bundle anzeigen

Beim Speichern der Bundle-Konfiguration ist ein Fehler aufgetreten.
Animate on Scroll Library | Shopping Worlds
1x Animate on Scroll Library | Shopping Worlds
Christian Kilian   25,00 €  *
SEO Headline | Shopping Worlds
1x SEO Headline | Shopping Worlds
Christian Kilian   15,00 €  *
Button Generator | Shopping Worlds
1x Button Generator | Shopping Worlds
Christian Kilian   25,00 €  *
Einkaufswelten Bundle
Animate on Scroll Library | Shopping Worlds
ID-Number | Shopping Worlds
SEO Headline | Shopping Worlds
Button Generator | Shopping Worlds
64,00 €  * Statt 80,00 €  *

Bundle anzeigen

Beim Speichern der Bundle-Konfiguration ist ein Fehler aufgetreten.
Animate on Scroll Library | Shopping Worlds
1x Animate on Scroll Library | Shopping Worlds
Christian Kilian   25,00 €  *
ID-Number | Shopping Worlds
1x ID-Number | Shopping Worlds
Christian Kilian   15,00 €  *
SEO Headline | Shopping Worlds
1x SEO Headline | Shopping Worlds
Christian Kilian   15,00 €  *
Button Generator | Shopping Worlds
1x Button Generator | Shopping Worlds
Christian Kilian   25,00 €  *
AOS – Leichtgewichtige Animate-on-Scroll-Library Hier... mehr

Produktinformationen

AOS – Leichtgewichtige Animate-on-Scroll-Library

Hier geht es zur Live-Show

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 Klasse aos-animate hinzugefügt beziehungsweise 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. Im CSS werden nur dem Attribut aos Styles hinzugefügt, das transition-property festgelegt und post-transition-Properties zu .aos-animate hinzugefügt.

So wird AOS in die Einkaufswelt eingebaut

Die AOS CSS-Klassen werden in das jeweilige Element in die CSS-Klasse geschrieben. Es darf nur ein Befehl in die CSS-Klasse geschrieben werden - ansonsten funktioniert die Animationen nicht.

AOS CSS-Klassen

  • fade-right
  • fade-left
  • fade-up
  • fade-down
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left
  • flip-left
  • flip-right
  • flip-up
  • flip-down
  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left

Installationsanleitung

  1. Installiere das Plugin im Plugin-Manager
  2. Leeren ggf. nach der Installation den Cache
  3. Kompilieren ggf. das Theme neu
  4. Laden das Backend neu
  5. Öffnen eine beliebige Einkaufswelt
  6. Öffnen den Einkaufswelten-Designer
  7. Wechsele ein ein Element 
  8. Tragen unter CSS-Klassen eine gewünschte AOS CSS-Klasse ein
Bewertungen lesen, schreiben und diskutieren... mehr

Kundenbewertungen

Installationsanleitung

  1. Installiere das Plugin im Plugin-Manager
  2. Leeren ggf. nach der Installation den Cache
  3. Kompilieren ggf. das Theme neu
  4. Laden das Backend neu
  5. Öffnen eine beliebige Einkaufswelt
  6. Öffnen den Einkaufswelten-Designer
  7. Wechsele ein ein Element 
  8. Tragen unter CSS-Klassen eine gewünschte AOS CSS-Klasse ein

Änderungen

Version 1.0.2

Plugin kompatibel mit Digital Publishing

Version 1.0.1

Kompatibel mit Shopware v 5.5

Version 1.0.0

Erstveröffentlichung

Infos zum Hersteller

13 Erweiterungen
2 0 0
4.5 Ø-Bewertung

Version:

25,00 €  *

Zuletzt angesehen