Elementor-Eingangsanimation: 70 Scroll-Effekte für jedes Element
Der erste Eindruck bleibt hängen Anstatt deine Inhalte einfach erscheinen zu lassen, lass sie ankommen Die Eingangsanimation Die Erweiterung, Teil von Master Addons Pro, fügt jedem Elementorelement Bewegung hinzu, sobald es in Sichtweite scrollt 70 Effekte Zu wählen aus: Fades, Slides, Masken, Rotationen, Zooms, Flips, Pulses und Bounces Sie stellen die Dauer, Verzögerung, Lockerung und Wiederholungszählung ein, so kann eine Überschrift sanft eindriften, während eine Reihe von Feature-Icons nacheinander einrastet Kein CSS, keine Keyframes, nur ein paar Einstellungen im Reiter Erweitert.
Verwenden Sie es gut und eine Eingangsanimation zieht den Blick auf die Seite und sorgt dafür, dass sich die Website auf dem ersten Scroll lebendig anfühlt Verwenden Sie es auf allem und es wird zu Rauschen Das Video unten behandelt die Grundlagen, und weiter unten komme ich in die vollständige Effektliste, wie man eine Animation über einen ganzen Abschnitt anwendet und wie man das richtige Timing erhält.
Was ist eine Eingangsanimation?
Eine Eingangsanimation ist die Bewegung, die ein Element macht, wenn es auf den Bildschirm kommt Der Besucher scrollt, eine Überschrift oder ein Bild oder eine Schaltfläche trifft auf den Ansichtsfenster, und er verblasst, rutscht oder springt an seinen Platz, anstatt die ganze Zeit dort gesessen zu haben Sie werden sie als Eingangseffekte, Scroll-Animationen oder eine Website-Eintragsanimation bezeichnen. Jedes Mal die gleiche Idee: eine statische Seite, die anfängt zu reagieren, während Sie sich nach unten bewegen.
Das alles kannst du mit CSS-Animationen selbst schreiben Dann sind die Keyframes deine zu pflegen, und das responsive Verhalten auf jeder Bildschirmgröße auch Die Master Addons Animationstoolkit Verschiebt das in die Elementeinstellungen, sodass Sie einen Effekt aus einem Dropdown auswählen und den Code überspringen.
Eine Bibliothek mit 70 Eingangseffekten
Mit 70 Presets gibt es eine passende Möglichkeit, fast jeden Abschnitt einzuführen Willst du es ruhig? Fade In. Willst du Energie? Bounce In oder Jack In the Box Nach etwas bewussterem? Flip In oder Mask From. Dieser Spread lässt dir Sektionen ihren eigenen Charakter geben: ruhig und glatt für ein Leitbild, etwas verspielt für die Features-Reihe.
- Schwindet: Fade In, plus Up, Down, Left und Right mit nummerierten Variationen, für ruhige Ankünfte.
- Folien und Masken: Rutschen Sie von und maskieren Sie von in alle vier Richtungen.
- Drehungen und Umschläge: Drehen Sie sich in Richtung jeder Ecke und drehen Sie nach oben, unten, links und rechts.
- Zooms und Skalen: Zoomen Sie hinein, skalieren Sie nach oben und skalieren Sie nach unten, jeweils mit Variationen.
- Achtungseffekte: Pulse In, Pulse Out, Shake, Bounce In und Jack In the Box für einen Helden oder einen CTA.
- Passen Sie die Wirkung an den Job an: Die lauten auf einem Aufruf zum Handeln, ein leises Ausbleichen auf Fließtext.
- Vorschau, bevor Sie sich verpflichten: Der Editor spielt den Effekt ab, sobald Sie ihn auswählen.
Dauer, Verzögerung und einfachere Kontrolle
Beim Timing werden die meisten Animationen gewonnen oder verloren, und das ist mehr als ein Ein-/Aus-Toggle Setzen Sie die Dauer In Millisekunden, um einen Zug schnell und bissig oder langsam und langwierig zu machen Fügen Sie ein Verzögerung Es kommt also eine Reihe von Gegenständen nacheinander statt auf einmal rein Wählen Sie eine Leichter werdend Kurvenförmig, sodass die Bewegung schneller wird und langsamer wird, wie es ein echtes Objekt tun würde, anstatt in einem flachen Robotertempo zu rutschen.
- Stellen Sie die Geschwindigkeit ein: 500 ms fühlt sich flott an, 1500 ms entspannt Diese eine Zahl verändert die ganze Stimmung.
- Eine Sequenz staffeln: Bringen Sie die Verzögerung auf jedem Symbol hintereinander um eine Kerbe und sie platzen einzeln ein.
- Wählen Sie die Lockerung: Ease-Out (schneller Start, sanfter Stopp) liest sich für die meisten Eingänge als natürlich Es ist der, zu dem ich zuerst greife.
- Wiederholen Sie es: Repeat Count spielt den Effekt 1 bis 5 Mal oder in einer Schleife.
Elementors integrierte Eingangsanimation im Vergleich zu Master-Add-ons
Elementor lässt Sie bereits eine Eingangsanimation kostenlos unter Erweitert, Bewegungseffekte auswählenDas ist in Ordnung für eine einfache Verblassung Die Master Addons Erweiterung ist für Seiten, auf denen Sie eine feinere Kontrolle darüber haben möchten, wie jedes Element ankommt.
| Elementorbewegungseffekte | Master Addons Eingangsanimation | |
|---|---|---|
| Planen | Kostenlos | Master Addons Pro |
| Dauer | Langsam, normal oder schnell | Jeder Wert in Millisekunden |
| Verzögerung | Millisekunden | Millisekunden |
| Leichter werdend | Nicht verfügbar | 30 Kurven, von Linear nach Back In Out |
| Wiederholungszählung | Nicht verfügbar | 1 bis 5 Mal oder unendlich |
| Unterschiedlicher Effekt pro Gerät | Ja | Nein, eine Einstellung für alle Haltepunkte |
| Wirkungen | Elementorvoreinstellungen | 70 Effekte, darunter Masken, Flips und Pulse |
Wie stelle ich eine Standard-Eingangsanimation für alle Elemente ein?
Die Leute fragen das sehr: kann man in Elementor eine Eingangsanimation auf alles auf einmal anwenden? gerade Antwort, Elementorkern hat keinen einzigen globalen Schalter, der jedes Element auf der Seite animiert Was in der Praxis funktioniert ist, auf Container - oder Sektionsebene zu animieren, dann diese Einstellungen wiederzuverwenden.
- Wählen Sie die Abschnitt oder Behälter Statt jedes Widgets darin Öffnen Erweitert → Master Addons Eingangsanimation Und wähle deinen Effekt Der ganze Block kommt dann zusammen an, während er reinscrollt.
- Um dieselbe Bewegung wiederzuverwenden, klicken Sie mit der rechten Maustaste auf das Element, drücken Sie KopierenDann Paste-stil Auf den nächsten Abschnitt Die Animationseinstellungen fahren mit dem Stil mit, also stellt man ihn einmal ein und fügt ihn auf der Seite ein.
- Für eine Kaskade, anstatt dass alles zusammen feuert, halten Sie den Effekt gleich und erhöhen Sie den Verzögerung Ein wenig auf jedem Abschnitt, wenn Sie nach unten gehen.
Dadurch erhalten Sie eine konsistente Eingangsanimation für alle Ihre Elemente, ohne Code zu berühren, was einer Standardeinstellung so nahe kommt, wie Elementor Ihnen bietet.
Wo helfen Eingangsanimationen am meisten?
- Heldenabschnitte: Ein Fade In Up auf der Überschrift, dann eine kurze Verzögerung auf der Schaltfläche darunter.
- Merkmalsreihen: Staffelung der Icons, so dass sie eine nach der anderen landen.
- Statistiken und Zähler: a Zoomen Sie hinein, während die Zahlen in die Ansicht scrollen.
- Erfahrungsberichte und Logos: Ein weiches Ausbleichen, damit sie nicht abrupt einrasten.
- Handlungsaufrufe: a Bounce In oder Jack In the Box an dem Punkt, an dem jemand entscheidet.
Entrance Animation ist Teil von Master Addons Pro. Für Bewegung über die erste Schriftrolle hinaus, schauen Sie sich an Schwimmende Effekte, Enthüllen und Transformiertoder durchsuchen Sie das Ganze Animationsfunktionen von Master Addons.
Häufig gestellte Fragen zur Eingangsanimation
Werden viele Eingangsanimationen meine Website verlangsamen?
Auf einer Seite mit Dutzenden animierten Elementen kann es etwas Gewicht hinzufügen, aber die Effekte sind von Anfang an leicht Die eigentliche Lösung ist Zurückhaltung: Animieren Sie die Schlüsselabschnitte und Schlagzeilen, nicht jeden Absatz Ein paar gut platzierte registrieren sich kaum Wenn Ihnen die Ladezeit im Kopf liegt, diese Tipps zur Beschleunigung von Elementor-Sites Hilfe.
Warum funktioniert meine Elementor-Eingangsanimation nicht?
Es ist meistens eines von drei Dingen Die Animation feuert erst beim ersten Betreten des Viewports durch das Element, also zum Testen frisch nach unten scrollen, anstatt wieder nach oben zu scrollen, Achten Sie darauf, dass der Effekt auf dem eigentlichen Element und nicht auf einem leeren Wrapper drumherum liegt Und löschen Sie Ihr Caching-Plugin, nachdem Sie veröffentlicht haben, da eine zwischengespeicherte Seite die alte Version ohne die Animation bedient.
Kann ich verschiedene Animationen auf Desktop und Mobilgeräten verwenden?
Nicht mit dieser Erweiterung Seine Einstellungen gelten für jeden Haltepunkt, also wählen Sie einen Effekt, der immer noch direkt auf einem kleinen Bildschirm aussieht Elementors eigene Motion Effects Eingangsanimation kann pro Gerät eingestellt werden, was hilft, wenn ein Telefonlayout etwas ruhigeres braucht.
Wie unterscheidet sich das von Elementors eigenen Eingangsanimationen?
Der kostenlose Editor von Elementor verfügt über eine grundlegende Steuerung für Entrance Animation unter Advanced, Motion Effects, mit einer voreingestellten Dauer und einer Verzögerung Diese Erweiterung ist Teil von Master Addons Pro und gibt Ihnen 70 Effekte, Dauer und Verzögerung in Millisekunden, 30 Lockerungskurven und eine Wiederholungszählung Für das Tempo passt Ease Out zu den meisten Eingängen.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
