Idag fick vi besked om en ny uppdatering på Divi som erbjuder så kallade rullande animationseffekter. Vi har tagit en titt på det och i den här handledningen kommer vi att sammanfatta vad du kan förvänta dig.
Låt oss börja.
Vilka är rullningseffekterna?
Scroll-effekter är anpassningsbara animationer som reagerar på din besökare när de rullar upp och ner på sidan. Till skillnad från traditionella animationer är rullningseffekter direkt relaterade till rullningsbeteendet hos din besökaren. Hastigheten och riktningen för animationen är baserad på hastigheten och riktningen för rullningen av besökaren. Animeringens tidslinje baseras på elementets position i webbläsarfönstret.
Det låter komplicerat, men med Divi, det är ganska enkelt
Alla element kan animeras med en kombination av skala, rotation, horisontell och vertikal rörelse, opacitet och oskärpa effekter. Du styr sedan storleken på varje effekt vid olika punkter i animeringen Divi tar hand om resten och skapar vackra övergångar när dessa element kommer in och rör sig i din vy. besökaren. Skapa enkla animationer som lägger till subtilt djup och sofistikering, eller kombinera effekter och animera flera element för att skapa spektakulära skurar av aktivitet som kommer att imponera på din 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.
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.
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!
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.
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.
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!
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.
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
Du kan inte bara justera animationsvärdena, utan du kan också justera animeringens tidslinje. Tidslinjens användargränssnitt representerar höjden på webbläsarfönstret. Varje animerad nyckelbildruta kan utlösas på en annan plats i visningsporten. Detta gör att du kan styra start, slut och tidpunkt för den animerade animeringen baserat på platsen för det animerade elementet i y-axeln i webbläsarfönstret.
- 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.
