Skapa vackra övergångar som reagerar på dina besökare när de bläddrar upp och ner på sidan.

Idag är vi glada över att introducera en av Divis mest fantastiska nya funktioner någonsin. Den heter ”Scroll Effects” och låter dig skapa avancerade animationer och övergångar som reagerar på dina besökare när de bläddrar upp och ner på sidan. Varje element kan animeras med en kombination av effekter. Att skapa avancerade animationer är enkelt tack vare Divis nya Scroll Effects UI. 

Divi har effektiviserat komplexiteten i webbaserade animationer och gjort dem tillgängliga för alla. Klicka bara för att lägga till en effekt och finjustera sedan animationen med enkla kontroller. Hur lätt som helst!

Vad är scrolleffekter?

Scrolleffekter är anpassningsbara animationer som reagerar på dina besökare när de bläddrar upp och ner på sidan. Till skillnad från traditionella animationer, är bläddringseffekter bundna direkt till besökarens rullningsbeteende. Hastigheten och riktningen för animationen baseras på hur snabbt och i vilken riktning besökaren rullar. Animeringens tidslinje är baserad på elementets position i webbläsarvyen.

Det låter komplicerat, men Divi gör att det är superlätt!

Vilket element som helst kan animeras med en kombination av skala, rotation, horisontell och vertikal rörelse, opacitet samt suddighetseffekter. Du kontrollerar storleken på varje effekt vid olika punkter under animeringen och sedan tar Divi hand om resten och skapar vackra övergångar när dessa element kommer in och då besökaren skrollar över sidan.

Skapa enkla animationer som lägger till subtilt djup och elegans eller kombinera effekter och animera flera element för att skapa spektakulära explosioner av aktivitet för att ge besökaren en maximal upplevelse!

Sex unika effekter

Använd dem en åt gången eller kombiner dem alla för att skapa fantastiska animationer.

Divi kommer med sex olika scrolleffekter, som var och en kan anpassas individuellt med Divis nya användargränssnitt. Du kan också kombinera alla effekter tillsammans för att skapa mer komplexa animationer.

Vertikal rörelse

Den vertikala rörelseseffekten gör att alla element kan röra sig upp och ner på sidan baserat på hastigheten och riktningen som en besökare rullar. Resultatet är en parallaxeffekt. Nu kan allt användas för att skapa parallaxeffekter med Divi. Du kan till och med kombinera vertikal rörelse med parallax bakgrundsbilder för att bygga några riktigt fantastiska mönster.

Horisontell rörelse

Den horisontella rörelseseffekten är precis som den vertikala rörelseseffekten, förutom att den tillåter att element flyttas åt vänster och höger över skärmen baserat på den riktning och hastighet som en besökare rullar. Du kan till och med kombinera vertikal och horisontell rörelse, vilket ger dig full kontroll över rörelsens alla element.

Blur

Effekten som skapar oskärpa kommer att föra element in och ut ur fokus baserat på hastigheten och riktningen som en besökare rullar. Eftersom Divi låter dig styra värdet för början, mitten och slutet, kan du sätta element i fokus rätt när det är i besökarens synfält. Det är ett utmärkt sätt att fästa uppmärksamhet på viktiga objekt.

Fade

Fadeeffekten som gör att objekten bleknar in och ut baserat på hastigheten och riktningen som en besökare skrollar. Du kan använda fade för att ta fram eller ut element eller båda. Genom att kombinera fade, oskärpa och skala kan du skapa riktigt häftiga animationer som ger en extra ”it” -faktor till dina designs.

Skala

Skaleffekten ökar eller minskar storleken på alla element baserat på hastigheten och riktningen som en besökare skrollar. Om du vill fästa uppmärksamhet på ett visst element, till exempel en uppmaning, kan du ställa in skaleffekten för att öka storleken på elementet när det kommer närmare mitten av visningsområdet. Naturligtvis finns det så många andra möjligheter också!

Rotation

Rotationseffekten roterar ett element i endera riktningen baserat på hastigheten och riktningen som en besökare skrollar. Subtil rotation kan verkligen skapa liv på sidan. Bara lite rotation i kombination med horisontell rörelse kan se bra ut! Eller låt element snurra runt, runt.

Ett nytt gränssnitt med intuiton

Den mest fantastiska delen av rullningseffekter är hur enkla de är att bygga

Det bästa med Divis nya skrolleffekter är hur enkla de är att använda! Divi skapade ett helt nytt användargränssnitt som förenklar processen att skapa webbaserade animationer så att de är tillgängliga för alla. Med ett enda klick kan du lägga till eller kombinera någon av Divis sex rullningseffekter. Du får se det grymma resultatet direkt. Därefter kan du finjustera effekterna för att skapa ännu mer avancerade animationer.

Ett klick är det enda som krävs!

Vill du lägga till en rullningseffekt till en modul? Ett klick är det enda som krävs för att lägga till effekten. För att lägga till en rullningseffekt, navigerar du helt enkelt till den nya alternativet ”Skrolleffekter” på fliken ”Avancerat” i en modul, rad, kolumn eller sektion. Flera effekter kan aktiveras samtidigt och effekterna kommer att kombineras till en enda smidig animeringsövergång när du skrollar.

Full kontroll!

När du aktiverar en skrollningseffekt har du full kontroll över effektens storlek vid varje punkt under animeringen. Genom att kontrollera start-, mellan- och slutvärdena styr du vad animationen gör. När värdena är inställda tar Divi hand om resten och kommer att skapa övergången för elementet när det rör sig genom webbläsarens visningsfält och därmed skapa en animering.

  • Startvärde – Startanimationstillståndet som används när elementet kommer in i botten av webbläsarvyn.
  • Mittvärde – Mellananimationstillståndet som det kommer att övergå till när elementet rör sig mot mitten av visningsområdet.
  • Slutvärde – Avslutande animationstillstånd som inträffar när elementet lämnar webbläsarens vy överst på skärmen.

Till exempel kommer en opacitetseffekt med ett startvärde på 0 (osynlig), ett medelvärde på 100 (helt synligt) och ett slutvärde på 0 (osynligt) leda till att övergången från ett osynligt tillstånd när det kommer in i visningsområdet tills det blir 100% synlig i mitten av utsiktsporten och sedan bleknar den tillbaka till ett osynligt tillstånd när det lämnar vyn.

Justera animeringens tidslinje

Du kan inte bara justera animationsvärdena, du kan också justera animationens tidslinje. Tidslinjen UI representerar höjden på webbläsarvyn. Varje animationsnyckelbild kan triggas på en annan position i visningsområdet. Detta gör att du kan kontrollera när animationen startar, när den slutar och tidpunkten för mitt animationsvärde baserat på var det animerade elementet finns i webbläsarvyens y-axel.

Lägg till statiska tillstånd till alla animationer

Du kan också lägga till pauser för dina animationer genom att öka varaktigheten på ditt statiska mittvärdet. Om du vill skapa en statisk animationsvaraktighet klickar du på de två pilarna när du håller muspekaren över det mittvärdet. Du kan sedan utöka det mittvärdet genom att dra dess kanter i endera riktningen. Under denna punkt på animeringen förblir elementet statiskt. När den statiska varaktigheten är slut fortsätter animationen att övergå till dess slutvärde.

Titta på skrolleffektsdemo

Vill du se vad som är möjligt? Kolla in Divis interaktiva rullningseffekterdemo för att få lite inspiration här.