Kako animirati odseke in vrstice na Divi

Rifat Divi Tutorials Apr 23, 2022

Vsi so veliki ljubitelji kreativnega oblikovanja in animacij. Dobro oblikovane animacije so najbolj očarljiv del katerega koli spletnega mesta, ki pritegne pozornost obiskovalcev. Če je dizajn pravilno uporabljen, lahko ustrezna animacija vzpostavi močno vez med uporabnikom in vsebino na spletnem mestu. Divi ima vgrajena profesionalna orodja za obdelavo močnih animacij in učinkov. Za uporabo teh učinkov ne potrebujete nobenega strokovnega znanja. Danes bomo videli, kako z vgrajenimi funkcijami dodati čudovito animacijo vsem delcem in vrsticam strani v Diviju.

Predogled dizajna

Iz te objave boste vedeli, kako enostavno je oblikovati animacije na Diviju. Pred tem pa poglejmo, kako bo izgledala naša zasnova danes.

Priprava strani

Oblikovanje animacije na strani v Diviju je zelo preprosto in po želji lahko uporabite učinke animacije na kateri koli element strani. Poskušali bomo narediti animacijo na vnaprej pripravljeni predlogi, vendar lahko na ta način dajete stranem na vaši spletni strani animativen videz.

Ustvarite novo stran in začnite z "Brskanje po postavitvah".

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Zdaj pa izberimo vnaprej pripravljeno predlogo za naš današnji dizajn. Za današnjo vadnico bomo uporabili paket postavitve teniškega kluba, vendar lahko uporabite kar koli! Kliknite na "Uporabi to postavitev" in pripravljena bo za urejanje.

Ko je zasnova implementirana, lahko začnemo z našo današnjo vadnico.

Uvod v možnosti animacije

Izbira območja

Sistem oblikovanja je precej preprost. Tukaj smo izbrali razdelek glave za naš današnji dizajn. Da bi se ta zasnova uresničila, moramo najti vsak element/vrstico/stolpec na območju. V možnosti plasti oblikovanja v spodnjem desnem kotu lahko vidite vsak element posebej.

Nastavitev 1 - Dodaj animacijo v razdelek & vrstic

Divi ima vgrajene možnosti animacije za oblikovanje. Izberite kateri koli element strani in se pomaknite na zavihek načrtovanje. Nadaljujte s pomikanjem in videli boste možnost animacije.

Animacijski modul

Obstaja 8 različnih možnosti za dajanje animacijskega učinka elementu. Naredimo kratek pogovor o njih.

  • Slog animacije – tukaj lahko izberete animacijo za videz vašega predmeta. Za svoj predmet lahko izberete en slog, najpogostejša sloga pa sta - Fade in Slide .
  • Smer – s to možnostjo lahko določite smer animacije.
  • Trajanje – ta možnost vam omogoča, da določite, kako dolgo bo trajala vaša animacija. To šteje v milisekundah in vaša animacija bo trajala dolgo, kot želite.
  • Zamik – ta možnost je zelo uporabna, če želite animacijo zagnati ob določenem času, ker preprečuje zagon animacije, ko se stran nalaga.
  • Intenzivnost – Intenzivnost določa, kako želite, da se ta animacija prikaže. Če je vrednost nižja, bo animacija gladka. Višja je vrednost, agresivnejša je animacija.
  • Začetna motnost - 0 pomeni, da je animacija nevidna in se bo kmalu začela, 100 pa pomeni, da je v celoti vidna in je animacija končana.
  • Krivulja hitrosti - To bo označevalo gladek začetek in konec animacije.
  • Ponovi – s to možnostjo lahko ponovite animacijo.

Nastavitve 2 - Dodajte animacijo v razdelek & vrstic

Naslednja stvar so učinki drsenja, ki sprožijo animacijo med pomikanjem. Tako se animacija začne, ko je element na zaslonu in se zgodi med pomikanjem.

