Sot u informuam për një përditësim të ri në Divi i cili ofron të ashtuquajturat efekte të animacionit lëvizës. Ne e kemi hedhur një vështrim dhe në këtë tutorial do të përmbledhim atë që duhet të prisni.

Le të fillojë.

Cilat janë efektet lëvizëse?

Efektet e lëvizjes janë animacione të personalizueshme që reagojnë ndaj tuajit vizitorët ndërsa lëvizin lart e poshtë faqes. Ndryshe nga animacionet tradicionale, efektet e lëvizjes janë të lidhura drejtpërdrejt me sjelljen e lëvizjes tuaj vizitor. Shpejtësia dhe drejtimi i animacionit bazohet në shpejtësinë dhe drejtimin e lëvizjes së animacionit vizitor. Afati kohor i animacionit bazohet në pozicionin e elementit në dritaren e shfletuesit.

Tingëllon e ndërlikuar, por me Divi, është mjaft e thjeshtë

Çdo element mund të animohet duke përdorur një kombinim të shkallës, rrotullimit, lëvizjes horizontale dhe vertikale, errësirës dhe efekteve të turbullimit. Ju kontrolloni madhësinë e secilit efekt në pika të ndryshme të animacionit, atëherë Divi kujdeset për pjesën tjetër, duke krijuar tranzicione të bukura ndërsa këta elementë hyjnë dhe lëvizin brenda pamjes suaj. vizitor. Krijoni animacione të thjeshta që shtojnë thellësi dhe sofistikim delikate, ose kombinojnë efekte dhe animojnë elementë të shumtë për të krijuar shpërthime spektakolare të aktivitetit që do të mahnitin tuajën vizitorët!

6 efektet unike të reja

Efektet në dispozicion për të zgjedhur ose në kombinime. Divi vjen me gjashtë efekte të ndryshme lëvizëse, secila prej të cilave mund të personalizohet individualisht duke përdorur ndërfaqen tonë të re të efekteve të lëvizjes. Ju gjithashtu mund të kombinoni ndonjë nga efektet për të krijuar animacione më komplekse.

Lëvizja vertikale

Efekti vertikal i lëvizjes lejon që çdo element të lëvizë lart e poshtë faqes në varësi të shpejtësisë dhe drejtimit të lëvizjes të një vizitori. Rezultati është një efekt paralaks! Tani gjithçka mund të përdoret për të krijuar efekte paralaksi me Divi. Ju madje mund të kombinoni lëvizjen vertikale me imazhe sfondi paralaks për të krijuar disa dizajne vërtet mbresëlënëse.

Cilësimet e figurës Divi

Lëvizja horizontale

Efekti i lëvizjes horizontale është i ngjashëm me efektin e lëvizjes vertikale, përveç që lejon lëvizjen e sendeve majtas në të djathtë në ekran në varësi të drejtimit dhe shpejtësisë së lëvizjes së një vizitori. . Ju mund të kombinoni edhe lëvizjen vertikale dhe horizontale, duke ju dhënë kontroll të plotë mbi lëvizjen e çdo elementi!

Efektet e animacionit Divi

Turbullim kontekstual

Efekti i turbullirës do të sjellë elemente brenda dhe jashtë fokusit në varësi të shpejtësisë dhe drejtimit që një vizitor po lëviz. Meqenëse Divi ju lejon të kontrolloni vlerat e turbullimit të fillimit, mesit dhe fundit, ju mund t'i fusni elementet në fokus menjëherë kur ato janë para syve të vizitorit. Shtë një mënyrë e shkëlqyeshme për të tërhequr vëmendjen ndaj informacionit të rëndësishëm.

Cilësimi i turbullirës kontekstuale Divi

shkrirë

Efekti i zbehjes me elementët zbehet brenda dhe jashtë bazuar në shpejtësinë dhe drejtimin e lëvizjes së një vizitori. Ju mund të përzierni elemente, t'i bëni ato të zhduken, ose të dyja. Kombinimi i zbehjes, turbullirës dhe shkallës mund të krijojë disa animacione me të vërtetë të sofistikuar që shtojnë një faktor shtesë "it" në planet tuaja.

Efekti zbehet Divi

Efekti i shkallëzimit

Efekti i shkallës do të rrisë ose zvogëlojë madhësinë e çdo sendi në varësi të shpejtësisë dhe drejtimit të lëvizjes së një vizitori. Nëse dëshironi të tërhiqni vëmendjen ndaj një elementi të veçantë, siç është thirrja për veprim, mund të vendosni efektin e shkallës për të rritur madhësinë e elementit ndërsa i afrohet qendrës së kornizës. dritare Sigurisht, ka edhe shumë mundësi të tjera!

Efekti i shkallëzimit

Efekt rrotullues

Efekti rrotullues me rrotullon një send në cilindo drejtim bazuar në shpejtësinë dhe drejtimin e lëvizjes së një vizitori. Rrotullimi delikat me të vërtetë mund të sjellë jetë në skena. Vetëm pak rrotullim kur kombinohet me lëvizje horizontale mund të duket e mrekullueshme! Ose lërini elementet të rrumbullakosen në qarqe.

