Fügen Sie Elementen in GemPages Animationen hinzu

Über GemPages Animations

Bei Animationen werden Elemente auf einer Webseite in Bewegung versetzt, von subtilen Effekten wie Überblenden oder Gleiten bis hin zu dynamischeren Übergängen und Interaktionen. Sie haben die Flexibilität, Animationen auf jedes Element in GemPages anzuwenden. Befolgen Sie die nachstehenden Schritte, um Animationen zu GemPages-Elementen hinzuzufügen. 

Wie füge ich eine Animation hinzu?

Befolgen Sie diese Schritte, um Ihren Elementen Animationen hinzuzufügen:

Schritt 1:Gehen Sie auf Shopify-Admin > Apps und wählen Sie GemPages-Ersteller zugreifen GemPages Dashboard. Klicken Sie auf die gewünschte Vorlage, um auf den Editor zuzugreifen. 

Schritt 2:: Klicken Sie auf das Element, dem Sie eine Animation hinzufügen möchten. Die Elementkonfiguration wird in der linken Seitenleiste angezeigt. Wechseln Sie anschließend zum Erweitert Tab. 

Schritt 3:: Scrollen Sie nach unten zum Animation Abschnitt und schalten Sie den Schalter um on.

Es stehen vier Animationsvorgaben zur Verfügung:

• Verblassen: Ein Element wechselt allmählich von vollständiger Transparenz zu vollständiger Sichtbarkeit.
• Schlitten: Ein Element bewegt sich fließend über den Bildschirm, normalerweise in horizontaler oder vertikaler Richtung.
• Zoom: Visueller Effekt, bei dem die Größe eines Elements dynamisch angepasst wird, wodurch die Illusion entsteht, dass es innerhalb eines bestimmten Raums näher kommt (Vergrößern) oder sich entfernt (Verkleinern).
• Shake: Visueller Effekt, der einem Element eine schnelle, ruckartige Bewegung verleiht und so eine zitternde oder vibrierende Bewegung simuliert.

Konfigurieren der Animationseinstellungen

Jede Animation hat unterschiedliche Einstellungen. Insgesamt gibt es 9 Einstellungen, darunter:

1. Schnelligkeit

Mit dem Schieberegler können Sie die Geschwindigkeit der Animationen anpassen. Je weiter der Schieberegler nach rechts gestellt ist, desto schneller ist die Animation.

2. Verzögerung

Die Anzahl der Sekunden, um die der Start der Animation oder jeder Iteration verzögert werden soll, wenn die Schleife aktiviert ist. Die maximale Verzögerungszeit beträgt 20 Sekunden.

3. Lockerung

In diesem Schritt können Sie aus verschiedenen Arten von Easing-Funktionen wählen, um die Geschwindigkeit der Übergänge zwischen Keyframes zu steuern. Die Auswahl der richtigen Easing-Funktion hängt von den spezifischen Eigenschaften ab, die Sie für Ihre Animation wünschen, und von der allgemeinen Benutzererfahrung, die Sie erzielen möchten.

• Linear: Bewegung, die geradlinig und gleichmäßig erfolgt
• Ease-in: Bewegung, die zu Beginn eine allmähliche Beschleunigung der Animation beinhaltet
• Auslauf: Bewegung, die eine allmähliche Verlangsamung der Animation am Ende beinhaltet
• Ease-In-Out: Bewegung, die zu Beginn eine allmähliche Beschleunigung beinhaltet, auf die eine Phase gleichmäßiger Bewegung folgt und die gegen Ende mit einer allmählichen Verlangsamung endet.

4. Auslöser

Wählen Sie, wie die Animation ausgelöst wird.

• Jede Ansicht: Die Animation wird jedes Mal abgespielt, wenn der Besucher zum Element scrollt.
• Erster Blick: Die Animation wird nur beim ersten Aufrufen des Elements durch den Besucher ausgeführt.

5. Richtung

Gibt den Pfad an, entlang dem sich die Folienanimation eines Elements bewegen wird.

6. Entfernung

Passen Sie an, wie weit sich das Element bewegt.

7. Intensität

Die Häufigkeit des Schüttelns innerhalb einer bestimmten Zeit. Je höher die Intensität, desto ausgeprägter die Vibration.

8. Zoomverhältnis

Gibt an, um wie viel Prozent ein Element im Verlauf der Zoom-Animation vergrößert bzw. verkleinert wird.

9. Schleife

Ob die Animation im Laufe der Zeit wiederholt wird, solange das Element vorhanden ist.