Elementor-Scroll-Effekte: 16 Bild-Scroll-Animationen

Wichtige Erkenntnisse

• Elementor-Scroll-Effekte im Stock-Editor sind sechs Steuerelemente unter Erweitert > Bewegungseffekte > Scroll-Effekte (Vertikale Schriftrolle, Horizontale Schriftrolle, Transparenz, Unschärfe, Drehen und Skalieren), und jeder einzelne bewegt ein einzelnes Element.
• Die Scrolling Effects-Steuerelemente sind eine Elementor Pro-Funktion und das kostenlose Elementor 4.3.2-Plugin enthält sie nicht.
• Die 16 Bild-Scroll-Effekte auf dieser Seite sind Master Addons Widget Builder Widgets, die eine Vollbildbühne feststecken und einen ganzen Satz Bilder gegen die Scroll-Position animieren, darunter ein 3 D-Würfel, ein Seitenwechselbuch und ein Stapelkartendeck.
• Jedes der 16 Scroll-Widgets verfügt über einen eigenen Zip-Download mit einer JSON-Datei und einem README, und das JSON wird über Master-Addons > Widget Builder > Import Widget importiert, das nur .json-Dateien akzeptiert.
• Jedes der 16 Widgets enthält eine Vorschrift mit reduzierter Bewegung, sodass Besucher, die die Bewegung in ihrem Betriebssystem deaktivieren, anstelle der Animation ein Standbild erhalten.

Elementor-Scroll-Effekte, wie die meisten Menschen sie treffen, sind die Scrolling Effects-Steuerelemente im Motion Effects-Panel: vertikales Scrollen, horizontales Scrollen, Transparenz, Unschärfe, Drehen und Skalieren. Jeder stupst ein einzelnes Bild oder eine einzelne Überschrift an, während sich die Seite bewegt, und das ist so weit wie möglich. Das Feststecken eines Abschnitts, während sich ein Würfel darin dreht, liegt jenseits von ihnen.

Dieser Beitrag zeigt 16 Bildscroll-Animationen, die in diesem größeren Maßstab funktionieren Jedes ist ein fertiges Widget für den Master Addons Widget Builder mit einer Live-Demo, die Sie öffnen können, bevor Sie etwas installieren Unten finden Sie, was jeder Effekt macht, welche Art von Website es passt, wie man das Set importiert und was man auf Geschwindigkeit und Zugänglichkeit überprüfen kann.

Was Elementor-Scroll-Effekte allein bewirken können

Elementoreigene Scroll-Effekte verändern beim Scrollen des Besuchers eine Eigenschaft eines ElementsSie wählen ein Widget oder einen Container aus, öffnen Fortgeschritten > BewegungseffekteEinschalten Scrollende Effekteund wählen Sie aus sechs Optionen. Hilfeseite zu den Bewegungseffekten von Elementor Listet sie als Vertical Scroll, Horizontal Scroll, Transparency, Blur, Drehen und Skala auf.

Diese Steuerelemente gehören zu Elementor Pro. Wir haben das kostenlose Plugin Elementor 4.3.2 überprüft und die Scroll-Steuerelemente sind nicht darin enthalten.

Ein Scroll-Effekt weiß nur von seinem eigenen Element und dem Viewport, er hat keine Möglichkeit, einen Ausschnitt an Ort und Stelle zu halten, während sich der Inhalt darin ändert, und er kann zehn Bilder nicht koordinieren, damit sie der Reihe nach ankommen Parallaxe auf einem Heldenbild lässt sich so einfach einrichten Ein Foto, das beim Lesen in Puzzleteile zerbricht und sich wieder zusammensetzt, benötigt ein individuelles Widget, das der Rest dieses Beitrags behandelt.

Wenn Sie nur eine einfache Parallaxe benötigen, ist die Rellax-erweiterung In Master Addons kümmert es sich darum und unsere Animationsübersicht Decken Eingang und schwebende Effekte.

Was Sie brauchen, um diese Widgets auszuführen

Sie benötigen Elementor, Master Addons und den Widget Builder, auf der Elementor-Seite reicht das kostenlose Elementor-Plugin, denn keines dieser Designs verwendet Elementor Pro Widgets oder dessen Motion Effects Panel.

