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.