So fügen Sie eine Animation beim Scrollen in Elementor hinzu (wie Apple AirPods)

Veröffentlicht: 2022-07-21

Suchen Sie nach einer Möglichkeit, Animationen beim Scrollen in Elementor hinzuzufügen, wie Apple und Sony sie auf ihren Websites verwenden?

Während Elementor Pro über seine Bewegungseffektfunktion alle Arten von netten Animationseffekten enthält, können Sie keine wirklich ansprechende Bildsequenz mit Bildlaufeffekten erstellen, wie Sie sie auf der Apple-Website (und vielen anderen) sehen. Zum Beispiel die AirPods Pro-Seite .

Mit dem Scrollsequence-Plugin können Sie Elementor ( einschließlich der kostenlosen Version von Elementor ) ganz einfach diese Art von filmischen Scroll-Animationen hinzufügen.

Es ist schwer mit Worten zu beschreiben, sehen Sie sich also das Beispiel unten an ( die Animation bewegt sich, wenn ein Besucher die Seite nach unten scrollt ):

Wenn Sie mehr über Scrollsequence im Allgemeinen erfahren möchten, können Sie unseren vollständigen Scrollsequence-Test lesen.

In diesem Beitrag werden wir uns jedoch speziell darauf konzentrieren, wie man Animationen beim Scrollen in Elementor mit Scrollsequence hinzufügt.

Lassen Sie uns graben!

So erstellen Sie filmische Scroll-Animationen in Elementor mit Scrollsequence

Hier ist ein Überblick über die erforderlichen Schritte – lesen Sie weiter für das detaillierte Tutorial:

Installieren Sie das Scrollsequence-Plugin
Erstellen Sie Ihre Animation
Fügen Sie die Scroll-Animation zu Elementor hinzu

1. Installieren Sie das Scrollsequence-Plugin

Zunächst sollten Sie das Scrollsequence-Plugin auf Ihrer Elementor-Website installieren.

Scrollsequence hat eine kostenlose Version auf WordPress.org sowie eine Premium-Version, die weitere Funktionen hinzufügt. Mit der kostenlosen Version können Sie grundlegende Animationen mit bis zu drei Szenen und maximal 100 Bildern pro Szene einrichten, während die Premium-Version alle Einschränkungen aufhebt und auch erweiterte Animationen und Funktionen hinzufügt.

Scrollsequence – Cinematic Scroll Image Animation Plugin

Autor(en): Scrollsequence

Aktuelle Version: 1.2.7

Zuletzt aktualisiert: 9. Mai 2022

scrollsequenz.1.2.7.zip

98 % Bewertungen Über 1.000 Installationen WP 5.0+ Erfordert

Sie können alle Premium-Funktionen auch kostenlos mit einer 14-tägigen kostenlosen Testversion ausprobieren, sodass Sie nichts bezahlen müssen, nur um sie auszuprobieren.

Wenn Sie sich nach der Testversion für die Premium-Version entscheiden, beginnt sie bei 69,99 $. Sie können jedoch unseren exklusiven Scrollsequence-Gutschein verwenden, um 20 % zu sparen:

20% RABATT

Scrollsequenz

Erhalten Sie mit dem WPMAYOR20-Gutschein einen exklusiven Rabatt von 20 % auf Scrollsequence. Erstellen Sie Ihre Scroll-Animation in wenigen Minuten.

Erhalten Sie mit dem WPMAYOR20-Gutschein einen exklusiven Rabatt von 20 % auf Scrollsequence. Erstellen Sie Ihre Scroll-Animation in wenigen Minuten. Zeige weniger

2. Erstellen Sie Ihre Animation

Sobald Sie das Plugin installiert haben, gehen Sie zu Scrollsequence → Add New Scrollsequence , um Ihre erste Scroll-Animation einzurichten.

Jede Animation besteht aus einer oder mehreren Szenen und jede Szene enthält mehrere Bilder, die in einer Sequenz angeordnet sind. Das Plugin generiert dann die Animation basierend auf allen Bildern in der Sequenz.

Eine „Szene“ ist eine vollständige Animationssequenz. Wenn Sie sich entscheiden, mehrere Szenen hinzuzufügen, wechselt der Benutzer zur nächsten Szene, sobald er vollständig durch die Animation der ersten Szene gescrollt hat.

In den meisten Situationen möchten Sie die Bilder in Ihrer Sequenz auf einem Basisvideo basieren. Um ein vorhandenes Video in eine Folge separater Bilder umzuwandeln, können Sie eines dieser Tools aus der Dokumentation des Plugins verwenden. Die einfachste Option ist der browserbasierte Ezgif-Konverter, aber mit spezieller Software erhalten Sie eine bessere Qualität.

