Elementor Scroll Effects: 16 Billedrulleanimationer

Key Takeaways

• Elementorrulleeffekter i lagereditoren er seks kontroller under Avanceret > Bevægelseseffekter > Rulningseffekter (Lodret rulle, Vandret rulle, Gennemsigtighed, Sløring, Roter og skalér), og hver enkelt flytter et enkelt element.
• Kontrolelementerne Scrolling Effects er en Elementor Pro-funktion, og det gratis Elementor 4.3.2-plugin indeholder dem ikke.
• De 16 billede rulle effekter på denne side er Master Addons Widget Builder widgets, der pin en fuld skærm scene og animere et helt sæt billeder mod rullepositionen, herunder en 3D terning, en side-drejning bog og en stabling kortdæk.
• Hver af de 16 rullewidgets har sin egen zip-download med en JSON-fil og en README, og JSON importeres gennem Master Addons > Widget Builder > Import Widget, som kun accepterer .json-filer.
• Hver eneste af de 16 widgets indeholder en regel om at foretrække reduceret bevægelse, så besøgende, der slukker for bevægelse i deres operativsystem, får et still-layout i stedet for animationen.

Elementor rulle effekter, som de fleste mennesker møder dem, er kontrollerne Rullende effekter i panelet Bevægelseseffekter: lodret rulle, vandret rulle, gennemsigtighed, sløring, rotere og skalere. Hver enkelt skubber et enkelt billede eller overskrift, når siden bevæger sig, og det er så langt de går. Fastgørelse af en sektion, mens en terning drejer inde i den, er ud over dem.

Dette indlæg viser 16 billedrulleanimationer, der fungerer i den større skala. Hver enkelt er en færdiglavet widget til Master Addons Widget Builder med en live demo, du kan åbne, før du installerer noget. Nedenfor finder du, hvad hver effekt gør, hvilken slags websted det passer til, hvordan du importerer sættet, og hvad du skal tjekke for hastighed og tilgængelighed.

Hvad Elementor scroll effekter kan gøre på egen hånd

Elementors egne rulleeffekter ændrer én egenskab ved ét element, efterhånden som den besøgende ruller. Du vælger en widget eller container, åbner Avanceret > Bevægelseseffekter, slå til Rulning Effekter, og vælg fra seks muligheder. Elementors Motion Effects hjælpeside viser dem som Lodret rulle, Vandret rulle, Gennemsigtighed, Sløring, Roter og skalér.

Disse kontroller tilhører Elementor Pro. Vi tjekkede det gratis Elementor 4.3.2 plugin, og rullekontrollerne er ikke i det.

En rulleeffekt kender kun til sit eget element og viewporten. Den har ingen mulighed for at holde en sektion på plads, mens indholdet inde i den ændres, og den kan ikke koordinere ti billeder, så de ankommer i rækkefølge. Parallax på et heltebillede er let at opsætte på denne måde. Et foto, der bryder ind i puslespilsbrikker og samles igen, mens du læser, har brug for en brugerdefineret widget, hvilket er, hvad resten af dette indlæg dækker.

Hvis almindelig parallakse er alt, hvad du har brug for, er Rellax udvidelse i Master Addons håndterer det, og vores animationsoversigt dækker indgang og flydende effekter.

Hvad du behøver for at køre disse widgets

Du skal bruge Elementor, Master Addons og Widget Builder. Det gratis Elementor plugin er nok på Elementor siden, fordi ingen af disse designs bruger Elementor Pro widgets eller dens Motion Effects panel.

Widgets importeres og redigeres i Widget Builder, som er en Master Addons Pro funktion. Planer er på prissætning side. Hvert design nedenfor har sit eget downloadlink ved siden af sin live demo, og der er ingen e-mail-gate.

Du vil også have dine egne billeder. Demoerne bruger offentligt domæne og åbent licenserede fotografier, og hver widget har billedfelter eller en repeater, så det tager et par minutter at bytte dem.

