Parallax er den effekt, hvor forskellige dele af en side ruller med forskellige hastigheder, så baggrunden driver langsommere forbi end forgrunden, og sektionen opfanger en følelse af dybde. Den Rellax udvidelse i Master Addons Pro tilføjer det Elementor parallakse rulning effekt til widgets som et billede eller en overskrift, ved hjælp af Rellax.js bibliotek, uden at røre en linje af JavaScript.Det vises som et afsnit på elementets Avanceret fane, med kontrolelementer for hastighed, bevægelsesprocent, z-indeks, og retning.
Her er hvor Rellax bor, hvad hver indstilling gør, og hvordan effekten ser ud, når siden er live.
Hvad Rellax-udvidelsen gør #
Rellax fastgør en rullebaseret animation til hvilket element du vælger. Når den besøgende ruller, bevæger det element sig hurtigere eller langsommere end resten af siden, afhængigt af den hastighed, du indstiller. Peg det mod et heltebillede, og baggrunden glider; peg det mod en overskrift, og teksten flyder op foran alt omkring det. Da det virker pr. element, kan du blande et par forskellige hastigheder i samme sektion og bygge en lagdelt rulle uden et dedikeret parallakse-plugin.
Tænk på det som den rullebaserede fætter til to andre Master Addons bevægelsesværktøjer: Flydende effekter, som animerer et element alene uden nogen rulning, og Forvandler, hvilke håndtag roterer, skalerer og skæver.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons Pro installeret med en aktiv licens, da Rellax er en Pro-udvidelse. Hvis du ikke har installeret den endnu, skal du følge installationsvejledning.
- Rellax-udvidelsen aktiveret i indstillingspanelet Master Addons.
- En widget til at animere, såsom et billede, et ikon eller en Gradient Overskrift. Rellax flytter hele widget, ikke et sektion baggrundsbillede.
Sådan tilføjes en parallakseeffekt i Elementor #
Vælg det element, du vil flytte. Åbn Advanced faneblad i Elementor-panelet, og rul ned til Rellax sektion (den bærer det lilla Master Addons-badge). Udvid det og vend Aktiveret Rellax til Ja. Den toggle er kontakten for hele effekten, så der sker ikke noget, før den er tændt.
En ting, der snubler folk op: Parallaksen kører kun på live-siden eller i forhåndsvisning, aldrig mens du redigerer på lærredet. Så vent ikke på, at elementet bevæger sig inde i editoren, tryk på forhåndsvisning for at se det.
Rellax-indstillinger forklaret #
Med Aktiveret Rellax tændt former resten af kontrolelementerne, hvordan elementet bevæger sig:
- Hastighed: hvor hurtigt elementet bevæger sig i forhold til rullen. Højere positive tal gør det bevæge sig op hurtigere, som du ruller ned; negative tal skubbe det den anden vej. Demoen bruger 6. Start omkring 4 til 6 og juster derfra, da store værdier kan skubbe et element ren ud af sin sektion.
- Procent: udgangspunktet for animationen, fra 0 til 1, baseret på hvor elementet sidder i viewport. Demoen sætter det til 0,4. Nudge dette, når effekten sparker ind for tidligt eller for sent.
- Z-indeks: stabling rækkefølge, samme idé som CSS z-indeks. Hæv det (demoen bruger 3) når et parallakseelement skal sidde over eller under en nabo overlapper det midt i rullen.
- Lodret: flyt elementet op og ned, mens siden ruller. Dette er den sædvanlige parallakseretning.
- Vandret: flyt elementet til venstre og højre i stedet. Praktisk til elementer, du vil glide ind fra siden.
Hastighed og Procentdel har begge det responsive ikon ved siden af dem, så du kan indstille forskellige værdier for desktop, tablet og mobil. Det betyder mere, end det lyder. En hastighed, der ser godt ud på et bredt skrivebord, kan føles skurrende på en telefon, hvor skærmen er kort, og elementet dækker meget jord på et lille rum. At ringe mobilhastigheden ned er normalt rettelsen.
Se parallakseeffekten på live-siden #
Udgiv siden (eller åbn forhåndsvisningen) og rul. Det element, du aktiverede Rellax på, bevæger sig i sit eget tempo, mens resten af siden ruller normalt, og den hastighedsforskel er det, der sælger dybden. Her er demohelten, med et parallaksebillede, der ruller mod en “Scroll UP”-overskrift:
Hvis bevægelsen føles for stærk eller for subtil, skal du gå tilbage til Speed control og justere den. Parallax er en af de effekter, hvor et lille tal normalt læser bedre end et stort.
Almindelige brugstilfælde #
- Heltebilleder: giv en billedwidget i en landingssidehelt en langsom drift, så sektionen føles levende i det øjeblik, nogen ruller.
- Flydende overskrifter: sæt Rellax på en overskrift, så den stiger foran indholdet under den.
- Lagdelte sektioner: indstil to eller tre elementer til forskellige hastigheder i samme sektion for en stablet rulle med flere dybder.
- Feature callouts: skub et ikon eller badge ind vandret, når den besøgende når det.
- Fortællesider: brug blid parallakse mellem blokke for at forhindre en lang rulle i at føles flad.
For bevægelse, der ikke er bundet til rulning, par Rellax med Indgang Animation så elementer animerer i, som de vises, og derefter holde bevæger sig med parallakse som rullen fortsætter. Gennemse den fulde widgets og udvidelser liste for at se resten af bevægelsesværktøjssættet.
Video Tutorial #
Foretrækker du at se? Denne video går gennem Rellax-udvidelsen fra ende til anden, fra at aktivere den på et element til parallakse-rullen på live-siden:
Ofte stillede spørgsmål #
Hvordan tilføjer jeg en parallakse-rulleeffekt i Elementor?
Vælg et element, åbn fanen Avanceret, udvid afsnittet Master Addons Rellax, og indstil Aktiveret Rellax til Ja. Indstil derefter hastigheden og procentdelen. Elementet ruller i sit eget tempo på livesiden, ingen kode kræves.
Hvorfor kan jeg ikke se parallakseeffekten i Elementor-editoren?
Rellax kører kun på forenden. Elementet sidder stille, mens du redigerer på lærredet, så åbn forhåndsvisningen eller se den offentliggjorte side for at se parallaksebevægelsen.
Hvad gør indstillingen Hastighed i Rellax?
Hastighed styrer, hvor hurtigt elementet bevæger sig i forhold til siderullen. Højere positive værdier flytter det hurtigere op, når du ruller ned, og negative værdier vender retningen. Værdier omkring 4 til 6 fungerer godt for de fleste heltesektioner.
Kan jeg bruge en anden parallaksehastighed på mobil?
Ja. Kontrolelementerne Hastighed og Procentdel er responsive, så du kan indstille separate værdier for desktop, tablet og mobil. Hvis du sænker hastigheden på mobilen, forhindres det, at effekten føles for aggressiv på små skærme.
Sænker Rellax-udvidelsen mit websted?
Rellax kører en rullebaseret animation pr. element, så virkningen forbliver lille. Anvend den kun på de elementer, der har brug for det, i stedet for hver blok på siden, og tingene forbliver glatte.
Indpakning #
Rellax-udvidelsen er den hurtigste måde at tilføje en Elementor parallakse rulning effekt uden et separat plugin eller brugerdefineret kode. Aktiver det på ethvert element, indstil hastigheden, procentdelen, z-indekset og retningen, og elementet ruller med reel dybde på live-siden. For flere måder at flytte ting rundt på skærmen, tag et kig på Forvandler og Flydende effekter, og se den Rellax parallakse udvidelsesside til en sammenligning med Elementor Pro Motion Effects.
