Animate On Scroll Library | Animierte Einkaufswelten

Animate On Scroll Library | Animierte Einkaufswelten

Quelloffen
33 Downloads
Responsive

Version:

25,00 €  *
Verfügbare Bundles
Einkaufswelten Bundle
Animate On Scroll Library | Animierte Einkaufswelten
SEO Überschrift | Einkaufswelt Element
Button Generator | Einkaufswelt Element
34,00 €  * Statt 65,00 €  *
Einkaufswelten Bundle
Animate On Scroll Library | Animierte Einkaufswelten
ID Nummer für die Einkaufswelt
SEO Überschrift | Einkaufswelt Element
Button Generator | Einkaufswelt Element
64,00 €  * Statt 80,00 €  *
    webse46168926995
  • 1.0.5
  • 08.07.2019
  • 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.10
    5.6.0 – 5.6.1

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 | Animierte Einkaufswelten
SEO Überschrift | Einkaufswelt Element
Button Generator | Einkaufswelt Element
34,00 €  * Statt 65,00 €  *
Bundle anzeigen
Beim Speichern der Bundle-Konfiguration ist ein Fehler aufgetreten.
Animate On Scroll Library | Animierte Einkaufswelten
1x Animate On Scroll Library | Animierte Einkaufswelten
Christian Kilian   25,00 €  *
SEO Überschrift | Einkaufswelt Element
1x SEO Überschrift | Einkaufswelt Element
Christian Kilian   15,00 €  *
Button Generator | Einkaufswelt Element
1x Button Generator | Einkaufswelt Element
Christian Kilian   25,00 €  *
Einkaufswelten Bundle
Animate On Scroll Library | Animierte Einkaufswelten
ID Nummer für die Einkaufswelt
SEO Überschrift | Einkaufswelt Element
Button Generator | Einkaufswelt Element
64,00 €  * Statt 80,00 €  *
Bundle anzeigen
Beim Speichern der Bundle-Konfiguration ist ein Fehler aufgetreten.
Animate On Scroll Library | Animierte Einkaufswelten
1x Animate On Scroll Library | Animierte Einkaufswelten
Christian Kilian   25,00 €  *
ID Nummer für die Einkaufswelt
1x ID Nummer für die Einkaufswelt
Christian Kilian   15,00 €  *
SEO Überschrift | Einkaufswelt Element
1x SEO Überschrift | Einkaufswelt Element
Christian Kilian   15,00 €  *
Button Generator | Einkaufswelt Element
1x Button Generator | Einkaufswelt Element
Christian Kilian   25,00 €  *
AOS | Animierte Einkaufswelten Um Elemente auf einer Website beim Scrollen zu animieren, gibt... mehr

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.

Live-Demo

AOS-Demo

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
Beschreibung vergrößern
Bewertungen lesen, schreiben und diskutieren... mehr

Kundenbewertungen

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

Änderungen

Version 1.0.5

Plugin ist mit Shopware 5.6 kompatibel

Version 1.0.4

Verbesserung der Performance

Version 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 Publishing

Version 1.0.1

Kompatibel mit Shopware v 5.5

Version 1.0.0

Erstveröffentlichung

Infos zum Hersteller

Christian Kilian Christian Kilian 15 Erweiterungen
1 0 0
4.5 Ø-Bewertung

Version:

25,00 €  *

Zuletzt angesehen