Rellax

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 forlængelse i Master Addons til Elementor tilføjer det Elementor parallakse rulning effekt til ethvert element, et billede, en overskrift, en hel kolonne, uden at røre en linje af JavaScript. Det vises som et afsnit på elementets Advanced 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 til Elementor installeret og aktiv. Hvis du ikke har installeret det endnu, skal du følge installationsvejledning.
• Rellax-udvidelsen aktiveret i indstillingspanelet Master Addons.
• Et element til at animere. Enhver Elementor eller Master Addons widget fungerer, herunder et billede, en Gradient Overskrift, eller et afsnit.

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 #

• Helt baggrunde: giv et heltebillede på landingssiden 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 #

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 kontrollere de prissætning side for hvad der er inkluderet i Pro.