Danas smo obaviješteni o novom ažuriranju na Divi koji nudi takozvane efekte skrolajuće animacije. Pogledali smo ga iu ovom ćemo vodiču sažeti što biste trebali očekivati.
Počnimo.
Koji su efekti pomicanja?
Efekti pomicanja su prilagodljive animacije koje reagiraju na vaše posjetitelji dok se pomiču gore-dolje po stranici. Za razliku od tradicionalnih animacija, učinci pomicanja izravno su povezani s vašim pomicanjem posjetilac. Brzina i smjer animacije temelje se na brzini i smjeru pomicanja posjetilac. Vremenska traka animacije temelji se na položaju elementa u prozoru preglednika.
Zvuči komplicirano, ali sa Divi, sasvim je jednostavno
Bilo koji element može se animirati kombinacijom skale, rotacije, vodoravnog i okomitog kretanja, neprozirnosti i efekata zamućenja. Zatim kontrolirate veličinu svakog efekta u različitim točkama animacije Divi brine se za ostalo, stvarajući prekrasne prijelaze dok ovi elementi ulaze i kreću se unutar vašeg pogleda. posjetilac. Stvorite jednostavne animacije koje dodaju suptilnu dubinu i sofisticiranost ili kombinirajte efekte i animirajte više elemenata kako biste stvorili spektakularne nalete aktivnosti koji će vas oduševiti posjetitelji!
6 novih šest jedinstvenih efekata
Učinci dostupni za odabir ili u kombinaciji. Divi dolazi sa šest različitih efekata pomicanja, od kojih se svaki može pojedinačno prilagoditi pomoću našeg novog korisničkog sučelja s efektima pomicanja. Također možete kombinirati bilo koji od efekata da biste stvorili složenije animacije.
Okomito kretanje
Učinak okomitog kretanja omogućuje bilo kojem elementu da se kreće prema gore i dolje po stranici, ovisno o brzini i smjeru pomicanja posjetitelja. Rezultat je paralaksni efekt! Sada se sve može koristiti za stvaranje paralax efekata s Divi. Možete čak kombinirati vertikalno kretanje sa paralaksnim pozadinskim slikama da biste stvorili neke zaista impresivne dizajne.
Horizontalno kretanje
Učinak vodoravnog kretanja sličan je efektu vertikalnog kretanja, osim što omogućuje pomicanje predmeta slijeva udesno na zaslonu, ovisno o smjeru i brzini pomicanja posjetitelja. . Možete čak kombinirati vertikalno i vodoravno kretanje, dajući vam potpunu kontrolu nad kretanjem bilo kojeg elementa!
Kontekstualno zamagljivanje
Učinak zamućenja donijet će elemente u i izvan fokusa, ovisno o brzini i smjeru u kojem posjetitelj pomiče. Budući da vam Divi omogućuje upravljanje početnim, srednjim i krajnjim vrijednostima zamućenja, elemente možete fokusirati točno kad su pred očima posjetitelja. To je izvrstan način za skretanje pozornosti na važne informacije.
rastopljeni
Učinak blijeđenja s elementima blijedi prema van i ovisno o brzini i smjeru posjetiteljevog svitka. Možete kombinirati elemente, učiniti ih da nestanu ili oboje. Kombinacija blijeđenja, zamućenja i ljestvice može stvoriti neke zaista sofisticirane animacije koje dodaju dodatni faktor „it“ vašim dizajnom.
Učinak skaliranja
Učinak skale povećat će ili smanjiti veličinu bilo kojeg predmeta ovisno o brzini i smjeru posjetnikova pomicanja. Ako želite skrenuti pozornost na određeni element, poput poziva na akciju, možete postaviti efekt skale kako biste povećali veličinu elementa kako se približava središtu okvira. prozor. Naravno, postoje i mnoge druge mogućnosti!
Efekat rotacije
Efekt rotiranja okreće predmet u bilo kojem smjeru na temelju brzine i smjera pomicanja posjetitelja. Suptilna rotacija doista može oživjeti scene. Samo malo okretanja u kombinaciji s vodoravnim pokretima može izgledati sjajno! Ili pustite da se elementi vrte u krug.
Novo intuitivno sučelje
Prava ljepota Divijevih efekata pomicanja je njihova jednostavnost upotrebe! Novo je korisničko sučelje koje pojednostavljuje postupak izrade web animacija tako da budu dostupne svima. Samo jednim klikom možete dodati ili kombinirati jedan od šest Divijevih efekata pomicanja. Izravno iz kutije, izgledat će sjajno! Tada možete fino podesiti efekte kako biste stvorili još naprednije animacije.
Jedan klik i to je to!
Želite li modulu dodati efekt pomicanja? Jedan klik dodati će efekt i izgledat će sjajno! Da biste dodali efekt pomicanja, jednostavno pristupite novoj grupi opcija Efekti pomicanja na kartici Napredno bilo kojeg modula, retka, stupca ili odjeljka. Istovremeno se može aktivirati više efekata, a efekti će se kombinirati u jednu glatku animaciju koja se lijepo pretvara dok se pomičete.
Želite li potpunu kontrolu? Imaš to !
Nakon što omogućite efekt pomicanja, imate potpunu kontrolu nad veličinom efekta u svakoj točki animacije. Kontroliranjem početne, srednje i završne vrijednosti kontrolirate što čini animacija. Jednom kada se vrijednosti postave, Divi se brine za ostalo i prijeći će element dok se kreće u prozoru preglednika, stvarajući animaciju.
- Početna vrijednost - Stanje početne animacije koja se koristi kada element uđe na dnu prozora preglednika.
- Srednja vrijednost - Srednje stanje animacije koje će se prenijeti kad se element pomakne na sredinu prozora.
- Krajnja vrijednost - Završno stanje animacije koje se događa kada stavka napusti prozor preglednika na vrhu zaslona.
Na primjer, učinak neprozirnosti s početnom vrijednošću 0 (nevidljiv), medijanom 100 (potpuno vidljiv) i završnom vrijednošću 0 (nevidljiv), promijenit će se iz nevidljivog stanja kad uđe prozor dok ne postane 100% vidljiv u sredini prozora, tada će nestati u nevidljivom stanju prilikom izlaska iz prozora.
Prilagođavanje vremenske trake animacije
Ne samo da možete prilagoditi vrijednosti animacije, već možete prilagoditi i vremensku traku animacije. UI vremenske trake predstavlja visinu prozora preglednika. Svaki ključni kadar animacije može se pokrenuti na drugom mjestu u okviru za prikaz. To vam omogućuje kontrolu početka, kraja i vremena animacije animacije na temelju lokacije animiranog elementa na y-osi prozora preglednika.
- Početna pozicija ključnog kadra - Ova opcija kontrolira početak animacije. Ako želite odgoditi animaciju, povucite položaj početnog ključnog kadra prema unutra.
- Položaj središnjeg ključnog kadra - Ovo kontrolira točku u kojoj animacija doseže središnju vrijednost animacije. Ne mora biti točno u sredini vremenske trake animacije. Srednji ključni kadar možete premjestiti na bilo koje mjesto u prozoru.
- Kraj položaja ključnog kadra - Ova kontrola koristi se za završetak animacije. Ako želite da animacija završi prije nego što isječak izađe iz prozora preglednika, možete povući krajnji ključni kadar prema unutra.
Dodajte statička stanja bilo kojoj animaciji
Također možete dodati pauze u svoje animacije povećavanjem trajanja vaše statičke vrijednosti srednjeg učinka. Da biste stvorili trajanje statične animacije, kliknite dvije strelice kad zadržite pokazivač iznad srednjeg okvira. Zatim možete proširiti srednji ključni kadar povlačenjem njegovih rubova naprijed-natrag. Tijekom ove točke u animaciji element će ostati statičan. Nakon završetka statičkog trajanja, animacija će nastaviti prijelaz na svoju konačnu vrijednost.
Što mislite o ovim novim značajkama? Ne ustručavajte se podijeliti svoja mišljenja u komentarima.