Die Widgets werden importiert und bearbeitet in der Widget-builderDas ist eine Master Addons Pro-Funktion Pläne sind auf der Preisseite. Jedes Design unten hat einen eigenen Download-Link neben seiner Live-Demo, und es gibt kein E-Mail-Gate.

Außerdem werden eigene Bilder gewünscht Die Demos verwenden Public Domain und offen lizenzierte Fotografien, und jedes Widget hat Bildfelder oder einen Repeater, sodass der Austausch einige Minuten dauert.

Für die Live-Demos ist nichts installiert. Öffnen Sie eines und scrollen Sie es in ein paar Fenstergrößen. Dies ist die schnellste Möglichkeit zu erkennen, ob ein Bewegungsstil zu Ihren Inhalten passt.

16 Bildscroll-Effekte für Elementor

Die 16 Bild-Scroll-Effekte lassen sich in fünf Gruppen einteilen: Pinned-Lavents, 3 D-Objekte, Kartendecks, endlose Galerien, Index - oder Shop-Layouts Die meisten von ihnen verwenden das gleiche Fundament Das Widget gibt sich eine hohe Start - und Landebahn, steckt mit klebriger Positionierung eine Ein-Bildschirm-Bühne darin ein und liest, wie weit man durch die Start - und Landebahn gescrollt ist, um die Animation zu fahren Scrollen wieder nach oben und alles läuft umgekehrt.

Gepinntes Bild enthüllt

Diese vier halten einen Rahmen still und verändern, was sich darin befindet Sie passen zu langen Seiten, wo jedes Bild mit einem Absatz geliefert wird.

1. Blendenindex

Jeder Eintrag beginnt als dünnes horizontales Band und öffnet sich zu einem vollständigen Foto, wenn er die Mitte des Bildschirms erreicht, so wie sich ein Blattverschluss öffnet Der Titel sitzt quer über dem Bild und die Einträge wechseln sich links und rechts auf der Seite ab Der Rahmen bleibt angeheftet, während sein Text vorbeiscrollt, dann lässt er los.

Es handelt sich um eine Bildenthüllung auf Schriftrolle mit dunklem Untergrund, schmeichelt also Nachtfotografie und Produktaufnahmen auf Schwarz Vier bis sechs Einträge sind das komfortable Sortiment.

2. Schindelrahmen

Ein Rahmen bleibt rechts fixiert, während die Kopie links scrollt, je mehr jeder neue Textblock ankommt, so gleitet sein Bild über den vorherigen innerhalb desselben Rahmens, wie Schindeln auf einem Dach Der Seitenhintergrund ändert mit jedem Bild seine Farbe.

Die Farbverschiebung sagt dem Leser, dass ein neues Kapitel begonnen hat, sodass Sie die Trennwände und Unterüberschriften fallen lassen können. Verwenden Sie es für Fallstudien und Feature-Touren mit vier oder fünf Elementen, die jeweils einen Absatz verdienen.

3. Taubenschwanzkapitel

Jedes Kapitel hält ein in ineinandergreifende Stichsägenstücke geschnittenes Bild, sie beginnen verstreut und gedreht, Scrollen führt sie nach Hause, und die Bildunterschrift erscheint, sobald das Bild ganz ist.

Die Position jedes Stücks errechnet sich aus dem Scroll-Offset, so dass die Animation nie vor dem Leser läuft oder hinterher hinkt, für Storytelling-Seiten mit zwei bis vier großen Bildern funktioniert es gut, ich würde nicht über vier hinausgehen, denn der Trick lässt nach.

4. Schussgitter

Der Abschnitt öffnet sich auf einem Foto bei voller Ausblutung Scrollen, und es schrumpft an seinen Platz in einem dreispaltigen Raster, während die anderen Bilder um es herum einfliegen Weiter scrollen und die Reihen teilen sich, um Platz für eine Überschrift und einen Knopf zu schaffen.

