Gå till innehållet

Upptäck de nya rullningsanimationseffekterna på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Idag har vi informerats om en ny uppdatering om Divi som erbjuder så kallade rullningsanimationseffekter. Vi tittade på det och i denna handledning kommer vi att sammanfatta vad vi kan förvänta oss.

Låt oss börja.

Vilka är rullningseffekterna?

Scrolleffekter är anpassningsbara animationer som reagerar på dina besökare när de rullar uppifrån och ned på sidan. Till skillnad från traditionella animationer är rullningseffekter direkt relaterade till besökarens rullningsbeteende. Animationens hastighet och riktning baseras på hastigheten och riktningen för besökarens rullning. Animationens tidslinje baseras på klippets position i webbläsarfönstret.

Det verkar komplicerat, men med Divi är det ganska förenklat

Alla element kan animeras med en kombination av skala, rotation, horisontell och vertikal rörelse, opacitet och oskärpaeffekter. Du kontrollerar storleken på varje effekt vid olika punkter i animationen, sedan tar Divi hand om resten och skapar vackra övergångar när dessa element kommer in och rör sig runt besökarens syn. Skapa enkla animationer som lägger till subtilt djup och sofistikering, eller kombinera effekter och animera flera element för att skapa spektakulära sprängningar av aktivitet som kommer att imponera på dina besökare!

6 nya sex unika effekter

Effekter tillgängliga att välja mellan eller i kombinationer. Divi levereras med sex olika rullningseffekter, som alla kan anpassas individuellt med vårt nya användargränssnitt för rullningseffekter. Du kan också kombinera någon av effekterna för att skapa mer komplexa animationer.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Vertikal rörelse

Den vertikala rörelseeffekten gör att alla element kan röra sig upp och ner på sidan beroende på besökarens rullningshastighet och riktning. Resultatet är en parallaxeffekt! Nu kan allt användas för att skapa parallaxeffekter med Divi. Du kan även kombinera vertikal rörelse med parallax bakgrundsbilder för att skapa riktigt imponerande mönster.

Divi-bildinställningar

Horisontell rörelse

Den horisontella rörelseeffekten liknar den vertikala rörelseeffekten, förutom att den låter objekt flyttas från vänster till höger på skärmen beroende på en besökares riktning och rullningshastighet. . Du kan till och med kombinera vertikal och horisontell rörelse, vilket ger dig fullständig kontroll över rörelsen för alla element!

Divi animationseffekter

Kontextuell oskärpa

Suddighetseffekten kommer att föra in och ur fokus beroende på hastighet och riktning som en besökare rullar. Eftersom Divi låter dig styra värdena för start, mitt och slutssuddighet kan du sätta elementen i fokus precis när de ligger framför besökarens ögon. Det är ett utmärkt sätt att uppmärksamma viktig information.

Divi kontextuell oskärpa inställning

smälta

Fade-effekten med element bleknar in och ut beroende på hastigheten och riktningen för en besökares bläddring. Du kan blanda element, få dem att försvinna eller båda. Kombinationen av blekning, suddighet och skala kan skapa riktigt sofistikerade animationer som lägger till en extra "it" -faktor i dina mönster.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Divi fade effekt

Skalningseffekt

Skaleffekten ökar eller minskar storleken på ett objekt baserat på hastigheten och riktningen för en besökares bläddring. Om du vill uppmärksamma ett visst element, till exempel en uppmaning till handling, kan du ställa in skalningseffekten så att elementets storlek ökar när det kommer närmare mitten av ramen. fönster. Naturligtvis finns det också många andra möjligheter!

Skalningseffekt

Rotationseffekt

Rotationseffekten med roterar ett objekt i endera riktningen baserat på besökarens rullningshastighet och riktning. Subtil rotation kan verkligen ge scener liv. Bara lite snurr i kombination med horisontell rörelse kan se bra ut! Eller låt elementen gå runt i cirklar.

