Ein Animationseffekt kann zu jedem Element von Zero Block hinzugefügt werden. Es gibt zwei Arten von Animationseffekten: einfache und erweiterte oder schrittweise Animation. In diesem Artikel werden wir die grundlegendsten Animationseinstellungen behandeln.
Zu den grundlegenden Animationsoptionen gehören:
- Animation - verschiedene Optionen für den Zeitpunkt des Beginns des Animationseffekts;
- Parallaxe - die Einstellungen für den Parallaxeneffekt;
- Fixierung - die festen Einstellungen für den Positionierungseffekt.
Animation
Zu den Animationseffekten gehören Einblenden, Einblenden nach rechts, Einblenden nach links, Einblenden nach oben, Einblenden nach unten und Einzoomen.
Alle Animationseffekte haben eine Reihe gemeinsamer Einstellungen wie Dauer, Verzögerung und Auslöseversatz.
Die Dauer ist die Dauer des Animationseffekts in Sekunden. Der numerische Wert ist die Anzahl der Sekunden, in denen der Animationseffekt abläuft.
Die Verzögerung ist die Verzögerung in Sekunden vor dem Start des Animationseffekts.
Der Auslöseversatz ist der Versatz in Pixeln vom unteren Rand des Fenster-Containers, an dem die Animation beginnt.
Bei Animationseffekten mit Elementen, die von oben, unten, rechts oder links erscheinen, gibt die Option "Abstand" die Entfernung an, die der Block von der Stelle, an der er zuerst erscheint, zurücklegt.
Der Effekt "Vergrößern" verfügt über eine Skalierungseinstellung. Bei einer Einstellung von weniger als 100 % wird das Element auf seine ursprüngliche Größe gezoomt. Bei einer Einstellung von mehr als 100 % wird das Element verkleinert und erscheint kleiner.
Die Dauer ist die Dauer des Animationseffekts in Sekunden. Der numerische Wert ist die Anzahl der Sekunden, in denen der Animationseffekt abläuft.
Die Verzögerung ist die Verzögerung in Sekunden vor dem Start des Animationseffekts.
Der Auslöseversatz ist der Versatz in Pixeln vom unteren Rand des Fenster-Containers, an dem die Animation beginnt.
Bei Animationseffekten mit Elementen, die von oben, unten, rechts oder links erscheinen, gibt die Option "Abstand" die Entfernung an, die der Block von der Stelle, an der er zuerst erscheint, zurücklegt.
Der Effekt "Vergrößern" verfügt über eine Skalierungseinstellung. Bei einer Einstellung von weniger als 100 % wird das Element auf seine ursprüngliche Größe gezoomt. Bei einer Einstellung von mehr als 100 % wird das Element verkleinert und erscheint kleiner.
Parallaxe
Parallaxe-Animationen haben zwei Einstellungen - Scrollen und Mausbewegung.
Parallaxe beim Scrollen
Parallaxe bei Mausbewegung
In den Einstellungen für Parallaxe beim Scrollen finden Sie die Einstellung Geschwindigkeit. Wenn die Geschwindigkeit weniger als 100% beträgt, bewegt sich das Element langsamer als die Seite, über die geblättert wird. Wenn die Geschwindigkeit mehr als 100 % beträgt, bewegt sich das Element schneller als die gescrollte Seite.
In den Einstellungen für Parallaxe bei Mausbewegung bedeutet der Abstand entlang der X- und Y-Achse den maximalen Parallaxen-Neigungseffekt.
In den Einstellungen für Parallaxe bei Mausbewegung bedeutet der Abstand entlang der X- und Y-Achse den maximalen Parallaxen-Neigungseffekt.
Befestigung von
Wenn Sie eine Fixierungsanimation einrichten, können Sie wählen, wo das Element fixiert werden soll. Dies ist der Bildschirmbereich (oben, in der Mitte oder unten), an dem der Fixierungseffekt einsetzt. Sie können einen der drei Bereiche wählen - Fenster oben, Fenstermitte oder Fenster unten.
Der Auslöseversatz ist der Punkt, an dem ein Element relativ zum Fenster oben, zur Fenstermitte oder zum Fenster unten fixiert wird.
Abstand ist der Abstand in Pixeln, den das Element während der Fixierungsanimation zurücklegen soll.
Der Auslöseversatz ist der Punkt, an dem ein Element relativ zum Fenster oben, zur Fenstermitte oder zum Fenster unten fixiert wird.
Abstand ist der Abstand in Pixeln, den das Element während der Fixierungsanimation zurücklegen soll.
Wir empfehlen Ihnen, den Artikel "Sticky Elements in Zero Block " zu lesen, um zu erfahren, wie Sie einen Fixierungseffekt erzeugen und wie er auf einer Seite aussieht.
