Elementor Entrance Animation: 70 Scroll Effekter for ethvert element
Første indtryk stick. I stedet for at lade dit indhold bare vises, gøre det ankomme. Den Indgang Animation udvidelse, en del af Master Addons Pro, tilføjer bevægelse til ethvert Elementor-element i det øjeblik, det ruller til syne, med 70 effekter at vælge fra: falmer, dias, masker, rotationer, zoom, flips, pulser og bounces. Du indstiller varigheden, forsinkelsen, lempelsen og gentagelsen tæller, så en overskrift kan glide ind forsigtigt, mens en række funktionsikoner popper ind efter hinanden. Ingen CSS, ingen keyframes, kun et par indstillinger i fanen Avanceret.
Brug det godt, og en indgangsanimation trækker øjet ned på siden og får webstedet til at føles levende på den første rulle. Brug det på alt, og det bliver til støj. Videoen nedenfor dækker det grundlæggende, og længere nede kommer jeg ind på den fulde effektliste, hvordan man anvender en animation på tværs af en hel sektion, og hvordan man får timingen rigtigt.
Hvad Er Entré Animation?
En indgangsanimation er den bevægelse et element laver, når det kommer på skærmen. Den besøgende ruller, en overskrift eller billede eller knap rammer viewporten, og den falmer, glider eller hopper på plads i stedet for at have siddet der hele tiden. Du vil se dem kaldet indgangseffekter, rulleanimationer eller en animation til webstedsindgang. Samme idé hver gang: en statisk side, der begynder at reagere, når du bevæger dig ned ad den.
Du kan selv skrive alt dette med CSS animationer. Så er keyframes dine at vedligeholde, og det samme er den responsive adfærd på hver skærmstørrelse. Master Addons animation toolkit flytter det ind i elementindstillingerne, så du vælger en effekt fra en dropdown og springer koden over.
Et bibliotek med 70 indgangseffekter
Med 70 forudindstillinger er der en passende måde at introducere næsten enhver sektion på. Vil du have det stille? Fade In. Vil du have energi? Bounce In eller Jack In the Box. Efter noget mere bevidst? Flip In eller Mask From. Den spredning lader dig give sektioner deres egen karakter: rolig og glat til en mission statement, lidt legende for funktionsrækken.
- Fader: Fade In, plus Up, Down, Venstre og Højre med nummererede variationer, for stille ankomster.
- Slides og masker: Slide From og Mask From i alle fire retninger.
- Rotationer og flips: Drej ind mod hvert hjørne, og vend ind op, ned, venstre og højre.
- Zoomer og vægte: Zoom ind, skaler op og skaler ned, hver med variationer.
- Opmærksomhedseffekter: Pulse In, Pulse Out, Shake, Bounce In og Jack In the Box til en helt eller en CTA.
- Match effekten til jobbet: de højlydte på en opfordring til handling, en blød fade på brødteksten.
- Forhåndsvisning, før du forpligter dig: editoren afspiller effekten, så snart du vælger den.
Varighed, forsinkelse og lettelseskontrol
Timing er hvor de fleste animationer vindes eller tabes, og dette er mere end en tænd/sluk-skift. Indstil Varighed i millisekunder for at gøre et træk hurtigt og hurtigt eller langsomt og trukket ud. Tilføj en Forsinkelse så en række af varer kommer ind efter hinanden i stedet for alle på én gang. Vælg en Lettelse kurve, så bevægelsen fremskynder og bremser den måde, et rigtigt objekt ville, i stedet for at glide i et fladt robottempo.
- Indstil hastigheden: 500ms føles rask, 1500ms føles afslappet. At ét tal ændrer hele stemningen.
- Forvrid en sekvens: bump the Delay et hak op på hvert ikon i træk, og de popper ind én efter én.
- Vælg lempelsen: Ease-Out (hurtig start, blid stop) lyder som naturligt for de fleste indgange. Det er den, jeg når til først.
- Gentag det: Gentag tælling spiller effekten 1 til 5 gange eller på en løkke.
Elementors indbyggede indgangsanimation vs Master Addons
Elementor lader dig allerede vælge en indgang animation gratis under Avanceret, Motion Effects. Det er fint for en simpel fade. Master Addons udvidelse er for sider, hvor du ønsker finere kontrol over, hvordan hvert element ankommer.
| Elementor Motion Effects | Master Addons Entré Animation | |
|---|---|---|
| Plan | Free | Master Addons Pro |
| Varighed | Langsom, Normal eller Hurtig | Enhver værdi i millisekunder |
| Forsinkelse | Millisekunder | Millisekunder |
| Lettelse | Ikke tilgængelig | 30 kurver, fra Lineær til Back In Out |
| Gentagetælling | Ikke tilgængelig | 1 til 5 gange, eller uendelig |
| Forskellig effekt pr. enhed | Ja | Nej, én indstilling for alle brudpunkter |
| Effekter | Elementor forudindstillinger | 70 effekter, herunder masker, flips og pulser |
Sådan indstilles en standardindgangsanimation for alle elementer?
Folk spørger dette meget: kan du anvende en indgang animation til alt på én gang i Elementor? Lige svar, Elementor kerne har ingen enkelt global switch, der animerer hvert element på webstedet. Hvad der virker i praksis er at animere på container eller sektionsniveau, derefter genbruge disse indstillinger.
- Vælg den sektion eller container i stedet for hver widget inde i den. Åben Avanceret → Master Addons Entrance Animation og vælg din effekt. Så ankommer hele blokken samlet, mens den ruller ind.
- For at genbruge den samme bevægelse skal du højreklikke på elementet, trykke Kopi, så Indsæt stil på næste afsnit. Animationsindstillingerne kører sammen med stilen, så du indstiller den én gang og indsætter den på siden.
- For en kaskade frem for alt, der skyder sammen, skal du holde effekten den samme og hæve Forsinkelse lidt på hver sektion, når du går ned.
Det giver dig en ensartet indgangsanimation på tværs af alle dine elementer uden at røre kode, hvilket er så tæt på en standard, som Elementor giver dig.
Hvor Entréanimationer Hjælper Mest?
- Heltesektioner: en Fade In Up på overskriften, derefter en kort forsinkelse på knappen under den.
- Funktionsrækker: forskyd ikonerne, så de lander en efter en.
- Statistik og tællere: en Zoom ind, når tallene ruller til syne.
- Udtalelser og logoer: en blød falme, så de ikke knækker brat ind.
- Opfordringer til handling: en Bounce In eller Jack In the Box på det punkt, hvor nogen bestemmer.
Entrance Animation er en del af Master Addons Pro. For bevægelse ud over den første rulle, se på Flydende effekter, Afsløre og Forvandler, eller gennemse hele Master Addons animationsfunktioner.
Ofte stillede spørgsmål til indgangsanimation
Vil en masse indgangsanimationer bremse min hjemmeside?
På en side med snesevis af animerede elementer kan det tilføje nogle vægt, men virkningerne er lette til at begynde med. Den virkelige løsning er tilbageholdenhed: animere de centrale sektioner og overskrifter, ikke hvert afsnit. Et par velplacerede dem registrerer knap. Hvis load tid er på dit sind, disse tips til at fremskynde Elementor sites help.
Hvorfor virker min Elementor indgangsanimation ikke?
Det er normalt en af tre ting. Animationen udløses kun første gang elementet kommer ind i viewporten, så rul ned frisk for at teste det i stedet for at rulle op igen. Sørg for, at effekten er på det faktiske element og ikke en tom indpakning omkring det. Og ryd dit caching-plugin, efter du har udgivet, da en cachelagret side vil tjene den gamle version uden animationen.
Kan jeg bruge forskellige animationer på desktop og mobil?
Ikke med denne udvidelse. Dens indstillinger gælder på hvert brudpunkt, så vælg en effekt, der stadig ser rigtigt ud på en lille skærm. Elementors egen Motion Effects-indgangsanimation kan indstilles pr. enhed, hvilket hjælper, hvis et telefonlayout har brug for noget roligere.
Hvordan adskiller dette sig fra Elementors egne indgangsanimationer?
Elementors gratis editor har en grundlæggende Entrance Animation kontrol under Avanceret, Motion Effects, med en forudindstillet varighed og en forsinkelse. Denne udvidelse er en del af Master Addons Pro og giver dig 70 effekter, varighed og forsinkelse i millisekunder, 30 lempelseskurver og en gentagelsestælling. For pacing passer Ease Out til de fleste indgange.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
Post/Page Duplicator