Erstellen Sie Szenen und fügen Sie Bilder hinzu

Nachdem Sie Ihre High-Level-Animation erstellt haben, klicken Sie auf die Schaltfläche Szene hinzufügen, um Ihre erste Szene hinzuzufügen.

Dadurch wird ein neuer Satz von Optionen erweitert, mit denen Sie alle Bilder für Ihre Animationssequenz hochladen können. Die Entwickler empfehlen, mindestens 50-100 Bilder pro Szene hochzuladen, um eine reibungslose Animation zu gewährleisten.

Sobald Sie die Bilder hochgeladen haben, können Sie die Sortieroption verwenden, um sicherzustellen, dass sie in der richtigen Reihenfolge sind. Wenn sie nicht in der richtigen Reihenfolge sind, sieht Ihre Animation nicht richtig aus .

Fügen Sie der Szene Bilder hinzu, um eine Animation beim Scrollen in Elementor zu erstellen

Wenn Sie eine weitere Szene erstellen möchten, können Sie dies tun, indem Sie auf das Plus-Symbol neben der Registerkarte „ Szene 0 “ klicken.

Fügen Sie feste Inhalte und Animationen hinzu

Um den festen Inhalt hinzuzufügen, der über den Animationsbildern angezeigt wird, können Sie das Feld „ Fester Inhalt “ für den Inhalt selbst verwenden.

Dann können Sie den Abschnitt Feste Inhaltsanimation verwenden, um seine Animationsregeln einzurichten. Wir behandeln dies ausführlich in Schritt Nr. 4 unseres Scrollsequence-Reviews, aber die Grundidee ist wie folgt:

CSS-Selektoren fügen Sie dem Inhalt im Feld „ Festgelegter Inhalt “ hinzu (über die Registerkarte „ Text “).
Sie richten Ihre Animationsregeln im Feld Fixed Content Animation ein, indem Sie auf diese CSS-Selektoren abzielen und dann auch das Timing für die Animation von Inhalten innerhalb dieser Selektoren auswählen. Sie könnten beispielsweise sagen, dass Sie einen bestimmten Text für die Bilder 30-55 anzeigen möchten.

Hier ist ein Beispiel für das Hinzufügen der CSS-Selektoren zu Ihrem Inhalt:

Und so sieht es dann aus, um die Animationsregeln einzurichten:

Neben der Animation Ihrer festen Inhalte können Sie auch die Bilddauer anpassen.

Konfigurieren Sie andere Einstellungen nach Bedarf

Das Einrichten Ihrer Szenen, Bilder und festen Inhalte sind die wichtigsten Teile beim Erstellen einer Animation.

Scrollsequence bietet Ihnen jedoch auch einige andere Einstellungen in dieser Benutzeroberfläche, die Sie vielleicht erkunden möchten.

Sie können beispielsweise die Bildskalierung und -ausrichtung unten im Szeneneinstellungsbereich anpassen.

Sie erhalten auch einige allgemeine Einstellungen im Bereich Scrollsequence Settings der Seitenleiste. In diesem Widget können Sie die Bildbreite und die Scrollverzögerung steuern sowie bei Bedarf benutzerdefiniertes CSS hinzufügen.

Konfigurieren Sie andere Animationseinstellungen

Veröffentlichen Sie Ihre Animation

Klicken Sie abschließend auf die Schaltfläche „Veröffentlichen“, um Ihre Animation zu veröffentlichen, genau wie bei einem Blogbeitrag.

Sobald Sie es veröffentlicht haben, können Sie den Shortcode dieser Animation finden, indem Sie zu Scrollsequence → Scrollsequence gehen :

Halten Sie diesen Shortcode bereit, da Sie ihn in einer Sekunde benötigen, um Animationen beim Scrollen in Elementor hinzuzufügen.

3. Fügen Sie Ihre Scroll-Animation zu Elementor hinzu

Sobald Sie mit Ihrer Scroll-Animation zufrieden sind, können Sie sie Ihrem Elementor-Design hinzufügen.

Sie könnten ein separates Elementor-Design ausschließlich für die Scroll-Animation erstellen. Oder Sie könnten die Scroll-Animation auch als Teil eines größeren Designs integrieren. In diesem Fall würden Inhalte über und unter der Scroll-Animation statisch bleiben.

Starten Sie zunächst den Elementor-Editor für den Inhalt, dem Sie Ihre Scroll-Animation hinzufügen möchten.

Dann, hier ist, wie man die Scroll-Animation hinzufügt:

Fügen Sie das Shortcode-Widget von Elementor dort hinzu, wo die Scroll-Animation erscheinen soll.
Fügen Sie den Shortcode der Animation ein ( auch hier finden Sie ihn, indem Sie zu Scrollsequence → Scrollsequence gehen ) .
Klicken Sie in den Einstellungen des Shortcode -Widgets auf die Schaltfläche Übernehmen, damit Elementor eine Live-Vorschau Ihrer Animation im Editor generiert.

Fügen Sie dem Elementor-Editor einen Animations-Shortcode hinzu.

Sie können Ihre vollständige Animation erleben, ohne den Elementor-Editor zu verlassen – scrollen Sie einfach in der visuellen Vorschau nach unten!

Und das war’s – Sie haben gerade gelernt, wie man eine filmische Scroll-Animation in Elementor einrichtet, genau wie Apple es mit so vielen seiner Zielseiten tut.

Wenn Sie zusätzliche Animationen erstellen oder Ihrer Animation neue Szenen hinzufügen möchten, müssen Sie nur die Schritte von oben wiederholen.

Erstellen Sie noch heute Ihre erste Elementor-On-Scroll-Animation

Die Leute lieben Elementor wegen der Flexibilität, die es Ihnen bei der Erstellung Ihres Designs gibt.

Eine Sache, die Elementor jedoch nicht alleine kann, ist das Einrichten der Arten von Filmen für Scroll-Animationen, die Sie von Apple und anderen sehen.

Indem Sie Elementor mit Scrollsequence koppeln, können Sie diese Arten von Animationen ganz einfach zu Ihren Elementor-Designs hinzufügen.

Wenn Sie es ausprobieren möchten, haben Sie zwei Möglichkeiten:

Verwenden Sie einfach die kostenlose Version von Scrollsequence auf WordPress.org.
Verwenden Sie die 14-tägige kostenlose Testversion, um auf alle Premium-Funktionen in Scrollsequence zuzugreifen.

Wenn Sie sich entscheiden, die Premium-Version von Scrollsequence zu verwenden, können Sie unseren exklusiven Scrollsequence-Gutschein verwenden, um 20 % auf Ihre Bestellung zu sparen.

20% RABATT

Scrollsequenz

Erhalten Sie mit dem WPMAYOR20-Gutschein einen exklusiven Rabatt von 20 % auf Scrollsequence. Erstellen Sie Ihre Scroll-Animation in wenigen Minuten.

Erhalten Sie mit dem WPMAYOR20-Gutschein einen exklusiven Rabatt von 20 % auf Scrollsequence. Erstellen Sie Ihre Scroll-Animation in wenigen Minuten. Zeige weniger

Haben Sie noch Fragen zum Hinzufügen von Animationen zum Scrollen in Elementor? Rufen Sie uns im Kommentarbereich an und lassen Sie uns wissen, was Sie denken.

So fügen Sie eine Animation beim Scrollen in Elementor hinzu (wie Apple AirPods)

So erstellen Sie filmische Scroll-Animationen in Elementor mit Scrollsequence

1. Installieren Sie das Scrollsequence-Plugin

20i WordPress-Hosting

Einzelheiten

Astra

Einzelheiten

Astra-Geburtstagsverkauf

Einzelheiten

Autonom

Einzelheiten

Avada

Einzelheiten

Scheune2

Einzelheiten

Biber Baumeister

Einzelheiten

Blauwirt

Einzelheiten

Kostenlose Domain mit Bluehost

Einzelheiten

Bekanntmachung

Einzelheiten

ElementorPro

Einzelheiten

EngineThemen

Einzelheiten

Unverzichtbares Plugin

Einzelheiten

Pronto All-in-One

Einzelheiten

Murmeltier

Einzelheiten

Züchter

Einzelheiten

Menschliche Präsenz

Einzelheiten

IconicWP

Einzelheiten

IconicWP

Einzelheiten

KBucket

Einzelheiten

Sprachen

Einzelheiten

Flüssiges Netz

Einzelheiten

Flüssiges Netz

Einzelheiten

Magnifi-Video-Widget

Einzelheiten

Master-Addons für Elementor

Einzelheiten

Newsletter-Kleber

Einzelheiten

Benachrichtigung X

Einzelheiten

OceanWP

Einzelheiten

Bestellbar

Einzelheiten

Outtrichter

Einzelheiten

Zahlungsseite

Einzelheiten

PeepSo

Einzelheiten

Schnell

Einzelheiten

Scrollsequenz

Einzelheiten

ShopReady

Einzelheiten

Spotlight PRO

Einzelheiten

Stellarer Verkauf

Einzelheiten

Stellarer Verkauf

Einzelheiten

Tripetto Pro