Нажмите "Enter", чтобы перейти к содержанию

Hogyan készítsünk rögzített animációt

Animáció a Tilde Designerben

Sok tervező az animációt használja az egyéni stílus létrehozásához és a webhely újjáélesztéséhez. A szokatlan animációs elemek lehetővé teszik a teljes interaktív történeteket, amelyek vonzzák a felhasználókat.

Az animáció 3 fő szabálya van:

  1. Azon fontos elemek animálása, amelyek bizonyos funkciókat végeznek az oldalon: gombok, menüelemek és aktív linkek.
  2. Megismeri az intézkedést. Animáció létrehozása, próbálja meg, hogy ne tegyen hatást túlzott rögeszmés, mert a felhasználói irritációt okozhatja.
  3. Győződjön meg róla, hogy az animáció helyesen jelenik meg. Például a hatások nem lassíthatnak vagy lóghatnak.

A Tilda tervező többféle animációt kínál a felhasználók számára. A szabványos blokkokat, akkor az alapvető hatások megjelenésének különböző elemek és Zeroblock — hozzon létre lépésenként animáció és állítsa hatásai.

A standard blokkban manuálisan fel kell emelni az egyes képernyőfelbontás összes elemének értékeit. Ugyanakkor a tervező képes különböző kiegészítő elemeket, például gombokat, szövegblokkokat, mezőket, és t.D. bármilyen kötetben. Meg kell jegyezni, hogy a hatások nem befolyásolják az oldal betöltését, mert nem veszítik el őket.

Basic animáció egy sor a legnépszerűbb hatásai, amelyek közül néhány, melyek egy szabványos, például a megjelenése egy elem révén az átláthatóságot (a bal / jobb vagy felső / alsó), a növekedés, pararallax, rögzítés Amikor görgetés és mások. A felhasználó önállóan megváltoztathatja az animáció paramétereit: A francia bekezdések növeléséhez vagy csökkentéséhez konfigurálja a megfelelő távolságot, válassza ki az egyes elemek megjelenését és késleltetését.

A tilde lépésenkénti animációjának létrehozásakor a tervező hozzárendeli a módosítási módokat vagy mozgásokat az oldal bármely eleméhez.

Az animációs beállítások a következő jellemzőket tartalmazzák:

  • Időtartam;
  • az x, y tengelyek felett;
  • átláthatóság;
  • fordulat;
  • skála;
  • Az animáció megtekintése (lineáris, rebound és t.D.);
  • késleltetés.

Összehasonlításképpen: Az oldalon megjelenő szabványos animált elem mindig statikus helyzetbe kerül, vagy a görgetés közben rögzített, míg a lépésenkénti animáció használata sokkal több előnyt jelent. Például, akkor befolyásolja a sebességet, az átláthatóság, a pálya az elem mozgását, kapcsolja vagy állítsa az intézkedések, ha lebeg a kurzor. Ez jelentősen megköveteli a webhelyet, és lehetővé teszi, hogy szinte bármilyen kreatív ötletet hajtson végre. A Dokkey Animációt a Tilde-ben is használhatja, így a felhasználó hosszabb és élvezheti. Olyan hatások, amelyek egyedi képet hoznak létre, és emlékezik a webhely látogatói.

Először is, az elsődleges, lépésenkénti animáció a ZeroBlock-ban a professzionális tervezők számára készült. Annak érdekében, hogy kihasználhassuk az összes képességét, menj a blokkkönyvtárba (a másik kategória után), és adjunk hozzá a ZeroBlock oldalhoz, vagy használja a Gyors hozzáadási menüt.

Ha bármilyen lépésenkénti animációt hoz létre, ki kell választania azokat a feltételeket, amelyek alapján elkezd játszani (esemény). A Tilde-ben beállíthatja a következő feltételeket:

  1. Elem a képernyőn — A hatás akkor indul, ha egy elem megjelenik a képernyőn.
  2. A képernyőn lévő blokk — az animáció akkor játszik, amikor egy bizonyos blokk megjelenik.
  3. A görgetés — animáció kötődik az oldal görgetéséhez.
  4. A lebegésen — a hatás akkor jelenik meg, amikor egy külön elemet lebegnek.
  5. A kattintás — animáció az elemre kattintva indul ki.

A teszt opciókkal és a Play Elemen / Play All segítségével megtekintheti az elem vagy az összes elem animációját a blokkban.

Tilde funkcionalitás: gomb animáció

Az egyik animációs opció, amely az interakciót a gombokkal érdekesebbé teszi — ez egy lebegő hatás. Például, amikor lebegett a kurzort egy elem, megváltoztatja a színét, növekszik, inverzió bekövetkezik vagy offset és a T.D.

A blokkkönyvtár és a ZeroBlock szabványos elemek segítségével animálhatja a gombot

  1. A szabványos blokkban bekövetkező hatás.
    Ez a lehetőség a legegyszerűbb és legkülönbözőbb, még egy tapasztalatlan felhasználó is képes lesz kitalálni, hogyan kell dolgozni a szabványos blokkkal. Ehhez elegendő megtalálni a konstruktor menüszakasz «űrlap és gombot, és használja az opcionális beállításokat. Például válassza a gomb váltás egy gombbal, ha kap egy inverziós hatás).
  2. Lebegési hatás nulla blokkban.
    A kívánt hatás létrehozásához a lépésenkénti animációra kell hivatkoznia. A blokk beállításaiban használja a Szerkesztés szerkesztését, és válassza az Esemény → Hover menüpontot. Ezt követően adja meg a kívánt paramétereket, például a gomb növekedését, amikor egy másodpercig maximumra emelkedik. Visszaadja a gombot a normál állapotba automatikusan, és nem igényel további konfigurációt.

    A TIDA gomb legnépszerűbb animációi közé tartozik a következők:

    • Az árnyékokkal való hatások (árnyék hullám, megjelenés, amikor lebegnek és.);
    • Auto-glare;
    • Splash belül, amikor lebeg;
    • A hinta hatása;
    • Növekedés;
    • Jitter.

Az animáció a Tilda mobilverziójában?

Annak ellenére, hogy az animációk nagy választéka, amelyet a tervező létrehozhat a webhely asztali verziójához, hasonló hatások le vannak tiltva a mobil verzióhoz. Ez megtörtént annak érdekében, hogy a látogatók kényelmesebbé váljanak a mobileszközökön lévő erőforrás használatához.

Az animáció nem működik a következő okok miatt:

  • Mobile mobil böngésző teljesítménye. A különböző hatások használata a webhely lassú letöltését okozhatja, ami az átalakítás általános csökkentéséhez vezet.
  • A mobileszközök kis képernyője. Számos komplex animáció csak bonyolítja az információ észlelését és az erőforrás túlterhelését.

Ha továbbra is szeretné bővíteni a képességeit a Tilda platform, és add animáció a mobil változata a honlapon, akkor a módosításokat és scriptek elérhető online.

Комментарии закрыты, но обратные ссылки и pingbacks ещё работают.