Bildjusteringar divi rotationseffekt

Ett nytt intuitivt gränssnitt

Den verkliga skönheten i Divis rullningseffekter är deras användarvänlighet! Det finns ett nytt användargränssnitt som förenklar processen att skapa webbanimationer så att de är tillgängliga för alla. Med bara ett klick kan du lägga till eller kombinera en av Divis sex rullningseffekter. Rätt ur lådan kommer de att se bra ut! Då kan du finjustera effekterna för att skapa ännu mer avancerade animationer.

Ett klick och det är det!

Vill du lägga till en rullningseffekt i en modul? Ett klick kommer att lägga till effekten och det kommer också att se bra ut! För att lägga till en rullningseffekt, gå bara till den nya alternativgruppen Scroll Effects på fliken Advanced i valfri modul, rad, kolumn eller sektion. Flera effekter kan aktiveras samtidigt och effekterna kommer att kombineras till en smidig animation som förvandlas vackert när du rullar.

Vill du ha full kontroll? du har det !

När du väl har aktiverat en rullningseffekt har du full kontroll över effektens storlek vid varje punkt i animationen. Genom att kontrollera start-, mitten- och slutvärdena kontrollerar du vad gör animation. När värdena har ställts in tar Divi hand om resten och överför elementet när det rör sig i webbläsarfönstret och skapar en animering.

  • Startvärde - Läget för startanimationen som används när elementet kommer in längst ner i webbläsarfönstret.
  • Mellanvärde - Det mellanliggande animationstillståndet som kommer att överföras när elementet rör sig till mitten av fönstret.
  • Slutvärde - Avslutande animationstillstånd som inträffar när objektet lämnar webbläsarfönstret högst upp på skärmen.

Till exempel kommer en opacitetseffekt med ett startvärde på 0 (osynligt), ett medianvärde på 100 (fullt synligt) och ett slutvärde på 0 (osynligt) att ändras från ett osynligt tillstånd när det går in fönstret tills det blir 100% synligt i mitten av fönstret, då försvinner det i ett osynligt tillstånd när du lämnar fönstret.

Justera animeringens tidslinje

Inte bara kan du justera animationsvärdena, men du kan också justera animeringens tidslinje. Tidslinjens gränssnitt representerar höjden på webbläsarfönstret. Varje animeringsnyckelbild kan utlösas på olika ställen i fönstret. Detta låter dig styra början, slutet och tidpunkten för animeringsanimationen baserat på placeringen av det animerade klippet i y-axeln i webbläsarfönstret.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Startar keyframe-position - Det här alternativet styr animeringen. Om du vill fördröja animeringen drar du positionen för startnyckelbilden inåt.
  • Center keyframe position - Detta styr den punkt då animationen når sitt centrala animationsvärde. Det behöver inte vara exakt mitt i animeringens tidslinje. Du kan flytta den mellersta nyckelbilden till valfri position i fönstret.
  • Slutet på keyframe-positionen - Denna kontroll används för att avsluta animeringen. Om du vill att animeringen ska avslutas innan klippet går ut i webbläsarfönstret kan du dra slutnyckelbildpositionen inåt.

Lägg till statiska tillstånd i alla animationer

Du kan också lägga till pauser i dina animationer genom att öka varaktigheten för ditt statiska mitteffektvärde. Om du vill skapa en statisk animationslängd klickar du på de två pilarna när du svävar över den mellersta nyckelbildrutan. Du kan sedan förlänga den mellersta nyckelbilden genom att dra dess kanter fram och tillbaka. Under denna punkt i animationen förblir elementet statiskt. När den statiska varaktigheten slutar kommer animeringen att fortsätta att övergå till sitt slutliga värde.

Vad tycker du om dessa nya funktioner? Tveka inte att dela dina åsikter i kommentarerna.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
5 aktier
del5
tweet
Enregistrer