Animationen, die durch Scrollen ausgelöst werden, können die Interaktivität Ihrer Website erhöhen und den Inhalt interessanter machen. Wenn die Benutzer nach unten scrollen, verleihen Animationen Ihrer Seite Tiefe, wecken die Aufmerksamkeit und machen das Browsing-Erlebnis noch intensiver. Wenn Sie Folgendes verwenden Elementor Proist das Hinzufügen dieser Animationen ganz einfach. Hier finden Sie eine Anleitung, die Ihnen den Einstieg erleichtert und Ihnen hilft, das Beste aus diesen Effekten herauszuholen, einschließlich Parallaxen-Animationen für ein mehrschichtiges Design.

Warum scroll-gesteuerte Animationen verwenden?

Diese Animationen haben einige bedeutende Vorteile:

• Wichtige Elemente hervorheben: Animationen ziehen auf natürliche Weise die Aufmerksamkeit auf sich und helfen Ihnen, wichtige Bereiche Ihrer Website hervorzuheben.
• Verbessern Sie das Engagement der Benutzer: Wenn sich der Inhalt nach und nach offenbart, ist die Wahrscheinlichkeit größer, dass die Nutzer dabei bleiben.
• Eine Geschichte erzählen: Die Art und Weise, wie sich der Inhalt entfaltet, kann den Benutzer Schritt für Schritt durch Ihre Seite führen und sein Interesse aufrechterhalten.

Mit Elementor Proist es ganz einfach, diese Animationen zu implementieren und Ihre Website zu Leben.

Schritt 1: Einrichten Ihrer Seitenstruktur in Elementor Pro

Bevor Sie mit der Animation beginnen, müssen Sie die Grundstruktur Ihrer Seite einrichten. Nehmen wir zum Beispiel an, Sie erstellen eine Hero-Sektion mit einer Überschrift, einem Bild und unterstützendem Text.

Einen neuen Abschnitt erstellen:

1. Öffnen Sie Elementorfügen Sie eine neue Seite hinzu und verwenden Sie Elementor Edit, um zur Bearbeitungsseite zu gelangen.

2. Klicken Sie auf das "Neuen Container hinzufügen" auf der Seite.

3. Wählen Sie eine zweispaltiges Layout mit der linken Seite, um Textinhalte hinzuzufügen (z. B. eine Titel und Begleittext) und die rechte Seite, um ein Bild zur optischen Aufwertung hinzuzufügen.

Inhalt hinzufügen:

1. Linke Spalte: Hinzufügen einer Titel-Widget und ein Text-Widget um die wichtigsten Informationen auf der Seite anzuzeigen.

2. Rechte Spalte: fügen Sie ein Bild-Widget um ein entsprechendes Bild zu platzieren, das die Seite optisch aufwertet.

Jeder Block kann verändert werden, um die gewünschten Elemente zu ergänzen. Diese einfache Einrichtung schafft die Voraussetzungen für ein effektives Design, bevor Sie mit dem Hinzufügen von Animationen beginnen.

Schritt 2: Hinzufügen einer Bildlaufanimation zu Ihrer Überschrift

Lassen Sie die Überschrift animieren, damit sie sanft von links nach unten gleitet, wenn der Benutzer scrollt.

Auswählen des Überschriften-Widgets:

• Klicken Sie auf das Widget Überschrift, um seine Einstellungen zu öffnen.

Aktivieren von Bildlaufeffekten:

• Gehen Sie auf die Registerkarte Erweitert.

• Unter Bewegungseffekte, einschalten Bildlaufeffekte.

Einstellen des horizontalen Bildlaufs:

• Aktivieren Sie die Horizontales Blättern Wirkung.

• Stellen Sie die Richtung auf "von links nach rechts.“

• Stellen Sie die Geschwindigkeit auf etwa 4 für einen glatten, sichtbaren Effekt.

Vorschau:

Wenn Sie die Seite scrollen, sehen Sie, wie die Überschrift von links nach innen gleitet. Sie können die Geschwindigkeit und Richtung anpassen, bis Sie den gewünschten Effekt erzielen.

Schritt 3: Hinzufügen eines Parallaxen-Effekts zum Bild

Um Ihre Seite dynamischer zu gestalten, fügen wir nun einen Parallaxen-Effekt zum Bild hinzu. Das Bild bewegt sich mit einer anderen Geschwindigkeit als der Text, wodurch ein mehrschichtiger, 3D-ähnlicher Effekt entsteht.

Auswählen des Bild-Widgets:

• Klicken Sie auf das Bild-Widget und öffnen Sie seine Einstellungen.

Aktivieren von Bildlaufeffekten:

• Aktivieren Sie unter der Registerkarte Erweitert Scroll-Effekte.

Vertikales Blättern anwenden:

• Aktivieren Sie den vertikalen Bildlauf und setzen Sie die Geschwindigkeit auf etwa 1,5. Dies erzeugt einen subtilen, sanften Parallaxen-Effekt, wobei sich das Bild langsamer bewegt als der Text.

Hinzufügen von Änderungen der Deckkraft:

• Aktivieren Sie Transparenz unter den Bildlaufoptionen.

