Scroll-triggered animations can be a game-changer for your website, enhancing its interactivity and making the content more engaging. As users scroll down, animations bring depth to your page, grabbing attention and making the browsing experience more immersive. If you’re using Elementor Pro, adding these animations is straightforward. Here’s a guide to help you get started and make the most of these effects, including parallax animations for a more layered 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 Pro, it’s easy to implement these animations and bring your website to Leben.
Schritt 1: Einrichten Ihrer Seitenstruktur in Elementor Pro
Before you start animating, you need to set up the basic structure of your page. For example, let’s say you’re creating a hero section with a headline, an image, and supporting text.
Einen neuen Abschnitt erstellen:
- Öffnen Sie Elementorfügen Sie eine neue Seite hinzu und verwenden Sie Elementor Edit, um zur Bearbeitungsseite zu gelangen.
- Klicken Sie auf das "Neuen Container hinzufügen” button on the page.
- 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:
- Linke Spalte: Hinzufügen einer Titel-Widget und ein Text-Widget um die wichtigsten Informationen auf der Seite anzuzeigen.
- 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
Let’s animate the headline so it smoothly slides in from the left as the user scrolls down.
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.
- Set the direction to “von links nach rechts."
- Stellen Sie die Geschwindigkeit auf etwa 4 für einen glatten, sichtbaren Effekt.
Vorschau:
When you scroll the page, you’ll see the headline slide in from the left. You can tweak the speed and direction until you get the desired effect.
Schritt 3: Hinzufügen eines Parallaxen-Effekts zum Bild
To make your page more dynamic, we’ll now add a parallax effect to the image. The image moves at a different speed from the text, creating a layered, 3D-like effect.
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:
As you scroll down, you’ll see a fully dynamic effect: the headline slides in, the image moves with a parallax effect, and the background shifts subtly in the back.
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:
- Gehen Sie zu die Fortgeschrittenen Registerkarte.
- 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.
This applies to all scenarios where you want to enhance a web page’s visual appeal and user interactivity.
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
Scroll-triggered animations and parallax effects can transform your website, making it more engaging and visually appealing. With Elementor Pro’s features, you can implement anything from subtle text animations to complex, layered designs. When done right, these effects guide the user’s attention, tell a story through your content, and create a seamless browsing experience across all devices.
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.