Live-demoerne behøver intet installeret. Åbn en og rul den i et par vinduesstørrelser, hvilket er den hurtigste måde at fortælle, om en bevægelsesstil passer til dit indhold.

16 billedrulleeffekter til Elementor

De 16 billede rulle effekter falder i fem grupper: fastgjorte afslører, 3D-objekter, kortdæk, endeløse gallerier, og indeks eller shop layouts. De fleste af dem bruger det samme fundament. Widgetten giver sig selv en høj landingsbane, stifter en one-screen fase inde i det med klæbrig positionering, og læser, hvor langt du har rullet gennem landingsbanen for at køre animationen. Rul op igen, og alt spiller omvendt.

Fastgjort billede afslører

Disse fire holder en ramme stille og ændrer, hvad der er inde i den. De passer til langformede sider, hvor hvert billede kommer med et afsnit.

1. Blændeindeks

Hver post starter som et tyndt vandret bånd og åbner til et fuldt fotografi, når det når midten af skærmen, den måde en bladlukker åbner. Titlen sidder på tværs af billedet, og posterne skifter til venstre og højre ned på siden. Rammen forbliver fastgjort, mens dens tekst ruller forbi, og giver derefter slip.

Det er en billedafsløring på rulle med mørk grund, så det smigrer natfotografering og produktoptagelser på sort. Fire til seks indgange er det komfortable sortiment.

2. Shingle Ramme

En ramme forbliver fast til højre, mens kopien ruller til venstre. Når hver ny tekstblok ankommer, glider dens billede over den forrige inden for den samme ramme, som helvedesild på et tag. Sidebaggrunden skifter farve med hvert billede.

Farveskiftet fortæller læseren, at et nyt kapitel er startet, så du kan droppe skillelinjerne og underoverskrifterne. Brug det til casestudier og featureture med fire eller fem elementer, der hver fortjener et afsnit.

3. Svalehale Kapitler

Hvert kapitel indeholder et billede skåret i sammenlåsende stiksavstykker. De begynder spredt og roteret. Scrolling fører dem hjem, og billedteksten vises, når billedet er helt.

Placeringen af hvert stykke beregnes ud fra rulleforskydningen, så animationen løber aldrig foran læseren eller halter bagud. Det fungerer godt til historiefortællende sider med to til fire store billeder. Jeg ville ikke gå forbi fire, fordi tricket slides tyndt.

4. Weft Grid

Afsnittet åbner på et fotografi ved fuld blødning. Rul, og det krymper ind på sin plads i et tre-søjlet gitter, mens de andre billeder flyver ind omkring det. Fortsæt med at rulle og rækkerne del for at gøre plads til en overskrift og en knap.

Dette er en stærk helt for en butik eller studie hjemmeside, fordi det bevæger sig fra ét stort billede til den fulde samling til en opfordring til handling i et enkelt afsnit. For statiske alternativer, se vores Elementor helten afsnit skabeloner.

3D-rulleeffekter

Disse fire bruger CSS 3D transformationer og perspektiv, og rullepositionen driver dem. Hvis du vil have 3D, der spiller på en timer eller reagerer på pile, er vores guide til Elementor 3D karrusel dækker den side.

5. Facet Cube

Seks fotografier sidder på de seks flader af en terning. Terningen drejer et ansigt pr. rullestrækning, mens fotografiet, du står over for, spreder sig over hele baggrunden. En skinne af miniaturebilleder til højre viser, hvor du er, og lader dig hoppe til ethvert ansigt.

Seks er den hårde grænse, da en terning har seks sider. Det gør den til en pæn pasform til et kort porteføljesæt eller et seks-produktsortiment.

6. Orbit Tube

Ringe af fotokort står omkring en lodret akse, stablet over hinanden for at danne et rør. Du ser det fra lige udenfor, så den nære væg passerer stort på tværs af skærmen, og den fjerne væg viser små og dunkle gennem hullerne. En glaskugle sidder på aksen i demoen, og widgetten tilbyder andre centerobjekter, herunder en kugle, et atom, en ringmærket planet, en trådkube, et billede eller et ikon.

