Heute wurden wir über ein neues Update informiert Divi das sogenannte Scrolling-Animationseffekte bietet. Wir haben uns das angeschaut und in diesem Tutorial fassen wir zusammen, was Sie erwarten sollten.
Lassen Sie uns beginnen.
Was sind die Bildlaufeffekte?
Scroll-Effekte sind anpassbare Animationen, die auf Ihre reagieren Besucher während sie auf der Seite nach oben und unten scrollen. Im Gegensatz zu herkömmlichen Animationen stehen Scrolleffekte in direktem Zusammenhang mit dem Scrollverhalten Ihres Benutzers Besucher. Die Geschwindigkeit und Richtung der Animation basiert auf der Geschwindigkeit und Richtung des Scrollens Besucher. Die Animationszeitleiste basiert auf der Position des Elements im Browserfenster.
Klingt kompliziert, aber mit Divi, Es ist ganz einfach
Jedes Element kann mithilfe einer Kombination aus Skalierung, Drehung, horizontaler und vertikaler Bewegung, Deckkraft und Unschärfeeffekten animiert werden. Sie steuern dann die Stärke jedes Effekts an verschiedenen Stellen in der Animation Divi kümmert sich um den Rest und schafft schöne Übergänge, wenn diese Elemente in Ihr Blickfeld eindringen und sich darin bewegen. Besucher. Erstellen Sie einfache Animationen, die subtile Tiefe und Raffinesse verleihen, oder kombinieren Sie Effekte und animieren Sie mehrere Elemente, um spektakuläre Aktivitätsausbrüche zu erzeugen, die Sie begeistern werden Besucher!
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.
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.
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!
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.
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.
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!
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.
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, sondern auch die Animationszeitachse anpassen. Die Timeline-Benutzeroberfläche stellt die Höhe des Browserfensters dar. Jeder Animations-Keyframe kann an einer anderen Position im Ansichtsfenster ausgelöst werden. Auf diese Weise können Sie den Start, das Ende und das Timing der Animation basierend auf der Position des animierten Elements auf der Y-Achse des Browserfensters steuern.
- 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.