• Stellen Sie die Transparenz Niveau zwischen 0% (vollständig transparent) zu 100% (vollständig sichtbar)so dass das Bild allmählich eingeblendet wird, wenn der Benutzer auf der Seite nach unten scrollt. Passen Sie den Schieberegler des Ansichtsfensters an, um den Beginn und das Ende des Einblendungseffekts zu steuern und den Bildlauf mit einem sanften visuellen Übergang zu bereichern.

Dadurch wird das Bild nach und nach eingeblendet, was dem visuellen Erlebnis mehr Tiefe verleiht.

Schritt 4: Erstellen eines mehrschichtigen Bildes mit Parallaxe

Um das Design noch weiter zu verbessern, können Sie anderen Elementen, z. B. Hintergrundbildern, Parallaxen-Effekte hinzufügen.

Hinzufügen eines Hintergrundbildes:

• Klicken Sie auf den äußeren Container Ihres Abschnitts und gehen Sie auf die Registerkarte Stil.

• Fügen Sie ein Hintergrundbild hinzu.

Aktivieren von Bildlaufeffekten für den Hintergrund:

• Aktivieren Sie auf der Registerkarte Erweitert Bildlaufeffekte.

• Stellen Sie die vertikale Bildlaufgeschwindigkeit auf etwa 0,5 ein, damit sich der Hintergrund langsamer bewegt als die Vordergrundelemente.

Vorschau:

Wenn Sie nach unten scrollen, sehen Sie einen völlig dynamischen Effekt: Die Überschrift gleitet nach innen, das Bild bewegt sich mit einem Parallaxen-Effekt, und der Hintergrund verschiebt sich dezent nach hinten.

Schritt 5: Scroll-Animation für Text hinzufügen

Wählen Sie das Text-Widget aus:

• Klicken Sie auf die Textfeld um die Einstellungsoberfläche für den Text aufzurufen.

Aktivieren Sie den Bildlaufeffekt:

1. Gehen Sie zu die Fortgeschrittenen Registerkarte.
2. Unter Bewegungseffekte, aktivieren Blättern Auswirkungen.

Wählen Sie die Transparenz um einen Verblassungseffekt für den Text zu erzeugen.

Legen Sie die Transparenz-Animation fest:

• Legen Sie den Transparenzbereich von 0% (völlig transparent) zu 100% (vollständig sichtbar). Der Text wird von transparent zu sichtbar verblassen, wenn der Benutzer die Seite scrollt, wodurch ein sanfter Übergang entsteht.

Legen Sie den Auslösepunkt fest:

• In der Scroll-Effekt Einstellungen, können Sie die Ansichtsfenster Prozentsatz, um festzulegen, wo die Animation den Bildlauf beginnt und beendet. Wenn Sie zum Beispiel festlegen, dass die Animation ausgelöst wird, wenn der Benutzer zwischen 20% und 80% von die Seite ermöglicht, dass der Text zusammen mit dem Seiteninhalt angezeigt wird.

Schritt 6: Einblendungseffekt hinzufügen

Wählen Sie den Effekt Einblendung:

• Unter dem Erweitert > Bewegungseffekte Registerkarte, wählen Sie In Animation, und wählen Sie dann Einschieben aus dem Dropdown-Menü.

• Sie können Einschub von links, Einschub von rechts oder Einschub von unten nach oben wählen, je nach Ihren Gestaltungswünschen.

Dies gilt für alle Szenarien, in denen Sie die visuelle Attraktivität einer Webseite und die Interaktivität der Benutzer verbessern möchten.

Schritt 7: Optimierung der Benutzerfreundlichkeit

Durch Scrollen ausgelöste Animationen können eine Website erheblich aufwerten, aber Sie müssen dafür sorgen, dass die Benutzererfahrung reibungslos verläuft. Hier sind einige Tipps:

Einfach halten: Zu viele Animationen können den Benutzer überwältigen. Beschränken Sie sich auf einige wenige, gut platzierte Effekte, um ein professionelles Aussehen zu erhalten.

Mobile Optimierung: Nicht jede Animation funktioniert gut auf mobilen Geräten. In Elementor Pro können Sie bestimmte Animationen für Mobiltelefone und Tablets deaktivieren, um die Website responsiv und benutzerfreundlich zu halten.

Cross-Browser-Tests: Scroll-Animationen können sich in verschiedenen Browsern unterschiedlich verhalten. Testen Sie Ihr Design immer in gängigen Browsern, um Konsistenz zu gewährleisten.

Fazit

Durch Scrollen ausgelöste Animationen und Parallaxen-Effekte können Ihre Website verwandeln und sie ansprechender und attraktiver machen. Mit den Funktionen von Elementor Pro können Sie alles implementieren, von subtilen Textanimationen bis hin zu komplexen, überlagerten Designs. Wenn Sie es richtig anstellen, lenken diese Effekte die Aufmerksamkeit des Benutzers, erzählen eine Geschichte durch Ihren Inhalt und schaffen ein nahtloses Browsing-Erlebnis auf allen Geräten.

Wenn Sie diese Schritte befolgen, können Sie dynamische, fesselnde Webseiten erstellen, die den Benutzer in ihren Bann ziehen, während das Design gleichzeitig funktional und responsiv bleibt.