Dies ist ein starker Held für eine Shop - oder Studio-Homepage, denn sie bewegt sich von einem großen Bild über die vollständige Sammlung zu einem Call-to-Action in einem einzigen Abschnitt Für statische Alternativen siehe unsere Elemente Hero Abschnitt Vorlagen.

3 D-Scroll-Effekte

Diese vier verwenden CSS 3 D-Transformationen und Perspektive, und die Bildlaufposition treibt sie anWenn Sie 3 D wollen, das auf einem Timer spielt oder auf Pfeile reagiert, unser Leitfaden zu den Elementor 3 D Karussell Deckt diese Seite ab.

5. Facettenwürfel

Sechs Fotografien sitzen auf den sechs Gesichtern eines Würfels Der Würfel dreht pro Scrollstrecke eine Fläche, während sich das Foto, dem Sie gegenüberstehen, über den gesamten Hintergrund ausbreitet Eine Miniaturbildschiene rechts zeigt, wo Sie sind und lässt Sie zu jedem Gesicht springen.

Sechs ist die harte Grenze, da ein Würfel sechs Seiten hat Das macht ihn zu einer ordentlichen Passform für ein kurzes Portfolioset oder einen Bereich mit sechs Produkten.

6. Orbit Tube

Ringe von Fotokarten stehen um eine vertikale Achse, übereinander gestapelt, um eine Röhre zu bilden. Man betrachtet sie von knapp außen, sodass die nahe Wand groß über den Bildschirm verläuft und die hintere Wand durch die Lücken klein und dunkel erscheint. Auf der Achse der Demo befindet sich ein Glaskugel, und das Widget bietet weitere mittlere Objekte, darunter eine Kugel, ein Atom, einen Ringplaneten, einen Drahtwürfel, ein Bild oder ein Symbol.

Es braucht viele Bilder, um es als Röhre zu lesen, also denken Sie an Galerien mit sechzehn oder mehr Personen.

7. Staffel

Easel Rack ist eine Schriftrollengalerie, die in der Tiefe steht Jedes Bild ist eine Platte, die von Ihnen abgewandt ist, bis die Schriftrolle sie auf gleicher Höhe mit der Mitte des Bildschirms bringt, wo sie sich umschwenkt, um Ihnen zugewandt zu sein Bildunterschriften sitzen neben den Platten und die Gegenstände im Zickzack links und rechts.

Die Demo durchläuft sechs Phasen eines Töpferstudios, und das ist die natürliche Verwendung dafür: Prozessschritte oder eine nummerierte Liste von Dienstleistungen.

8. Quire-Buch

Ein geschlossenes Buch öffnet sich beim Scrollen, dann dreht es eine Seite nach der anderen Jedes Blatt wird auf beiden Seiten gedruckt und schwenkt auf dem Rücken, so dass man die Rückseite einer Seite sieht, während es übergeht Scrollen Sie nach oben und das Buch schließt sich wieder.

Die Demo ist ein Restaurantmenü mit Foto auf der linken Seite und Geschirr auf der rechten Seite, passt auch zu Lookbooks und Broschüren, mit ab JavaScript fallen die Seiten in Lesereihenfolge auf eine einfache Spalte zurück, sodass sich nichts vor Suchmaschinen oder Screenreadern verbirgt.

Kartendecks

9. Riffle Deck

Dies ist das Stapeln von Karten auf Scrollmuster, gemacht mit Portraitkarten Jeder Scrollschritt legt die nächste Karte in einem leichten Winkel auf den Stapel Die Hintergrundfarbe verschiebt sich passend zu jeder Karte, und eine kleine Fortschrittsleiste zählt durch das Set.

Am besten funktionieren Porträtbilder: Poster, Buchumschläge, Verpackungen, App-Bildschirme Sechs bis acht Karten sind ungefähr richtig.

10. Zerschmettern Sie Deck

Shatter Deck ist ein Vollformatdeck mit Fotografien, jedes mit einer Beschriftung und einem Knopf, und zwei Pfeilen, um sich durch sie zu bewegen, die Bewegung zwischen den Bildern schneidet das Bild in ein Raster aus kleinen Kacheln, streut sie und bringt sie als nächste Fotografie wieder zusammen.

