En 3D karrusel er en karrusel, hvis dias bevæger sig gennem dybden frem for hen over et fladt plan: roterende, skalerende eller kredsende, så de inaktive dias sidder synligt bag den aktive. I Elementor får du det enten fra Billedkarrusel-widgets coverflow-layout, eller fra et specialbygget design.
Fire stilarter er værd at bruge tid på. De udfører forskellige job, og en af dem vil gøre din side langsommere uden gavn, hvis du vælger det til det forkerte indhold. Live demoer til hver, plus de indstillinger, der adskiller en glat 3D karrusel fra en stammende.
Coverflow: den, de fleste mennesker mener
Midterskydeflade vender mod dig firkantet. Skyderne på hver side roterer væk på Y-aksen, krymper lidt og dæmpes. Dit øje har ingen steder at gå hen undtagen midten.
Det er hele tricket, og det er derfor, at coverflow overlevede iTunes' død. Perifere dias er synlige nok til at bevise, at der er mere, sløret nok til, at du ikke kan læse dem. Folk klikker på pilen for at løse spændingen.
Tre indstillinger gør det meste af arbejdet:
- Rotere: hvor langt sidegliderne drejer. Alt forbi 50° og naboerne bliver ulæselige skiver. 30 til 40° er det område, der læser som dybde snarere end forvrængning.
- Dybde: hvor langt tilbage de sidder. Skub den for langt, og sideglassene krymper til miniaturebilleder, og sammensætningen mister sin balance.
- Slides pr. visning: coverflow har brug for mindst tre synlige, eller der er ingen “flow.” Indstil det til 3 på skrivebordet, 1 på mobilen, og spring den akavede 2 over.
Du behøver ikke Pro til den her. Den gratis Billede Karrusel widget har et coverflow layout indbygget.
Godt for: casestudier, porteføljestykker, samlinger i albumstil.
Dårligt for: alt hvad folk skal sammenligne. Coverflow er bygget til at få dig til at se på én ting.
Flip:tosidede kort
Kortet roterer hele 180° på sin lodrette akse. Forsiden udad, bagsiden ind. Begge ansigter holder ægte indhold.
De fleste 3D-effekter er dekoration. Denne er ikke. Det fordobler indholdet pr. slide, hvorfor det tjener sin plads på en holdside. Foto og navn på forsiden, rolle, bio og links på bagsiden. Samme fodaftryk, to gange oplysningerne.
Indstillingen folk tager fejl er backface synlighed. Lad det være tændt, og du vil se et spejlet spøgelse af frontfladen, der bløder gennem midten af rotationen. Det er subtilt nok til at gå glip af i editoren og indlysende på en nethindeskærm. Sluk det.
Anden ting: holde flip under 600ms. En flip er en afsløring, og en afsløring, der tager et helt sekund stopper følelse lydhør og begynder at føle sig som en lastning tilstand.
Godt for: team grids, før/efter, spec kort, prissætning med en detaljer omvendt.
Dårligt for: alt, hvor bagsiden ville være tom. Et flip uden noget bagved er et spildt klik.
Vil du have den samme tosidede afsløring som et stående kort frem for en karruselrutsjebane? Det er den Elementor flipbox widget's job.
Bue: glider på en kurve
Slides rider på kanten af en cirkel, hvis centrum sidder under folden. Hver enkelt ankommer oprejst i toppen af buen og tipper væk, når den bevæger sig af sted.
Arc er den mindst almindelige 3D-stil på WordPress-websteder, hvilket er det meste af dets værdi. En besøgende har set coverflow hundrede gange. De har ikke set dette.
Det koster dig noget til gengæld: Vippebevægelsen betyder, at slides kun er fuldt læsbare i toppen af buen. Indhold, der skal være læseligt i periferien (priser, datoer, specifikationer) vil bekæmpe designet. Billeder og korte titler vil ikke.
Godt for: kataloger, prøvelister, menuer, samlinger af lignende varer.
Dårligt for: data. Hvis folk skal læse tre slides på én gang, skal du bruge et gitter.
Orbit: cirkulær bevægelse omkring et center
Varer rejser en hel cirkel rundt om et fast center. Varen øverst er aktiv og i fuld størrelse; resten skalerer ned, når de passerer bagud.
Orbit siger noget strukturelt, som intet andet layout siger: dette loops. En fire-trins proces, der virkelig vender tilbage til sin start, læser perfekt. Et fem-trins onboarding flow, der slutter, gør det ikke. En cirkel lover en tilbagevenden, og hvis dit indhold ikke vender tilbage, venter folk på noget, der aldrig kommer.
Brug kredsløb, når indholdet er en cyklus. Brug coverflow, når det er en liste.
Godt for: proceshjul, økosystemdiagrammer, kapacitetskort, servicecyklusser.
Dårligt for: sekvenser med en begyndelse og en slutning.
Hvordan man laver en 3D karrusel, der ikke stammer
3D-transformationer er billige på GPU'en og dyre, hvis du tager fejl. Fire ting adskiller en glat karrusel fra en janky, i den rækkefølge de vil bide dig:
- Kun animere transformation og opacitet. Animere bredde, højde, top eller venstre tvinger et layout genberegning på hver ramme. Transform og opacitet gå direkte til komponisten. Hvert design her holder sig til de to.
- Cap billedstørrelsen. En 3D-karrusel rummer flere dias i hukommelsen på én gang, fordi de alle er synlige. Seks dias på 400 KB hver er 2,4 MB, før noget bevæger sig. Få dem under 200 KB og server WebP.
- Stak ikke 3D inde i 3D. Et flip-kort inde i et coverflow-spor skaber indlejrede 3D-kontekster, og det håndterer browsere inkonsekvent. Især Safari flader den indre transformation ud på uforudsigelige tidspunkter. Vælg en.
- Respekter reduceret bevægelse. Nogle mennesker har vestibulære lidelser, og dybdeanimation er en almindelig udløser. Hvert design her falder til en almindelig fade, når
prefers-reduced-motioner indstillet. Hvis du bygger din egen, så gør det samme.
Test på en mellemklasse Android-telefon, ikke i browserens enhedsemulator. Emulatoren ændrer størrelsen på viewporten, men beholder dit skrivebords GPU. Det er der, “det var fint på min maskine” kommer fra.
Gør en 3D-karrusel ondt i sidehastigheden?
Ikke af sig selv. Transform-baseret animation kører på compositortråden og blokerer ikke hovedtråden, så den flytter ikke din Interaction til Next Paint meget.
Hvad gør ondt: billederne. En karrusel over folden med seks dias i fuld størrelse er seks gengivelsesblokerende billedanmodninger, der konkurrerer med din største tilfredse maling. Lazy-load alt forbi det første dias, indstil eksplicit bredde og højde, så intet skifter, og hold det første dias billede under 150 KB.
3D er ikke dit problem. Nyttelasten er.
Hvis karrusellen slet ikke animerer, snarere end at animere dårligt, er det normalt Swiper, der ikke initialiserer i stedet for et transformationsproblem. Vejledningen til fejlfinding af Swiper dækker det, der stopper indlæsningen.
Ofte stillede spørgsmål
Har Elementor en 3D karrusel?
Ikke indbygget. Elementors Media Carousel (Pro) har en coverflow-hud, der giver en mild 3D-effekt, men der er ingen flip-, bue- eller kredsløbsmulighed. For dem, du har brug for en tilføjelse. Master Addons' gratis Billedkarrusel indeholder et coverflow-layout, og de fire Pro-design på denne side dækker resten.
Hvordan laver jeg en coverflow karrusel i Elementor?
Drop the Billede Karrusel widget på siden skal du tilføje dine billeder og derefter under Karruselindstillinger skifte Layout fra Standard til Coverflow. Indstil slides-per-view til 3, roter til omkring 35°, og tænd centrerede slides, så det aktive billede sidder i midten i stedet for at skylle til venstre.
Hvad er forskellen mellem coverflow og en 3D-karrusel?
Coverflow er en type 3D karrusel: den, hvor sideslæder roterer på Y-aksen og trækker sig tilbage. Flip, bue og kredsløb er også 3D karruseller; de bruger bare forskellige akser og stier. Alle fire bevæger sig glider gennem dybden i stedet for på tværs af et fladt plan.
Virker 3D karruseller på mobilen?
Ja, med justeringer. Coverflow bør falde til en slide per visning under 768px eller sidepanelerne bliver ubrugelige slivers. Flip fungerer uændret. Arc og orbit har brug for en bredere viewport for at læse ordentligt, så begge falder tilbage til en standard vandret slide på telefoner.
Hvorfor flimrer min 3D karrusel i Safari?
Næsten altid synlighed bagside. Safari gengiver bagsiden af et roteret element, medmindre du eksplicit skjuler det, som vises som et flimmer eller et spøgelsesspejlbillede midt i rotationen. Set backface-visibility: hidden på det roterende element, og det stopper.
Hvilken en at vælge
Coverflow, hvis du ikke er sikker. Det er den stil, folk allerede forstår, og den gratis Image Carousel-widget giver dig den uden licens. Vend, om dit indhold virkelig har to sider. Arc, hvis du vil have noget, ingen andre på din niches første side har. Orbit kun, hvis den ting, du viser, faktisk går i løkker. Hvis sektionen måske slet ikke vil have en karrusel, karrusel versus skyder afgør det, før bevægelsesstilen betyder noget.
Hvis den ting, du vil rotere, er dine seneste indlæg, er Marquee-layoutet i vores Elementor blogskabeloner sætter en fremhævet postkarrusel øverst på en blogside.
Otte af de tyve designs i sættet importér på det gratis plugin. Ingen af de gratis otte er 3D, selvom Keystone Feature Slider kommer tæt på: fremme af et element kører en FLIP position animation snarere end en dybde transformation.
Alle tyve designs er bygget med Widget Builder, som også er det værktøj, du ville bruge til at bygge din egen. Hvis du vejer licensen, skal prissætning side viser, hvad hvert niveau låser op.
Alle fire har live demoer på Elementor Carousel Widgets side, ved siden af de andre seksten designs. Hvis du hellere vil se det fulde sæt side om side først, alle tyve skyderskabeloner samles ét sted med samme behandling.
Hver eneste af de tyve er en Master Addons widget eller udvidelse, så de installerer på samme måde som aktie-widgets gør. For en miniature-strip galleri frem for et 3D-spor, den Galleri Slider-widget er den færdige mulighed.
