I dag blev vi informeret om en ny opdatering vedr Divi som tilbyder såkaldte scrollende animationseffekter. Vi har taget et kig på det, og i denne tutorial vil vi opsummere, hvad du kan forvente.
Lad os starte.
Hvad er rulleeffekterne?
Scroll-effekter er tilpasselige animationer, der reagerer på dine besøgende mens de ruller op og ned på siden. I modsætning til traditionelle animationer er rulleeffekter direkte relateret til din rulleadfærd besøgende. Hastigheden og retningen af animationen er baseret på hastigheden og retningen af rulningen af besøgende. Animationens tidslinje er baseret på elementets placering i browservinduet.
Det lyder kompliceret, men med Divi, det er ret simpelt
Ethvert element kan animeres ved hjælp af en kombination af skala, rotation, vandret og lodret bevægelse, opacitet og sløringseffekter. Så styrer du størrelsen af hver effekt på forskellige punkter i animationen Divi tager sig af resten og skaber smukke overgange, når disse elementer kommer ind og bevæger sig i dit syn. besøgende. Skab enkle animationer, der tilføjer subtil dybde og sofistikering, eller kombiner effekter og animer flere elementer for at skabe spektakulære udbrud af aktivitet, der vil imponere din besøgende!
6 nye seks unikke effekter
Effekter til rådighed at vælge imellem eller i kombinationer. Divi leveres med seks forskellige rulleeffekter, som hver kan tilpasses individuelt ved hjælp af vores nye rulleeffekter-brugergrænseflade. Du kan også kombinere en hvilken som helst af effekterne for at skabe mere komplekse animationer.
Lodret bevægelse
Den lodrette bevægelseseffekt giver ethvert element mulighed for at bevæge sig op og ned på siden afhængigt af en besøgendes rullehastighed og retning. Resultatet er en parallakseffekt! Nu kan alt bruges til at skabe parallakseffekter med Divi. Du kan endda kombinere lodret bevægelse med parallaks baggrundsbilleder for at skabe nogle virkelig imponerende designs.
Horisontal bevægelse
Den vandrette bevægelseseffekt svarer til den lodrette bevægelseseffekt, bortset fra at den gør det muligt at flytte emner fra venstre mod højre på skærmen afhængigt af den besøgendees retning og rullehastighed. . Du kan endda kombinere lodret og vandret bevægelse, hvilket giver dig fuld kontrol over bevægelsen af ethvert element!
Kontekstuel sløring
Sløringseffekten bringer elementer ind og ude af fokus afhængigt af den hastighed og retning, en besøgende ruller. Da Divi giver dig mulighed for at kontrollere start-, midter- og slutsløringsværdierne, kan du bringe elementerne i fokus lige når de er foran den besøgendes øjne. Det er en fantastisk måde at gøre opmærksom på vigtig information.
smeltet
Fade-effekten med elementer falmer ind og ud afhængigt af hastigheden og retningen af en besøgendes rulle. Du kan blande elementer, få dem til at forsvinde eller begge dele. Kombinationen af fade, sløring og skala kan skabe nogle virkelig sofistikerede animationer, der tilføjer en ekstra "it" -faktor til dine designs.
Skaleringseffekt
Skalaeffekten øger eller formindsker størrelsen på ethvert element baseret på hastigheden og retningen af en besøgendes rulle. Hvis du vil henlede opmærksomheden på et bestemt element, såsom en opfordring til handling, kan du indstille skaleringseffekten til at øge størrelsen på elementet, når det kommer tættere på midten af rammen. vindue. Der er selvfølgelig også mange andre muligheder!
Rotationseffekt
Rotationseffekten med roterer et element i begge retninger baseret på en besøgendes rullehastighed og retning. Subtil rotation kan virkelig bringe scener til liv. Bare en smule centrifugering i kombination med vandret bevægelse kan se godt ud! Eller lad elementerne gå rundt i cirkler.
En ny intuitiv interface
Den virkelige skønhed ved Divis rulleeffekter er deres brugervenlighed! Der er en ny brugergrænseflade, der forenkler processen med at oprette webanimationer, så de er tilgængelige for alle. Med kun et klik kan du tilføje eller kombinere en af Divis seks rulleeffekter. Lige ud af kassen ser de godt ud! Derefter kan du finjustere effekterne for at skabe endnu mere avancerede animationer.
Et klik og det er det!
Vil du tilføje en rulleeffekt til et modul? Et klik tilføjer effekten, og det ser også godt ud! For at tilføje en rulleeffekt skal du blot få adgang til den nye gruppe med rulleeffekter i fanen Avanceret i ethvert modul, række, kolonne eller sektion. Flere effekter kan aktiveres på samme tid, og effekterne kombineres til en jævn animation, der transformeres smukt, mens du ruller.
Vil du have fuld kontrol? du har det !
Når du først har aktiveret en rulleeffekt, har du fuld kontrol over effektens størrelse på hvert punkt i animationen. Ved at kontrollere start-, mellem- og slutværdierne styrer du hvad gør animation. Når værdierne er indstillet, tager Divi sig af resten og overfører elementet, når det bevæger sig rundt i browservinduet og skaber en animation.
- Startværdi - Tilstanden for startanimationen, der bruges, når elementet kommer ind i bunden af browservinduet.
- Mellemværdi - Den mellemliggende animationstilstand, der overføres, når elementet bevæger sig til midten af vinduet.
- Slutværdi - Den afsluttende animationstilstand, der opstår, når elementet forlader browservinduet øverst på skærmen.
For eksempel vil en opacitetseffekt med en startværdi på 0 (usynlig), en medianværdi på 100 (fuldt synlig) og en slutværdi på 0 (usynlig) ændre sig fra en usynlig tilstand, når den kommer ind vindue, indtil det bliver 100% synligt midt i vinduet, så forsvinder det i en usynlig tilstand, når vinduet forlades.
Justering af animationens tidslinje
Ikke kun kan du justere animationsværdierne, men du kan også justere animationens tidslinje. Tidslinjens brugergrænseflade repræsenterer højden af browservinduet. Hver animation keyframe kan udløses på en anden position i viewporten. Dette giver dig mulighed for at styre starten, slutningen og timingen af animationsanimationen baseret på placeringen af det animerede element i y-aksen i browservinduet.
- Start keyframe position - Denne indstilling styrer starten af animationen. Hvis du vil forsinke animationen, skal du trække placeringen af startnøglerammen indad.
- Center keyframe position - Dette styrer det punkt, hvor animationen når sin midterste animationsværdi. Det behøver ikke at være nøjagtigt midt i animationens tidslinje. Du kan flytte den midterste nøgleramme til en hvilken som helst position i vinduet.
- Afslutning af keyframe position - Denne kontrol bruges til at afslutte animationen. Hvis du vil have animationen til at slutte, inden klippet går ud af browservinduet, kan du trække slutnøglerammepositionen indad.
Føj statiske tilstande til enhver animation
Du kan også tilføje pauser til dine animationer ved at øge varigheden af din statiske mellemeffektværdi. For at oprette en statisk animationsvarighed skal du klikke på de to pile, når du holder markøren over den midterste nøgleramme. Du kan derefter udvide den midterste nøgleramme ved at trække kanterne frem og tilbage. Under dette punkt i animationen forbliver elementet statisk. Når den statiske varighed er slut, vil animationen fortsætte med at overgå til den endelige værdi.
Hvad synes du om disse nye funktioner? Tøv ikke med at dele dine meninger i kommentarerne.