Aus dem Karton heraus bewegt man sich mit den Pfeilen, einem horizontalen Widerstand oder den Pfeiltasten durch, sobald das Deck den Fokus hat Die Seite behält ihren normalen vertikalen Scroll Schalten Sie die Scrollen Sie zum Scrub Steuerung und die Schriftrolle treibt stattdessen den Übergang an, bei aktivierter reduzierter Bewegung hören die Fliesen auf zu fliegen und das Deck überblendet.

Endlose Scroll-Galerien

Diese drei Schleifen Es gibt kein erstes oder letztes Bild, was mehr zum Stöbern als zum Lesen passt.

11. Salon Hang

Salon Hang ist eine Wand ohne Ober - und ohne Unterseite Bilder hängen in einer Spalte, um verschiedene Beträge links und rechts von der Mitte geschoben und auf unterschiedliche Breiten geschnitten, so wie ein Salon hängt, drängt sich eine Galeriewand auf Nach dem letzten Bild kommt wieder das erste Klicken Sie auf ein Bild und es wächst zu einer eigenen Seite mit einer Bildunterschrift und einem Zurück-Button.

Verwenden Sie es für Fotoportfolios, bei denen die Reihenfolge keine Rolle spielt und jedes Bild einen genaueren Blick verdient.

12. Filamentfaden

Fotos in der Größe von Briefmarken sind an einem geschlossenen Faden aufgereiht, der sich über den Bildschirm windet, man fährt durch Scrollen am Faden entlang, wo immer er die Bühnenmitte passiert, schwellen die Bilder wie unter einer Loupe auf, und eine Bildunterschrift nennt die davorliegende Foto zum Öffnen.

Es ist das beste der sechzehn für große Archive, denn kleine Miniaturansichten bedeuten, dass viele Bilder auf einmal auf den Bildschirm passen Ohne JavaScript zeigt das Widget jedes Foto in einem einfachen Raster.

13. Rollenporträts

Reel Portraits zeigt Vollbildporträts einzeln, in einer Schleife, über jedes trägt ein einzelnes, sehr großes Wortset, das seitwärts entlang einer Kurve wie Typ auf einer Drehtrommel verläuft, wobei eine handgeschriebene Linie es in die andere Richtung kreuzt. Das Foto bewegt sich mit einer Parallaxendrift hinter dem Typ, und ein nummerierter Index sitzt unten auf der linken Seite.

Es ist das lauteste Design der sechzehn, und es passt zu Mode - und Redaktionsseiten Geben Sie ihm fünf oder sechs starke Bilder und jeweils ein Wort.

Indizes und Shop-Layouts

14. Balgindex

Balgindex zeigt ein Werkstück einzeln an. Jedes hat eine große Überschrift, zwei überlappende Platten mit demselben Bild und eine Bildunterschrift, und die gesamte Seite nimmt für jeden Eintrag eine neue Farbe an. Die Überschrift wird in einer variablen Schriftart festgelegt und das Widget schreibt den Bildlaufdruck auf seine Breitenachse, sodass sich das Wort während der Bewegung ausdehnt und absetzt.

Am besten liest es sich mit vier bis acht Einträgen Probieren Sie es für eine Ausstellung oder eine Reihe vorgestellter Projekte aus.

15. Gezeitenindex

Tide Index hat zwei Spalten, die gegeneinander wandern Titel laufen links runter und die Leute, die sie gemacht haben rechts runter, beim Scrollen gleitet jede Zeile seitwärts auf einer Welle, die linke Spalte in eine Richtung und die rechte ihren Spiegel, während dazwischen eine Fotografie für die aktuelle Zeile sitzt.

Dieser ist vom Typ her geführt, wobei das Bild eine Nebenrolle spielt Es passt zu Kreditlisten und langen Projektindizes.

16. Swatch-Shop

Swatch Shop ist ein Korridor aus Produktfotos, den Sie durch Scrollen nach unten gehen. Während ein Produkt vorne ist, nimmt der ganze Raum seine Farbe an und eine Karte daneben zeigt den Namen, eine kurze Beschreibung, den Preis, Größenoptionen und einen Knopf Eine Spalte mit Farbpunkten auf der rechten Seite markiert Ihren Platz.