Det har brug for masser af billeder til at læse som et rør, så tænk gallerier på seksten eller mere.

7. Staffeli Rack

Staffelstativ er et rullegalleri, der står i dybden. Hvert billede er en plade, der er vendt væk fra dig, indtil rullen bringer den i niveau med midten af skærmen, hvor den svinger rundt for at møde dig. Billedtekster sidder ved siden af pladerne, og emnerne zigzagger til venstre og højre.

Demoen går gennem seks stadier af et keramikstudie, og det er den naturlige brug for det: procestrin eller en nummereret liste over tjenester.

8. Quire Book

En lukket bog åbnes, mens du ruller, og vender derefter en side ad gangen. Hvert ark udskrives på begge sider og drejer på rygsøjlen, så du ser bagsiden af en side, mens den går over. Rul op, og bogen lukker igen.

Demoen er en restaurantmenu med fotografi på venstre side og retter til højre. Den passer også til lookbooks og brochurer. Med JavaScript slukket falder siderne tilbage til en almindelig kolonne i læserækkefølge, så intet er skjult for søgemaskiner eller skærmlæsere.

Kortdæk

9. Riffle Deck

Dette er stablingskortene på rullemønster, udført med portrætkort. Hvert rulletrin lægger det næste kort oven på bunken i en lille vinkel. Baggrundsfarven skifter for at matche hvert kort, og en lille statuslinje tæller gennem sættet.

Portrætbilleder fungerer bedst: plakater, bogomslag, emballage, appskærme. Seks til otte kort er omtrent rigtigt.

10. Shatter Deck

Shatter Deck er et full-frame dæk af fotografier, hver med en billedtekst og en knap, og to pile til at bevæge sig gennem dem. Flytning mellem billeder skærer billedet ind i et gitter af små fliser, spreder dem, og bringer dem sammen igen som det næste fotografi.

Ud af boksen bevæger du dig igennem den med pilene, et vandret træk eller piletasterne, når bunken har fokus. Siden beholder sin normale lodrette rulle. Tænd for Rul til Skrub kontrol og rullen driver overgangen i stedet. Med reduceret bevægelse aktiveret stopper fliserne med at flyve, og dækket cross-fades.

Endeløse rullegallerier

Disse tre loop. Der er ikke noget første eller sidste billede, hvilket passer til browsing mere end læsning.

11. Salon Hæng

Salon Hang er en væg uden top og ingen bund. Billeder hænger i en kolonne, skubbet til venstre og højre for midten af forskellige mængder og skåret til forskellige bredder, den måde en salon hænger på, trænger en gallerivæg. Efter det sidste billede kommer det første igen. Klik på et billede, og det vokser ind på sin egen side med en billedtekst og en Tilbage-knap.

Brug det til fotograferingsporteføljer, hvor rækkefølgen ikke betyder noget, og hvert billede fortjener et nærmere kig.

12. Filament Tråd

Fotografier størrelsen af frimærker er spændt langs en lukket tråd, der snor sig hen over skærmen. Du rejser langs tråden ved at rulle. Uanset hvor det passerer midten af scenen, svulmer billederne op som under en lupe, og en billedtekst navngiver den foran. Klik på et fotografi for at åbne det.

Det er den bedste af de seksten for store arkiver, fordi små miniaturebilleder betyder, at mange billeder passer på skærmen på én gang. Uden JavaScript viser widgetten hvert fotografi i et almindeligt gitter.

13. Reel Portrætter

Reel Portraits viser fuldskærmsportrætter et ad gangen, på en løkke. Hver bærer et enkelt ordsæt meget stort på tværs af det, der løber sidelæns langs en kurve som type på en drejetromle, med en håndskrevet linje, der krydser den den anden vej. Fotografiet bevæger sig med en parallaksedrift bag typen, og et nummereret indeks sidder lavt til venstre.

