Floating Effect Elementor-udvidelsen fra Master Addons giver dig mulighed for at tilføje glatte, interaktive animationer til ethvert element på dit websted. Med enkle tilpasninger som oversættelse, rotation og skalering kan du oprette subtile flydende bevægelser eller dynamiske 3D-effekter.
I denne vejledning undersøger vi, hvordan du bruger disse tilpasningsmuligheder til at bringe dine elementer til live, og viser, hvordan Positioneringsudvidelsen kan hjælpe med at finjustere placeringen for det perfekte udseende. Ved udgangen vil du være klar til at oprette iøjnefaldende flydende animationer til dit websted.
Sådan bruges udvidelsen Floating Effect Elementor
Før du kommer ind på mulighederne for de flydende effekter, skal du sikre dig, at udvidelsen er aktiveret.
Bare gå til Master Addons på dit instrumentbræt. Gå ind på fanen udvidelser og skift udvidelsen Floating Effects. Enkelt!
Når du har aktiveret det, kan du navigere til den avancerede fane af ethvert element på dit websted og rulle ned for at finde udvidelsen “flydende effekter”. Skift det, og du vil se følgende tilpasningsmuligheder.
1. Oversæt
Dette giver dig mulighed for at flytte et element langs X- og Y-akserne. Ved at justere oversættelsen på X-aksen vil elementet bevæge sig til venstre og højre. På samme måde flytter justering af Y-aksen elementet op og ned. Kombination af begge akser skaber en 3D flydende effekt, hvilket tilføjer dybde og bevægelse til dine elementer.
2. Roter
Med denne indstilling kan du rotere elementer langs X-, Y- og Z-akserne. Dette giver dine elementer en mere dynamisk, roterende effekt.
Du kan også justere varigheden og forsinkelsen af rotationen, hvilket giver mulighed for jævnere eller mere dramatiske overgange.
3. Skala
Skalaeffekten lader dig strække eller formindske et element langs X- og Y-akserne. Dette skaber en vækst/formindsk animation, hvilket får dine elementer til at se ud til at udvide sig eller trække sig sammen. Som med de andre effekter kan du justere varigheden og forsinkelsen for at styre timingen af animationen.
Ved at kombinere disse tre tilpasningsmuligheder kan du skabe uendelige variationer af flydende effekter, fra subtile bevægelser til mere komplekse, iøjnefaldende animationer.
Vi anbefaler dig at tjekke outElementor Pro funktioner ligeså. Du kan kombinere Elementor pro og Master Addons at oprette enhver type hjemmeside, du ønsker.
Kombination af virkningerne
En af de mest kraftfulde funktioner i Flydende effekter udvidelse er evnen til at kombinere oversættelse, rotation og skalering for unikke og dynamiske animationer. Ved at lægge disse effekter i lag kan du skabe alt fra subtile flydende bevægelser til fulde 3D interaktive elementer.
Kombiner Oversæt og roter: Parring af translation med rotation skaber en flydende, roterende effekt med bevægelse hen over skærmen. For eksempel kan du få et element til at flyde diagonalt, mens du roterer på plads for en mere dynamisk 3D-illusion.
Kombiner Oversæt og skaler: Brug af både oversættelse og skalering gør det muligt for et element at flytte og ændre størrelse på samme tid. Dette kan skabe en ekspanderende eller krympende flydende effekt, da elementet driver hen over skærmen.
Kombiner alle tre: For den ultimative flydende effekt, kombinere oversætte, rotere, og skala. Dette giver mulighed for komplekse animationer, hvor elementet bevæger sig, spins, og vokser / krymper på én gang, hvilket giver det en engagerende, multi-dimensionelle udseende.
Mulighederne er uendelige, når du eksperimenterer med disse kombinationer. Spil rundt med forskellige værdier for varighed og forsinkelse for at justere hastigheden og timingen, hvilket skaber en virkelig brugerdefineret flydende animation til ethvert element.
Oprettelse af en flydende effekt på et billede
Vi håber, nu ved du, hvordan du justerer de forskellige indstillinger for udvidelsen Floating Effects.
Som en bonus vil vi vise dig, hvordan du opretter en fantastisk sektion med nogle billeder Flydende effekter og Positionering Extensions:
Du kan følge videoen nedenfor, hvor vi viser dig hele processen.
Først og fremmest kan du vælge nogle billeder, vi vil bruge til at oprette vores sektion.
Derefter tilføjer vi en Flexbox eller gitter i fuld bredde til 3 kolonner og 2 rækker og arrangerer alle billeder som det følgende skærmbillede i de relevante felter.
Nu, lad os fokusere på Position og Flydende Effekt. Vi anbefaler at starte med positionering. Gennemgå omhyggeligt dit design og placer alle billeder og partikler præcist, før du implementerer den flydende effekt.
Vi har udnyttet Master Addons positionering udvidelse til nøjagtigt at placere billederne. For at begynde, skal du vælge 'Relative' inden for positionen udvidelse. Derefter, gå videre til at justere dine billeder eller eventuelle andre elementer efter behov.
Vi har gennemført positioneringen for alle billeder, og det vedhæftede skærmbillede illustrerer det aktuelle arrangement.
Lad os endelig anvende den flydende effekt på de ønskede billeder. Vi har anvendt translate X- og Y-effekter på billederne i første og tredje kolonne. Rotate Z-effekten er udelukkende blevet anvendt på profilbilledet. Se venligst følgende GIF-fil for at se det aktuelle visuelle resultat.
The Flydende effekter udvidelse tilbyder uendelige muligheder for at animere elementer på dit websted. Med enkle, men kraftfulde tilpasningsmuligheder til oversættelse, rotation og skalering, kan du oprette dynamiske, iøjnefaldende flydende effekter, der engagerer besøgende. Når det kombineres med Positioneringsforlængelse, du har fuld kontrol over både bevægelse og placering af elementer til en virkelig tilpasset design.
Vær ikke bange for at eksperimentere med forskellige indstillinger og kombinationer for at finde den perfekte flydende effekt til dit websted. Med lidt kreativitet kan du løfte dit webdesign og skabe en mere interaktiv brugeroplevelse.
Hvis du står over for problemer med denne udvidelse, er du velkommen til at kommentere her eller kontakte os via vores Website kontaktformular.