Omogoči učinke drsenja

Učinke pomikanja lahko nastavite v različnih slogih, da naredite animacijo pomikanja.

  • Sticky Position – Odsek ali vrstica lahko postane neodzivna, ko se uporabnik pomika mimo nje.
  • Transform Effects – Zgornji učinki so prave tehnike animacije.
  • Nastavite [Feature] – Nastavili boste lahko, kje je učinek najbolj viden na zaslonu in kdaj/kje se pojavi
  • Motion Effect Trigger – Pomembno je ugotoviti, kdaj se animacija začne; to lahko storite tako, da preverite, kje vrh elementa najprej vstopi v vidno polje, kje je središče elementa ali kje je spodnji del elementa.

Med obema metodama so velike razlike, čeprav obe metodi uporabljata nastavitve animacije. Glavna razlika je, ali želite, da se animacija izvaja samodejno ali pri vsakem dejanju, ki ga izvede uporabnik. Za mešanje animacij lahko uporabite nastavitve učinkov drsenja in animacije. Te bodo uporabljene v glavni vadnici, kot boste videli.

Oblikovanje animacije strani

Kombinacija animacije za odseke in vrstice

Ustvarjanje osupljivih učinkov na Divi s temi možnostmi je zelo enostavno. Z možnostjo zakasnitve animacije lahko skupaj naredite serijo animacij na različnih elementih in ustvarite nekaj fantastičnih vizualnih podob.

Za celoten razdelek z naslovi sledite tem nastavitvam.

  • Slog animacije: diapozitiv
  • Smer animacije: gor

Nastavitev animacije 1. vrstice

Začeli bomo z animacijo vrstice 1. Izvedite naslednje prilagoditve.

  • Slog animacije: diapozitiv
  • Smer animacije: dol
  • Zakasnitev animacije: 500 ms

Da preprečimo proženje vrstice pred animacijo, moramo nekoliko premakniti položaj vrstice.

Nastavitev animacije 2. vrstice

V vrstici 2 uporabite spodaj navedene nastavitve.

  • Slog animacije: diapozitiv
  • Režija animacije: desno
  • Zakasnitev animacije: 1000 ms

Nastavitev animacije 3. vrstice

Za 3. vrstico bomo uporabili učinke pomikanja, ker se bo, ko se pojavi 3. vrstica, večina elementov za prvi 2 vrstici premaknila navzgor, uporaba modula časovne zakasnitve pa se ne splača, saj lahko uporabimo samo učinke drsenja, da naredimo dizajn bolj prijeten.

Nastavitve animacije

Naredite prilagoditve animacije.

  • Slog animacije: Fade
  • Trajanje animacije: 500 ms
  • Zakasnitev animacije: 1500 ms
  • Začetna motnost animacije: 0%

Začetna motnost 0 pomeni, da ne bo viden, dokler ni mišljen.

Nastavitve učinkov drsenja

Kliknite zavihek napredno, da začnete z zabavo! Pomaknite se na zavihek z učinki pomika in poiščite Horizontalno gibanje. In sledite ostalim.

  • Lepljiv položaj: Ne lepite
  • Učinki preoblikovanja pomika: vodoravno (2.)
  • Omogoči vodoravno gibanje: Da
  • Sprožilec učinka gibanja: sredina elementa.

Vse je nastavljeno. Zaključili smo postopek animacije. Ko se uporabnik pomakne, se izvede animacija.

Končni predogled

Tukaj je končni rezultat našega dizajna.

Zaključek

S prisotnim animacijskim učinkom lahko spletna stran vzpostavi določene pristope do obiskovalca, kar poveča dinamiko, vizualnost in berljivost. Ustvarjanje kul animacije ne zahteva znanja kodiranja, potrebuje le Divi builder. In najbolje bi bilo, če bi imeli nekaj potrpljenja, da preizkusite nove sloge. Upam, da boste objavili objavo, in če je tako, bo deljenje čudovito!