Det er det mest højlydte design af de seksten, og det passer til mode og redaktionelle sites. Giv det fem eller seks stærke billeder og et ord hver.

Indekser og butikslayouts

14. Bellows Index

Bellows Index viser en mængde arbejde en post ad gangen. Hver har en stor overskrift, to overlappende plader af samme billede og en billedtekst, og hele siden tager en ny farve for hver post. Overskriften er sat i en variabel skrifttype, og widgetten skriver rulletryk på sin breddeakse, så ordet strækker sig og sætter sig, mens du bevæger dig.

Den læser bedst med fire til otte poster. Prøv den til en udstilling eller et sæt fremhævede projekter.

15. Tidevandsindeks

Tide Index har to kolonner, der bevæger sig mod hinanden. Titler løber ned til venstre og de mennesker, der lavede dem ned til højre. Når du ruller, glider hver linje sidelæns på en bølge, den venstre kolonne en vej og den højre dens spejl, mens et fotografi for den aktuelle række sidder mellem dem.

Denne ledes efter type, med billedet i en understøttende rolle. Det passer til kreditlister og lange projektindekser.

16. Swatch Shop

Swatch Shop er en korridor af produktfotografier, som du går ned ved at rulle. Mens et produkt er foran, tager hele rummet sin farve, og et kort ved siden af viser navnet, en kort beskrivelse, prisen, størrelsesvalg og en knap. En kolonne med farveprikker til højre markerer din plads.

Den er bygget til små kataloger: blomsterhandlere, keramik, stearinlys, print. Syv produkter fylder demoen.

Alle 16 rulleeffekter på et øjeblik

Brug denne tabel til at matche en rulleeffekt til det indhold, du har. Varetællinger er, hvad layoutet håndterer komfortabelt.

Download widgets med 16 rulleeffekter

Hver widget er en separat zip, så du kun downloader dem, du planlægger at bruge. Hver zip indeholder to filer: widgetens JSON og en README, der viser dens kontroller.

Løsn en fil, før du importerer den. Widget Builder-importøren læser .json-filer og accepterer ikke selve zip'en.

Sådan importeres en rulle widget i Elementor

Du importerer hver widget gennem Master Addons Widget Builder, og trækker den derefter over på en side som enhver anden Elementor-widget. Det hele tager omkring to minutter pr. design.

1. Download den widget, du vil have, og unzip den. Inde er en fil, der hedder som widget-facet-cube.json, plus en README.
2. I dit WordPress dashboard skal du gå til Master Addons > Widget Builder og klik Importer Widget.
3. Træk en .json-fil over på uploadområdet, eller klik Gennemse filer og vælg det. Importøren tager en fil ad gangen, så gentag dette for hvert design, du ønsker.
4. Åbn en vilkårlig side i Elementor, og søg i widgetpanelet efter designets navn, for eksempel “Facet Cube”. Træk den ind i en beholder i fuld bredde.
5. Erstat demobillederne og teksten på fanen Indhold, og indstil derefter farver og typografi på fanen Stil.

Disse filer går ikke gennem Elementors egne Skabeloner > Import skærm. Den importør er til side- og sektionsskabeloner, som vi dækker i sådan importeres en Elementor skabelon. De fastgjorte widgets har også brug for plads. Sæt dem i en beholder sat til fuld bredde uden polstring, ellers vil scenen sidde inde i en smal søjle og se trang ud.

Læs også: Sådan tilføjes GSAP Animation i Elementor, hvis du gerne vil skrive din egen rulle-udløst animation fra bunden.

Billedrulle widget vs billedrulle effekt

En billedrulle-widget og en billedrulleeffekt er to forskellige ting, og navnene skaber forvirring. I de fleste Elementor-tilføjelser betyder “Billedrulle” et højt skærmbillede inde i en fast ramme, der glider op, når du holder markøren over den. Temabutikker bruger den til at forhåndsvise en lang side i en lille boks.

