Springe zum Hauptinhalt

Entdecken Sie die neuen Scrolling-Animationseffekte auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Heute wurden wir über ein neues Update auf Divi informiert, das sogenannte Scrolling-Animationseffekte bietet. Wir haben es uns angesehen und in diesem Tutorial werden wir zusammenfassen, was uns erwartet.

Lassen Sie uns beginnen.

Was sind die Bildlaufeffekte?

Scroll-Effekte sind anpassbare Animationen, die auf Ihre Besucher reagieren, wenn diese von oben nach unten scrollen. Im Gegensatz zu herkömmlichen Animationen stehen Bildlaufeffekte in direktem Zusammenhang mit dem Bildlaufverhalten Ihres Besuchers. Die Geschwindigkeit und Richtung der Animation basiert auf der Geschwindigkeit und Richtung der Schriftrolle des Besuchers. Die Animationszeitleiste basiert auf der Position des Clips im Browserfenster.

Es scheint kompliziert, aber mit Divi ist es ziemlich vereinfacht

Jedes Element kann mithilfe einer Kombination aus Skalierung, Drehung, horizontaler und vertikaler Bewegung, Deckkraft und Unschärfeeffekten animiert werden. Sie steuern die Stärke jedes Effekts an verschiedenen Stellen in der Animation, dann kümmert sich Divi um den Rest und erstellt schöne Übergänge, wenn diese Elemente hereinkommen und sich in der Sicht Ihres Besuchers bewegen. Erstellen Sie einfache Animationen, die subtile Tiefe und Raffinesse verleihen, oder kombinieren Sie Effekte und animieren Sie mehrere Elemente, um spektakuläre Aktivitätsschübe zu erzeugen, die Ihre Besucher begeistern werden!

6 neue sechs einzigartige Effekte

Effekte zur Auswahl oder in Kombination. Divi verfügt über sechs verschiedene Bildlaufeffekte, die jeweils über unsere neue Benutzeroberfläche für Bildlaufeffekte individuell angepasst werden können. Sie können auch einen der Effekte kombinieren, um komplexere Animationen zu erstellen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Vertikale Bewegung

Der vertikale Bewegungseffekt ermöglicht es jedem Element, die Seite basierend auf der Bildlaufgeschwindigkeit und -richtung eines Besuchers auf und ab zu bewegen. Das Ergebnis ist ein Parallaxeeffekt! Jetzt kann alles verwendet werden, um mit Divi Parallaxeeffekte zu erzeugen. Sie können sogar vertikale Bewegungen mit Parallaxen-Hintergrundbildern kombinieren, um einige wirklich beeindruckende Designs zu erstellen.

Divi Bildeinstellungen

Horizontale Bewegung

Der horizontale Bewegungseffekt ähnelt dem vertikalen Bewegungseffekt, mit der Ausnahme, dass Elemente je nach Richtung und Bildlaufgeschwindigkeit eines Besuchers auf dem Bildschirm von links nach rechts verschoben werden können. . Sie können sogar vertikale und horizontale Bewegungen kombinieren und haben so die vollständige Kontrolle über die Bewegung eines Elements!

Divi-Animationseffekte

Kontextunschärfe

Der Unschärfeeffekt bringt Elemente je nach Geschwindigkeit und Richtung, in die ein Besucher blättert, in den Fokus und aus dem Fokus. Da Sie mit Divi die Werte für Start-, Mittel- und Endunschärfe steuern können, können Sie die Elemente direkt vor den Augen des Besuchers scharfstellen. Dies ist eine großartige Möglichkeit, um auf wichtige Informationen aufmerksam zu machen.

Divi kontextbezogene Unschärfeeinstellung

geschmolzener

Der Überblendungseffekt mit Elementen wird je nach Geschwindigkeit und Richtung der Schriftrolle eines Besuchers ein- und ausgeblendet. Sie können Elemente mischen, verschwinden lassen oder beides. Durch die Kombination von Überblendung, Unschärfe und Skalierung können einige wirklich raffinierte Animationen erstellt werden, die Ihren Designs einen zusätzlichen "Es" -Faktor hinzufügen.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Divi Fade-Effekt

Skalierungseffekt

Durch den Skalierungseffekt wird die Größe eines Elements abhängig von der Geschwindigkeit und Richtung der Schriftrolle eines Besuchers vergrößert oder verkleinert. Wenn Sie auf ein bestimmtes Element aufmerksam machen möchten, z. B. einen Aufruf zum Handeln, können Sie den Skalierungseffekt so einstellen, dass das Element vergrößert wird, wenn es sich der Mitte des Rahmens nähert. Fenster. Natürlich gibt es auch viele andere Möglichkeiten!

Skalierungseffekt

Rotationseffekt

