Animációs ikonok segítségével
Talán már találkozott mo.js. nagyon erős könyvtár grafikai animáció Oleg Solomka. Ezzel lehet, hogy egy csomó csodálatos animációk, és ma szeretnék megosztani veletek animált ikonok.
Ez lenne igazán jó, hogy képes legyen könnyen animálni ikonok, mint Laika a Twitter, de miután látta, hogy a hibrid Dribbble lövés Daryl Ginn (úgy fog kinézni, mint az animáció Laika Twitter, ha hajtották végre facebook), azt akartuk, hogy megpróbálja egyesíteni mo.js a font Félelmetes web betűtípusok Dave Gandy, hogy mi történik.
Mi animált ikonok akciók, ahol meg lehet nézni az aktív állapotban. Például a „kedvenc”, „Like” vagy „plusz”. Elméletileg akkor lehet alkalmazni hatások bármely ikon, de ez az ikon akció animáció jobban illeszkedik.
mo.js könyvtár valóban nagyon könnyű használni. Eddig csak egy órára, de akkor már kap egy ötletet, hogyan lehet ellenőrizni az időzítés funkció az elemeket. Könyvtár nyit sok lehetőséget, és lehetővé teszi, hogy az összetett, reális animáció. Az adattár GitHub talál több információt és segítséget a munkában.
Figyelmeztetés: Létrehoztunk egy őrült, valahol értelmetlen és túl chur összetett animáció! Használd a saját felelősségére
Vegyünk egy példát. Mi akasztott ikonochny font betűtípus Félelmetes és hozzáadott egy ikont a gomb:
A stílus egy pár a tulajdonságok lehetnek reset, és adjuk hozzá a méret a gombot. És állítsa az animáció a következők lehetnek:
Megjegyezzük, hogy az általunk használt fix méretű a hatást. A rugalmasabb kiviteli alak dinamikusan állítsa be a méretet. Most, hogy az animáció; A lehetőségek végtelenek! Reméljük élvezte az animációt, és ez alapján akkor jön valami saját! A projekt GitHub.
Felülvizsgálat: Team webformyself.
A legtöbb IT hírek és webfejlesztés A csatorna-távirat