En billedrulleeffekt er animation bundet til siderullen: billeder, der afslører, stabler, drejer eller rejser, når den besøgende bevæger sig ned ad siden. Alt i dette indlæg er den anden slags. Hvis hover-forhåndsvisningen er, hvad du kom efter, har du brug for en tilføjelse med en Image Scroll-widget, fordi ingen af disse 16 gør det.

Scrollytelling i Elementor

Scrollytelling er en side, hvor rulning fremmer en historie: en visuel forbliver fastgjort, mens teksten ved siden af den går videre, og den visuelle ændringer ved hvert trin. Elementor kan lave en grundlæggende version med en klæbrig kolonne. Den sværere del er at få det visuelle til at reagere på præcis, hvor læseren er.

Tre af disse widgets er bygget til det. Shingle Frame parrer hvert afsnit med et billede, der erstatter det sidste, Dovetail Chapters samler et billede pr. kapitel, mens du læser, og Quire Book vender en side for hvert afsnit. For en længere historie skal du stable to af dem på én side med almindelige tekstafsnit imellem, så læseren får et hvil fra bevægelsen.

Gør rulleeffekter dit websted langsommere?

Scroll effekter sinker et site når de er bygget skødesløst, og de sædvanlige syndere er overdimensionerede billeder og animationer der ændrer layout på hver frame. Disse widgets undgår det andet problem. De animerer med CSS transformationer og opacitet, som browseren kan aflevere til grafikkortet, og de bruger en IntersectionObserver til at vide hvornår widgetten er på skærmen.

Billedvægt er op til dig, da en widget, der viser tolv fotografier, vil indlæse tolv fotografier. Eksporter dem som WebP, størrelse dem til den største dimension, de vises på, og holde hver under omkring 150 KB.

Med hensyn til tilgængelighed bærer alle 16 widgets en prefers-reduced-motion regel. En besøgende, der har bedt deres enhed om mindre bevægelse, får et still-layout: Weft Grid viser sit færdige gitter med teksten over, og Shatter Deck cross-fades. Shatter Deck er også et rigtigt tab stop, så piletasterne virker, når den har fokus og ikke kaprer siden ellers.

For telefoner inkluderer flere designs deres eget smalskærmslayout. Facet Cube flytter sin miniatureskinne til en række ved foden af scenen, og Reel Portraits forvandler sit indeks til en række tal. Alligevel test widgetten, du vælger på en rigtig telefon, før du udgiver. Høje fastgjorte sektioner føles længere under en tommelfinger end under et musehjul. Hvis dit websted bruger ikke-standard breakpoints, vores guide til Elementor brudpunkter forklarer, hvordan man justerer dem.

Jeg ville bruge en fastgjort rulleeffekt pr. side, højst to. Hvert fastgjort trin tilføjer rulleafstand, og en besøgende, der skal rulle gennem tre af dem i træk, vil mærke det.

Ofte stillede spørgsmål

Endelige tanker

Elementors indbyggede rulleeffekter giver dig seks måder at flytte ét element på, og de bor i Elementor Pro. De 16 widgets her dækker jorden ud over det: fire fastgjorte afsløringer, fire 3D-stykker, to kortspil, tre endeløse gallerier og tre indeks- eller butikslayouts, hver med en live-demo og en reduceret bevægelse.

For at vælge en, tælle dine billeder og beslutte, om deres ordre betyder noget, og vælg derefter fra tabellen ovenfor. Du kan ændre nogen af disse designs, eller bygge en ny, i Widget Builder.

Relateret læsning

• Elementor Image Box: 16 Designs Med Live Demoer & Download
• 20 Elementor Slider Skabeloner: Coverflow, Tidslinje, Testimonial og mere
• Elementor 3D Karrusel: Coverflow, Flip, Arc og Orbit
• 4 Elementor Animation Effects Extension Uden Kode
• Elementor Marquee: Uendelig rulletekst, logoer og tickere