Ein statischer Ausschnitt liest sich wie ein flaches Bild Geben Sie ihm eine sanfte, schleifende Drift und das gleiche Element fühlt sich lebendig an Die Erweiterung der Floating Effects In Master Addons Pro Fügt diese kontinuierliche Bewegung jedem Elementor-Widget hinzu, ohne Keyframes oder benutzerdefiniertes CSS zum Schreiben. In dieser Anleitung wird erklärt, was die Erweiterung tut, was Sie animieren können und wie Sie sie anwenden.
Was ist die Floating Effects Extension? #
Die Schwimmende Effekte Extension ist ein Master Addons Pro Motion Tool, das Elementor Widgets eine kontinuierliche, in Schleifen verlaufende Animation hinzufügt Es bewegt das Widget zwischen einem From und einem To-Wert mit Übersetzen, Dreh und Skala Transformiert, dann wieder zurück, und jede Transformation hat Dauer und Verzögerung Felder. Die Bewegung läuft auf der kleinen anime.js Bibliothek mit einem glatten In-Out-Leichtum Abschnitte, Spalten und Container bekommen das Panel nicht.
Was Sie animieren können #
Floating Effects funktioniert über drei Transformationstypen und Sie kombinieren sie mit Zeitsteuerungen, um die Bewegung zu formen:
- Übersetzen: Übersetzen Sie X und Übersetzen Sie Y, jeweils mit einem From- und To-Wert zwischen -100 und 100 px, für den klassischen Up-and-Down- oder Side-to-Side-Float.
- Drehen: Drehen Sie X, Y und Z zwischen -180 und 180 Grad und drehen Sie das Widget hin und her, um sich zu bewegen.
- Maßstab: Skala X und Skala Y zwischen 0 und 5, wodurch das Widget für einen weichen Puls wächst und schrumpft.
- Dauer und Verzögerung: Die Dauer beträgt bis zu 10.000 ms (1.000, wenn sie leer bleibt) und die Verzögerung bis zu 5.000 ms. Wenn Sie mehr als eine Transformation einschalten, teilen sie sich eine Zeitleiste, wobei sie zuerst das Timing von Translate, dann das von Rotate und dann das von Scale verwenden.
So fügen Sie schwebende Effekte in Elementor hinzu #
Floating Effects wird pro Widget aus dem Elementoreditor angewendet, sobald die Erweiterung in Master Addons aktiviert ist. Kurz gesagt: Wählen Sie das Element aus, das Sie animieren möchten, öffnen Sie seine Einstellungen, schalten Sie Floating Effects ein und wählen Sie eine Transformation mit ihrem Timing aus.
- Stellen Sie sicher Master Addons Pro Installiert und aktiv ist und dass die Floating Effects-Erweiterung im Master Addons-Panel aktiviert ist.
- Wählen Sie im Elementor-Editor das Widget aus, das Sie animieren möchten.
- Öffnen Sie die Einstellungen des Elements und finden Sie die Master-Addons Schwimmende Effekte Steuert, dann schalten Sie die Wirkung ein.
- Einschalten Übersetzen, Drehen oder SkalaStellen Sie die Werte von From und To ein, dann die Dauer und Verzögerung.
- Vorschau oder Veröffentlichung der Seite, um die Elementdrift auf der Live-Site zu sehen.
Tipps zur Verwendung von Floating Effects #
- Halten Sie die Bewegung subtil. Ein kleiner Übersetzungsabstand und eine langsame Dauer werden poliert gelesen; Große, schnelle Bewegung wirkt ablenkend.
- Verwenden Sie es auf ein oder zwei Elementen pro Ansicht. Ein einzelnes schwebendes Heldenbild oder Symbol zieht den Blick auf sich; Eine ganze Seite in Bewegung konkurriert mit sich selbst.
- Kombinieren Sie es mit einer Eintrittsbewegung. Kombinieren Sie schwebende Effekte mit dem Eingangsanimation Dehnung, sodass ein Element zuerst nachlässt und dann seinen sanften Schwimmer beibehält.
- Überprüfen Sie es mobil. Bestätigen Sie, dass die Bewegung auf kleineren Bildschirmen immer noch gut aussieht und keine Inhalte in der Nähe herumschiebt.
Häufig gestellte Fragen #
Was ist die Floating Effects-Erweiterung in Master Addons?
Floating Effects ist eine Master Addons Pro Erweiterung, die Elementor Widgets eine kontinuierliche, schleifende Animation hinzufügt, Sie bewegt ein Widget zwischen From und To Werten mit Translate, Drehen und Skalieren Transformationen hin und her, mit Einstellungen für Dauer und Verzögerung und ohne benutzerdefinierte CSS oder Keyframes.
Welche Arten von Animationen können Floating Effects erstellen?
Es unterstützt drei Transform-Typen: Übersetzen, um ein Element nach oben und unten oder von einer Seite zur anderen zu bewegen, drehen für ein sanftes Hin und Her-Schwanken und skalieren für einen sanften Pulseffekt Sie können eine Transformation mit Timing-Einstellungen kombinieren, um die genaue Bewegung zu formen, die Sie wollen.
Kann ich die Geschwindigkeit und Richtung der schwebenden Animation steuern?
Geschwindigkeit, ja. Jede Transformation hat Dauer - und Verzögerungsfelder, aber kombinierte Transformationen teilen sich eine Zeitleiste, wobei zuerst Übersetzen, dann Drehen, dann Skalieren verwendet wird Es gibt keine Richtungseinstellung: Die Bewegung spielt immer vom Wert Von zum Wert Zu und zurück.
Funktioniert Floating Effects auf ein Elementorelement?
Es funktioniert nur auf Widgets, wie ein Bild, Symbol, Überschrift oder Schaltfläche Abschnitte, Spalten und Container erhalten nicht das Floating Effects-Panel, so dass eine Gruppe von Elementen zu schweben, fügen Sie den Effekt zu jedem Widget.
Werden schwebende Animationen meine Website verlangsamen?
Die Bewegung läuft durch die kleine anime.js Bibliothek und animiert nur CSS Transformationen, die Browser gut handhaben Um Seiten glatt zu halten, verwenden Sie sie auf nur ein oder zwei Elementen pro Ansicht und halten Sie die Bewegung subtil, anstatt alles auf der Seite auf einmal zu animieren.
Ist Floating Effects kostenlos?
No. Floating Effects ist Teil von Master Addons Pro. Free Elementor verfügt über Eingangsanimationen, die einmal abgespielt werden, aber keinen Looping-Float.