Es ist für kleine Kataloge gebaut: Floristen, Keramik, Kerzen, Drucke Sieben Produkte füllen die Demo.

Alle 16 Scroll-Effekte im Überblick

Verwenden Sie diese Tabelle, um einen Scroll-Effekt mit dem Inhalt abzugleichen, den Sie haben Artikelzahlen sind, was das Layout bequem verarbeitet.

Laden Sie die 16 Scroll-Effekt-Widgets herunter

Jedes Widget ist ein separater Zip, sodass Sie nur diejenigen herunterladen, die Sie verwenden möchten. Jeder Zip enthält zwei Dateien: den JSON des Widgets und einen README, der seine Steuerelemente auflistet.

Entpacken Sie eine Datei, bevor Sie sie importieren Der Widget Builder-Importeur liest .json-Dateien und akzeptiert den Zip selbst nicht.

So importieren Sie ein Scroll-Widget in Elementor

Sie importieren jedes Widget durch den Master Addons Widget Builder, ziehen es dann wie jedes andere Elementor Widget auf eine Seite Das Ganze dauert etwa zwei Minuten pro Design.

1. Laden Sie das gewünschte Widget herunter und entpacken Sie es. Darin befindet sich eine Datei mit dem Namen like widget-facet-cube.json„Plus ein README.
2. Gehen Sie in Ihrem WordPress-Dashboard auf Master-Addons > Widget Builder und klicken Widget importieren.
3. Ziehen Sie eine.json-Datei in den Upload-Bereich oder klicken Sie auf Dateien durchsuchen Und wählen Sie es aus. Der Importeur nimmt jeweils eine Datei, also wiederholen Sie dies für jedes gewünschte Design.
4. Öffnen Sie eine beliebige Seite in Elementor und durchsuchen Sie das Widget-Panel nach dem Namen des Designs, zum Beispiel “Facet Cube” Ziehen Sie es in einen Container voller Breite.
5. Ersetzen Sie die Demobilder und den Text auf der Registerkarte Inhalt und legen Sie dann Farben und Typografie auf der Registerkarte Stil fest.

Diese Dateien gehen nicht über die eigenen von Elementor Vorlagen > Importieren Bildschirm. Dieser Importeur ist für Seiten- und Abschnittsvorlagen bestimmt, die wir abdecken So importieren Sie eine Elementor-Vorlage. Die festgesteckten Widgets brauchen auch Platz Stellen Sie sie in einen Behälter, der auf volle Breite ohne Polsterung eingestellt ist, sonst sitzt die Bühne in einer schmalen Säule und sieht eng aus.

Lesen Sie auch: So fügen Sie GSAP-Animation in Elementor hinzu, wenn Sie Ihre eigene, durch Bildlauf ausgelöste Animation von Grund auf neu schreiben möchten.

Bildscroll-Widget vs. Bildscroll-Effekt

Ein Bildscroll-Widget und ein Bildscroll-Effekt sind zwei verschiedene Dinge, und die Namen sorgen für Verwirrung. “Bildscroll” bedeutet in den meisten Elementor-Addons einen hohen Screenshot innerhalb eines festen Rahmens, der nach oben gleitet, wenn man mit der Maus darüber fährt Theme-Shops verwenden ihn, um eine lange Seite in einer kleinen Box in der Vorschau anzuzeigen.

Ein Bildscroll-Effekt ist eine an den Seitenscroll gebundene Animation: Bilder, die beim Herunterfahren der Seite durch den Besucher offenbaren, stapeln, wenden oder reisenAlles in diesem Beitrag ist der zweite Typ Wenn die Hover-Vorschau das ist, wofür Sie gekommen sind, benötigen Sie ein Addon mit einem Image Scroll-Widget, denn das tut keiner dieser 16.

Scrollytelling in Elementor

Scrollytelling ist eine Seite, auf der das Scrollen eine Geschichte voranbringt: Ein Bild bleibt festgesteckt, während der Text daneben weitergeht, und das Bild ändert sich bei jedem Schritt. Elementor kann eine Basisversion mit einer klebrigen Spalte erstellen. Der schwierigere Teil besteht darin, das Bild genau dort ansprechen zu lassen, wo sich der Leser befindet.

