Teljesen animált widgetek létrehozása a Shift.css segítségével

Web animáció módot kínál megragadja az emberek figyelmét és húzza őket tovább egy weboldalra. Rengeteg eszköz áll rendelkezésre ingyenes animációk készítése de Shift.css egyike a legújabb csokoroknak.

Ez egy ingyenes nyílt forráskódú keret létrehozásra készült dinamikus animációk bármely konténerben. És ezek az animációk nincsenek egy sorba zárva. Valójában egyedi animációkat készíthet minden elemet a blokkban és alkalmazza ezeket egy bizonyos sorrendben.

A Shift demo oldal sokkal jobban megmutathatja neked, mint szavakkal.

Egy dolog, amit észre fog venni, hogy a tartályon belüli minden elem külön HTML elemet. Legyen szó akár SVG-ről, akár egy képről vagy bármi másról, mindent különíthet el hozzon létre saját egyéni animációs hatást.

A könyvtár két fájlt tartalmaz, a .css és .js könyvtárnak kell lennie, és mindkettőnek hozzáadódik a dokumentum fejéhez.

Nem találok semmilyen GitHub repo-t ehhez a projekthez, ezért kell töltse le közvetlenül a fájlokat a Shift.css weboldalról.

A következő lépés az definiáljon egy konténer elemet bizonyos tartalommal. Az osztálynevek fontosak, így minden animáló elemnek szüksége van legyen az osztály .shift-elem alkalmazott.

Ezekkel az osztályokkal együtt Ön is HTML5 adattulajdonságok hozzáadása az animáció működésének meghatározása. Jelenleg csak három van, de elégnek kell lenniük ahhoz, hogy testreszabják a teljes animációs hatást.

1. data-animáció: Az animáció neve
2. data-késleltetés: Teljes animáció (másodpercben) az animáció megkezdése előtt
3. data-időtartam: Az animáció teljes hossza (másodpercben)

Az animáció neve a előre meghatározott animáció létrehozott a Shift könyvtárhoz. Most már vannak 15 animációs név közül választhat. Láthatjuk őket a Shift.css kezdőlapjának alján.

Éppen másolás beillesztés amit csak akarsz az animációs névbeállításba és jó lesz menni! Például, ha szeretném használni a kilépési fade animációt, hozzáadnék adatok-animációs = "shift_exitFade" adatelemként minden olyan elemhez, amelyet az ilyen módon kell animálni. Egyszerű peasy.

Kívánom, hogy ez a könyvtár több lehetőséggel rendelkezzen a JavaScript-ben, mert lehetővé tenné a fejlesztők számára, hogy sokkal jobban ellenőrizzék az elhelyezést és a funkciókat. De egy egyszerű (és ingyenes) animációs keretrendszerhez nem tudok panaszt tenni.

A Shift.css tökéletes újabb fejlesztők akik létrehozni akarnak összetettebb animációs stílusok anélkül, hogy megírnánk a kódot.