Animationen
Animation Aktiv
Hierüber kann bestimmt werden, ob die Konfiguration eine Animation im Hintergrund ausführen soll
Animationskonfigurator
Produktname und Beschreibung
Bei einem Klick hierauf, wird der Editor der Basisanimation aufgerufen
Auswahlmöglichkeit
Jede Auswahlmöglichkeit hat einen Button über diesen man den entsprechenden Editor zu der Möglichkeit aufrufen kann
Animationseditor
Der Animationseditor ist das "Herzstück". Hier können alle Variablen der Animation definiert werden.
Medien durchsuchen ...
Hier öffnet sich die Medienbibliothek des Shops um die Quelldatei der Animation zu definieren
JSON-Editor
Die Animationsdefinition besteht aus 4 Elementen
- part
Die Quellendefinition der Animation. Zum aktuellen Zeitpunkt unterstützt der Konfigurator folgende Quelltypen:
- "image": Bildquelle Das Attribut "source" wird hier einmal über den Wert "url" und den Wert "id" definiert. Der Wert "id" wird zur Thumbnail generierung verwendet. Dieser kann übersprungen werden- from
Die Startattribute der Animation
Die Attribute sind 1:1 CSS Eigenschafts-Deklarationen. Diese Eigenschaften können auf den Dokumentationsseiten von MDN nachgelesen werden, da die komplette Liste diese Dokumentation stark vergrößern würde.
Die Angaben sollten im Basiselement als absolute Angabe (px, em oder rem) in weiteren Schritten dann als Relative angabe (%) gemacht werden um Darstellungsfehler zu minimieren
- while
Ein Code-Snippet welches während der Animation ausgeführt wird. Wenn die Animation gestartet wird, läuft diese 300ms während dieses Script aufgerufen wird.
- to
Die Endattribute der Animation. Diese werden nach Abschluss der Animation beibehalten, bis die Auswahl der Schrittposition verändert oder entfernt wird
Die Attribute sind 1:1 CSS Eigenschafts-Deklarationen. Diese Eigenschaften können auf den Dokumentationsseiten von MDN nachgelesen werden, da die komplette Liste diese Dokumentation stark vergrößern würde.
Die Angaben sollten im Basiselement als absolute Angabe (px, em oder rem) in weiteren Schritten dann als Relative angabe (%) gemacht werden um Darstellungsfehler zu minimieren