Rregullimet e figurës efekti i rrotullimit divi

Një ndërfaqe e re intuitive

Bukuria e vërtetë e efekteve të lëvizjes së Divi-t është lehtësia e përdorimit të tyre! Ekziston një ndërfaqe e re përdoruesi që thjeshton procesin e krijimit të animacioneve në internet në mënyrë që ato të jenë të arritshme për të gjithë. Me vetëm një klikim, mund të shtoni ose kombinoni një nga gjashtë efektet e lëvizjes së Divi-t. E drejta jashtë kutisë, ata do të duken shkëlqyeshëm! Atëherë mund të rregulloni mirë efektet për të krijuar animacione edhe më të përparuara.

Një klikim dhe kaq!

Dëshironi të shtoni një efekt lëvizës në një modul? Një klikim do të shtojë efektin dhe do të duket shumë mirë! Për të shtuar një efekt lëvizjeje, thjesht hyni në grupin e ri të opsioneve Scroll Effects në skedën Advanced për çdo modul, rresht, kolonë ose seksion. Efekte të shumëfishta mund të aktivizohen në të njëjtën kohë dhe efektet do të kombinohen në një animacion të butë që transformohet bukur ndërsa lëvizni.

A doni kontroll të plotë? ju keni atë!

Pasi të keni aktivizuar një efekt lëvizës, ju keni kontroll të plotë mbi madhësinë e efektit në secilën pikë të animacionit. Duke kontrolluar vlerat e fillimit, mesit dhe fundit, ju kontrolloni cfare ben animacion. Sapo të vendosen vlerat, Divi kujdeset për pjesën tjetër dhe do ta kalojë elementin ndërsa lëviz rreth dritares së shfletuesit, duke krijuar një animacion.

  • Vlera fillestare - Gjendja e animacionit fillestar që përdoret kur elementi hyn në fund të dritares së shfletuesit.
  • Vlera e ndërmjetme - Gjendja e ndërmjetme e animacionit që do të transferohet kur elementi të lëvizë në mes të dritares.
  • Vlera përfundimtare - Gjendja e animimit që mbaron kur ndodh kur artikulli lë dritaren e shfletuesit në krye të ekranit.

Për shembull, një efekt i errësirës me një vlerë fillestare 0 (të padukshme), një vlerë mesatare 100 (plotësisht e dukshme) dhe një vlerë përfundimtare 0 (e padukshme), do të ndryshojë nga një gjendje e padukshme kur të hyjë dritarja derisa të bëhet 100% e dukshme në mes të dritares, atëherë ajo do të zhduket në një gjendje të padukshme kur dilni nga dritarja.

Rregullimi i kronologjisë së animacionit

Jo vetëm që mund të rregulloni vlerat e animacionit, por gjithashtu mund të rregulloni afatin kohor të animacionit. Ndërfaqja kohore UI përfaqëson lartësinë e dritares së shfletuesit. Çdo kornizë kyçe e animacionit mund të aktivizohet në një pozicion të ndryshëm në portin e shikimit. Kjo ju lejon të kontrolloni fillimin, mbarimin dhe kohën e animacionit të animuar bazuar në vendndodhjen e elementit të animuar në boshtin y të dritares së shfletuesit.

  • Fillimi i pozicionit të kornizës kryesore - Ky opsion kontrollon fillimin e animacionit. Nëse dëshironi të vononi animacionin, tërhiqeni pozicionin e kornizës fillestare brenda.
  • Pozicioni i kornizës qendrore - Kjo kontrollon pikën në të cilën animacioni arrin vlerën e saj kryesore të animacionit. Nuk duhet të jetë saktësisht në mes të kronologjisë së animacionit. Ju mund ta zhvendosni kornizën kryesore të mesit në çdo pozicion në dritare.
  • Fundi i pozicionit të kornizës kryesore - Ky kontroll përdoret për t'i dhënë fund animacionit. Nëse dëshironi që animacioni të përfundojë para se klipi të dalë nga dritarja e shfletuesit, mund të zvarrisni pozicionin e kornizës fundore brenda.

Shtoni gjendje statike në çdo animacion

Mund të shtoni pauza në animacionet tuaja duke rritur kohëzgjatjen e vlerës tuaj statike të efektit mesatar. Për të krijuar një kohëzgjatje të animacionit statik, klikoni në dy shigjeta kur rri pezull mbi kornizën kryesore të mesit. Pastaj mund të zgjasni kornizën kryesore të mesit duke tërhequr skajet e saj para dhe mbrapa. Gjatë kësaj pike në animacion, elementi do të mbetet statik. Pas përfundimit të kohëzgjatjes statike, animacioni do të vazhdojë të kalojë në vlerën e tij përfundimtare.

Çfarë mendoni për këto veçori të reja? Mos hezitoni të ndani mendimet tuaja në komente.