Der Dreheffekt mit dreht ein Objekt in beide Richtungen, basierend auf der Bildlaufgeschwindigkeit und -richtung eines Besuchers. Eine subtile Rotation kann Szenen wirklich zum Leben erwecken. Nur ein wenig Drehen in Kombination mit horizontaler Bewegung kann großartig aussehen! Oder lassen Sie die Elemente im Kreis drehen.

Divi-Rotationseffekt für Bildanpassungen

Eine neue intuitive Benutzeroberfläche

Die wahre Schönheit der Bildlaufeffekte von Divi ist ihre einfache Bedienung! Es gibt eine neue Benutzeroberfläche, die das Erstellen von Webanimationen vereinfacht, sodass alle darauf zugreifen können. Mit nur einem Klick können Sie einen der sechs Bildlaufeffekte von Divi hinzufügen oder kombinieren. Sofort nach dem Auspacken werden sie großartig aussehen! Anschließend können Sie die Effekte optimieren, um noch erweiterte Animationen zu erstellen.

Ein Klick und fertig!

Möchten Sie einem Modul einen Bildlaufeffekt hinzufügen? Ein Klick fügt den Effekt hinzu und es wird auch großartig aussehen! Um einen Bildlaufeffekt hinzuzufügen, greifen Sie einfach auf die neue Optionsgruppe Bildlaufeffekte auf der Registerkarte Erweitert eines Moduls, einer Zeile, einer Spalte oder eines Abschnitts zu. Es können mehrere Effekte gleichzeitig aktiviert werden, und die Effekte werden zu einer glatten Animation kombiniert, die sich beim Scrollen wunderbar verwandelt.

Willst du die volle Kontrolle? Sie haben es !

Sobald Sie einen Bildlaufeffekt aktiviert haben, haben Sie an jedem Punkt der Animation die volle Kontrolle über die Stärke des Effekts. Durch Steuern der Start-, Mittel- und Endwerte steuern Sie was macht Animation. Sobald die Werte festgelegt sind, kümmert sich Divi um den Rest und wechselt das Element, während es sich im Browserfenster bewegt, und erstellt eine Animation.

  • Startwert - Der Status der Startanimation, die verwendet wird, wenn das Element unten im Browserfenster eingegeben wird.
  • Zwischenwert - Der Zwischenanimationsstatus, der übertragen wird, wenn sich das Element in die Mitte des Fensters bewegt.
  • Endwert - Der Endanimationsstatus, der auftritt, wenn das Element das Browserfenster oben auf dem Bildschirm verlässt.

Beispielsweise ändert sich ein Deckkrafteffekt mit einem Startwert von 0 (unsichtbar), einem Medianwert von 100 (vollständig sichtbar) und einem Endwert von 0 (unsichtbar) von einem unsichtbaren Zustand, wenn er eintritt Fenster, bis es in der Mitte des Fensters zu 100% sichtbar wird, verschwindet es beim Verlassen des Fensters in einem unsichtbaren Zustand.

Anpassen der Animationszeitleiste

Sie können nicht nur die Animationswerte anpassen, sondern auch die Animationszeitleiste. Die Timeline-Benutzeroberfläche repräsentiert die Höhe des Browserfensters. Jeder Animations-Keyframe kann an einer anderen Position im Fenster ausgelöst werden. Auf diese Weise können Sie den Start, das Ende und das Timing der Animationsanimation basierend auf der Position des animierten Clips auf der y-Achse des Browserfensters steuern.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • Position des Keyframes starten - Diese Option steuert den Start der Animation. Wenn Sie die Animation verzögern möchten, ziehen Sie die Position des Start-Keyframes nach innen.
  • Position des Keyframes zentrieren - Hiermit wird der Punkt gesteuert, an dem die Animation ihren mittleren Animationswert erreicht. Es muss sich nicht genau in der Mitte der Animationszeitleiste befinden. Sie können den mittleren Keyframe an eine beliebige Position im Fenster verschieben.
  • Ende der Keyframe-Position - Mit diesem Steuerelement wird die Animation beendet. Wenn die Animation beendet werden soll, bevor der Clip das Browserfenster verlässt, können Sie die Position des End-Keyframes nach innen ziehen.

Fügen Sie jeder Animation statische Zustände hinzu

Sie können Ihren Animationen auch Pausen hinzufügen, indem Sie die Dauer Ihres statischen Mittelwerts erhöhen. Um eine statische Animationsdauer zu erstellen, klicken Sie auf die beiden Pfeile, wenn Sie den Mauszeiger über den mittleren Keyframe bewegen. Sie können den mittleren Keyframe dann erweitern, indem Sie seine Kanten hin und her ziehen. Während dieses Punktes in der Animation bleibt das Element statisch. Nach Ablauf der statischen Dauer wechselt die Animation weiter zu ihrem endgültigen Wert.

Was halten Sie von diesen neuen Funktionen? Zögern Sie nicht, Ihre Meinung in den Kommentaren mitzuteilen.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
5 Aktien
Aktie5
tweet
Registrieren