Ein 3 D-Karussell ist ein Karussell, dessen Schlitten sich eher durch die Tiefe als über eine flache Ebene bewegen: rotierend, skalierend oder umlaufend, sodass die inaktiven Schlitten sichtbar hinter dem aktiven sitzen, bei Elementor erhält man es entweder aus dem Bild Carousel Widgets Coverflow-Layout, oder von Ein eigens dafür errichtetes Design.
Vier Stile sind Ihre Zeit wert Sie erledigen verschiedene Arbeiten, und einer davon macht Ihre Seite ohne Nutzen langsamer, wenn Sie sie für den falschen Inhalt auswählen Live-Demos für jeden, plus die Einstellungen, die ein glattes 3 D-Karussell von einem stotternden trennen.
Coverflow: die, die die meisten meinen
Live-Demo Widget JSON herunterladen
Mittelrutsche zeigt dir eckig-auf Die Rutschen auf beiden Seiten drehen sich um die Y-Achse weg, schrumpfen leicht und dimmen Dein Auge kann nirgendwo hin, außer in der Mitte.
Das ist der ganze Trick, und deshalb hat coverflow den Tod von iTunes überlebt Peripheriefolien sind sichtbar genug, um zu beweisen, dass es noch mehr gibt, verschwommen genug, dass man sie nicht lesen kann Die Leute klicken auf den Pfeil, um die Spannung aufzulösen.
Drei Einstellungen erledigen den Großteil der Arbeit:
- Drehen: wie weit sich die Seitenrutschen drehen Alles über 50° und die Nachbarn werden zu unlesbaren Rutschen. 30 bis 40° ist der Bereich, der eher als Tiefe als als als Verzerrung angezeigt wird.
- Tiefe: wie weit hinten sitzen sie Schieben Sie es zu weit und die Seitenrutschen schrumpfen zu Miniaturansichten, und die Komposition verliert das Gleichgewicht.
- Folien pro Ansicht: Coverflow braucht mindestens drei sichtbare oder es gibt keinen “Flow” Setze es auf 3 auf dem Desktop, 1 auf dem Handy, und überspringe die umständliche 2.
Pro braucht man für diesen hier nicht Die Kostenloses Image Carousel Widget Coverflow-Layout eingebaut hat.
Gut für: Fallstudien, Portfoliostücke, Sammlungen im Albumstil.
Schlecht für: Alles, was die Leute vergleichen müssen Coverflow ist so gebaut, dass man sich eine Sache ansieht.
Flip: zweiseitige Karten
Live-Demo Widget JSON herunterladen
Die Karte dreht sich um volle 180° auf ihrer vertikalen Achse Vorne nach außen, Rückseite nach innen Beide Gesichter halten echten Inhalt.
Die meisten 3 D-Effekte sind Deko Das ist es nicht Es verdoppelt den Inhalt pro Folie, weshalb es sich seinen Platz auf einer Team-Seite verdient Foto und Name auf der Vorderseite, Rolle, Bio und Links auf der Rückseite Gleicher Fußabdruck, doppelt so viele Informationen.
Die Einstellung, die die Leute falsch machen, ist Rückseitensicht. Lass es an und du siehst einen gespiegelten Geist der Vorderseite, der durch die mittlere Rotation blutet Es ist subtil genug, um im Editor zu übersehen und auf einem Netzhautbildschirm offensichtlich Schalten Sie es aus.
Zweitens: Halten Sie den Flip unter 600 ms. Ein Flip ist eine Enthüllung, und eine Enthüllung, die eine ganze Sekunde dauert, hört auf, sich ansprechbar zu fühlen und fühlt sich wie ein Ladezustand an.
Gut für: Teamraster, vorher/nachher, Spezifikationskarten, Preise mit umgekehrten Details.
Schlecht für: Alles, wo die Rückseite leer wäre Ein Flip mit nichts dahinter ist ein verschenkter Klick.
Möchten Sie die gleiche zweiseitige Enthüllung wie eine Stehkarte und nicht wie eine Karussellrutsche? Das ist das Elementor-Flipbox-Widget's Job.
Bogen: gleitet auf einer Kurve
Live-Demo Widget JSON herunterladen
Rutschen reiten am Rand eines Kreises, dessen Mitte unterhalb der Falte liegt. Jeder kommt aufrecht an der Spitze des Bogens an und kippt beim Weggehen weg.
Arc ist der am wenigsten verbreitete 3 D-Stil auf WordPress-Seiten, was den größten Wert ausmacht Ein Besucher hat schon hundertmal einen Coverflow gesehen Das haben sie nicht gesehen.
Es kostet Sie etwas im Gegenzug: Die Kippbewegung bedeutet, dass Folien nur am oberen Rand des Bogens vollständig lesbar sind Inhalte, die in der Peripherie lesbar sein müssen (Preise, Daten, Spezifikationen), bekämpfen das Design Bilder und Kurztitel nicht.
Gut für: Kataloge, Exemplarlisten, Menüs, Sammlungen ähnlicher Artikel.
Schlecht für: Daten. Wenn Leute drei Folien auf einmal lesen müssen, verwenden Sie ein Raster.
Umlaufbahn: Kreisbewegung um ein Zentrum
Live-Demo Widget JSON herunterladen
Gegenstände bewegen sich im Vollkreis um ein festes Zentrum Der Gegenstand oben ist aktiv und in voller Größe; der Rest verkleinert sich, wenn sie nach hinten passieren.
Orbit sagt etwas Strukturelles aus, was kein anderes Layout sagt: dieses Loops Ein vierstufiger Prozess, der wirklich zu seinem Start zurückkehrt, liest sich perfekt Ein fünfstufiger Onboarding-Flow, der endet, nicht Ein Kreis verspricht eine Rückkehr, und wenn Ihre Inhalte nicht zurückkehren, warten die Leute auf etwas, das nie kommt.
Verwenden Sie die Umlaufbahn, wenn der Inhalt ein Zyklus ist. Verwenden Sie den Coverflow, wenn es sich um eine Liste handelt.
Gut für: Prozessräder, Ökosystemdiagramme, Fähigkeitskarten, Servicezyklen.
Schlecht für: Sequenzen mit einem Anfang und einem Ende.
Wie man ein 3 D Karussell macht, das nicht stottert
3 D-Transformationen sind auf der GPU günstig und teuer, wenn man sie falsch versteht Vier Dinge trennen ein glattes Karussell von einem scherzhaften, in der Reihenfolge, in der sie dich beißen:
- Beleben Sie nur Transformation und Undurchsichtigkeit. Die Animation von Breite, Höhe, oben oder links erzwingt auf jedem Frame eine Layout-Neuberechnung, Transformierung und Deckkraft gehen direkt zum Compositor Jedes Design hier hält sich an die beiden.
- Die Bildgröße kappen. Ein 3 D-Karussell hält mehrere Folien auf einmal im Speicher, da sie alle sichtbar sind Sechs Folien mit 400 KB sind jeweils 2,4 MB groß, bevor sich etwas bewegt Holen Sie sie unter 200 KB und servieren Sie WebP.
- Stapeln Sie 3 D nicht in 3 D. Eine Flipcard im Inneren einer Coverflow-Spur erzeugt verschachtelte 3 D-Kontexte, und Browser handhaben das inkonsequent Insbesondere Safari mildert die innere Transformation in unvorhersehbaren Momenten Wählen Sie eine.
- Respektieren Sie die reduzierte Bewegung. Manche Menschen haben Vestibularstörungen, und Tiefenanimation ist ein häufiger Auslöser Jedes Design hier fällt auf ein einfaches Ausbleichen, wenn
prefers-reduced-motionGesetzt ist Wenn du dir dein eigenes baust, dann mach es dir gleich.
Teste auf einem Android-Handy der Mittelklasse, nicht im Geräteemulator des Browsers, der Emulator ändert die Größe des Viewports, behält aber die GPU deines Desktops, daher kommt “auf meinem Rechner war es in Ordnung”.
Schadet ein 3 D-Karussell der Seitengeschwindigkeit?
Nicht von alleine Transform-basierte Animation läuft auf dem Compositor-Thread und blockiert nicht den Hauptthread, sodass Ihre Interaktion nicht viel auf Next Paint verschoben wird.
Was tut weh: die Bilder Ein Karussell über der Falte mit sechs Dias in voller Größe sind sechs Renderblocking-Bildanfragen, die mit Ihrem größten inhaltlichen Lack konkurrieren. Faul-Load alles über die erste Folie hinaus, explizite Breite und Höhe festlegen, damit sich nichts verschiebt, und das Bild der ersten Folie unter 150 KB halten.
Das 3 D ist nicht dein Problem Die Nutzlast ist.
Wenn das Karussell überhaupt nicht animiert, sondern schlecht, bedeutet das normalerweise, dass Swiper nicht initialisiert und nicht ein Transformationsproblem darstellt. Der Swiper-Fehlerbehebungsleitfaden Deckt ab, was das Laden stoppt.
Häufig gestellte Fragen
Hat Elementor ein 3 D-Karussell?
Nicht nativ Das Medienkarussell (Pro) von Elementor hat eine Coverflow-Haut, die einen milden 3 D-Effekt verleiht, aber es gibt keine Flip, Bogen - oder Orbit-Option Für diejenigen, die Sie ein Addon benötigen Master Addons' kostenlos Bild Karussell Enthält ein Coverflow-Layout und die vier Pro-Designs auf dieser Seite decken den Rest ab.
Wie mache ich ein Coverflow-Karussell in Elementor?
Lassen Sie die fallen Bild Karussell Widget Auf die Seite, fügen Sie Ihre Bilder hinzu, dann wechseln Sie unter Karusselleinstellungen Layout von Standard auf Coverflow Setzen Sie Dias-per-View auf 3, drehen Sie sich um etwa 35° und schalten Sie zentrierte Dias ein, sodass das aktive Bild in der Mitte sitzt und nicht bündig nach links.
Was ist der Unterschied zwischen Coverflow und einem 3 D-Karussell?
Coverflow ist eine Art von 3 D-Karussell: das, bei dem sich Seitenrutschen um die Y-Achse drehen und zurücktreten Flip, Bogen und Orbit sind ebenfalls 3 D-Karusselle; sie verwenden lediglich unterschiedliche Achsen und Pfade Alle vier bewegen Rutschen eher durch die Tiefe als über eine flache Ebene.
Funktionieren 3 D-Karussells mobil?
Ja, mit Anpassungen Coverflow sollte auf einen Slide pro Ansicht unter 768 px fallen oder die Seitenteile werden zu unbrauchbaren Slivern Flip funktioniert unverändertBogen und Orbit brauchen einen breiteren Viewport, um richtig zu lesen, also fallen beide auf einen Standard-Waagerechten Slide bei Telefonen zurück.
Warum flackert mein 3 D-Karussell in Safari?
Fast immer Backface-Sichtbarkeit Safari rendert die Rückseite eines gedrehten Elements, es sei denn, Sie verstecken es explizit, was sich als Flimmern oder als gespenstisches Spiegelbild in der Mitte der Rotation zeigt. Setzen backface-visibility: hidden Auf dem rotierenden Element und es stoppt.
Welchen zu wählen
Coverflow wenn du dir nicht sicher bist Es ist der Stil den die Leute schon verstehen, und das kostenlose Image Carousel Widget gibt es dir ohne Lizenz Flip wenn dein Content wirklich zwei Seiten hat Arc wenn du etwas willst was sonst niemand auf der ersten Seite deiner Nische hat Orbit nur wenn das Ding was du zeigst auch wirklich Loops ist Wenn der Abschnitt vielleicht gar kein Karussell will, Karussell gegen Schieber Legt fest, dass der Bewegungsstil wichtig ist.
Acht der zwanzig Designs im Set Importieren Sie auf dem kostenlosen Plugin. Keiner der freien Acht ist 3 D, obwohl der Keystone Feature Slider nah dran ist: Durch das Bewerben eines Elements wird eine FLIP-Positionsanimation und keine Tiefentransformation ausgeführt.
Alle zwanzig Entwürfe werden mit dem gebaut Widget-builderDas ist auch das Werkzeug, mit dem Sie Ihre eigene bauen würden. Wenn Sie die Lizenz abwägen, wird die Preisseite Listet auf, was jede Stufe freischaltet.
Alle vier haben Live-Demos auf der Elementorkarussell-Widgets Seite, neben den anderen sechzehn Designs Wenn man lieber zuerst das volle Set nebeneinander sehen möchte, dann Alle zwanzig Schiebervorlagen An einem Ort mit der gleichen Behandlung gesammelt werden.
Jeder der zwanzig ist ein Master Addons Widget oder ErweiterungSie installieren also genauso wie die Standard-Widgets. Für a Miniaturansicht-strip-galerie Statt einer 3 D-Spur, die Galerie-Slider-Widget Fertig ist.