Drei dieser Widgets sind dafür gebaut Shingle Frame paart jeden Absatz mit einem Bild, das das letzte ersetzt, Dovetail Chapters setzt beim Lesen ein Bild pro Kapitel zusammen, und Quire Book dreht für jeden Abschnitt eine Seite um Für eine längere Geschichte stapelt man zwei davon auf einer Seite mit gewöhnlichen Textabschnitten dazwischen, so dass der Leser eine Pause vom Spielzug bekommt.

Verlangsamen Scroll-Effekte Ihre Website?

Scroll-Effekte verlangsamen eine Seite, wenn sie nachlässig erstellt wird, und die üblichen Übeltäter sind übergroße Bilder und Animationen, die das Layout auf jedem Frame ändern Diese Widgets vermeiden das zweite Problem Sie animieren mit CSS-Transformationen und Opazität, die der Browser an die Grafikkarte übergeben kann, und sie verwenden einen IntersectionObserver, um zu wissen, wann das Widget auf dem Bildschirm ist.

Das Bildgewicht liegt bei Ihnen, da ein Widget, das zwölf Fotos zeigt, zwölf Fotos lädt. Exportieren Sie sie als WebP, vergrößern Sie sie auf die größte Dimension, in der sie erscheinen, und behalten Sie jedes unter etwa 150 KB.

Bei der Barrierefreiheit tragen alle 16 Widgets eine prefers-reduced-motion Regel. ein Besucher, der sein Gerät um weniger Bewegung gebeten hat, bekommt ein Standbild: Weft Grid zeigt sein fertiges Raster mit dem Text darüber an, und Shatter Deck überblendet Shatter Deck ist auch ein echter Tabstopp, so dass die Pfeiltasten funktionieren, sobald es den Fokus hat und die Seite sonst nicht kapern.

Bei Telefonen beinhalten mehrere Designs ein eigenes Schmalbild-Layout Facet Cube bewegt seine Miniaturschiene zu einer Reihe am Fuß der Bühne, und Reel Portraits verwandelt seinen Index in eine Reihe von Zahlen Trotzdem testen Sie das gewählte Widget auf einem echten Telefon, bevor Sie veröffentlichen Hohe festgesteckte Abschnitte fühlen sich unter einem Daumen länger an als unter einem Mausrad Wenn Ihre Website nicht standardmäßige Haltepunkte verwendet, unser Leitfaden dazu Elementor-bruchpunkte Erklärt, wie man sie anpasst.

Ich würde pro Seite einen gepinnten Scroll-Effekt nehmen, höchstens zwei Jede gepinnte Stufe fügt Scroll-Distanz hinzu, und ein Besucher, der drei davon hintereinander durchscrollen muss, wird es spüren.

Häufig gestellte Fragen

Letzte Gedanken

Die integrierten Scroll-Effekte von Elementor geben Ihnen sechs Möglichkeiten, ein Element zu verschieben, und sie leben in Elementor Pro. Die 16 Widgets hier decken den Boden darüber hinaus ab: vier gepinnte Enthüllungen, vier 3 D-Teile, zwei Kartendecks, drei endlose Galerien und drei Index - oder Shop-Layouts, jeweils mit einer Live-Demo und einem Fallback in reduzierter Bewegung.

Um eines auszuwählen, zählen Sie Ihre Bilder und entscheiden Sie, ob ihre Reihenfolge wichtig ist, und wählen Sie dann aus der Tabelle oben aus. Sie können jedes dieser Designs ändern oder ein neues erstellen Widget-builder.

Verwandte Lektüre

• Elementor-Bildbox: 16 Designs mit Live-Demos und Download
• 20 Elementor-Slider-Vorlagen: Coverflow, Zeitleiste, Testimonial und mehr
• Elementor 3 D Karussell: Coverflow, Flip, Arc und Orbit
• 4 Elementor-Animationseffekte-Erweiterung ohne Code
• Elementor-Marquee: Unendlicher Scrolltext, Logos und Aufkleber