30 úžasné SVG animace pro vaši inspiraci
Návrháři vytvořili animace v HTML elementech pomocí CSS. Nicméně vzhledem k omezením prvků HTML při vytváření vzorů, tvarů a dalších prvků se přirozeně obracejí na SVG, což nabízí zajímavější funkce.
Při práci s SVG se těšíme na dobrou podporu prohlížeče pro animaci SVG a máme více způsobů, jak vytvořit novou animaci. Můžete použít jak vestavěnou funkci animace SVG, tak animaci CSS3 (všimněte si, že ne vše lze provést pomocí CSS, takže je stále potřeba JavaScript). Dalším způsobem je použití JavaScript motorů jako GSAP nebo Snap. JS je dobrou praxí pro vytváření animací.
Zde jsem sestavil úžasný animovaný SVG. Někteří používají SVG animaci, jiní používají CSS transformaci pro základní animaci a zbytek používají JavaScript.
Hraniční animace Sean McCaffery
Hranice je vytvořena pouze pomocí CSS a kolem textu se vytváří hladce, když přejíždíte přes “VZNÁŠET SE” návod.
Elastický SVG postranní panel od Nikolaje Talanova
Postranní panel se stává elastickým, když se ho snažíte vytáhnout z boku. Pěkný koncept aplikovaný na postranní panel aplikace inspirovaný materiálem.
Vytáhněte dolů k Refresh by Nikolay Talanov
Většina stránek vám to umožňuje “strhnout” na stránce, kterou chcete aktualizovat. S touto animací, když vy “uvolnění” na stránce se ikona Odeslat změní na ikonu Letadlo a dostane se do vzduchu.
Animovaný přechod na textu od Patricka Younga
Tady je jemný, ale ne lehký přechod, který milují typografii.
Srdce animace Nikolay Talanov
Tato animace vám ukáže, jak je ikona srdce vyrobena ze dvou kruhů a čtverce. Transformace se provádí pomocí CSS animace.
Pojďme cestování jjperezaguinaga
Animace, která ilustruje města a oblíbené turistické cíle na světě. Pohyb a transformace jsou vytvořeny pomocí CSS animace.
Menu přepínat animace Tamino Martinius
Morphing animace ikony hamburger se změní na ikonu křížku. Podívejte se, jak hladký je přechod mezi dvěma objekty.
Animované Infographic od Sdras
Úžasná animace Sarah Drasner, poháněná časovou osou GSAP. Je to infographic ožívající, vyrobený s animací. K posuvu snímků z libovolného místa použijte posuvník.
Rain-Bros nemá rád JS by cihadturhan
Unikátní a zábavná animace smyčky zobrazující procházky postav. Pohyb objektů v tomto demu je kombinací animace SVG a CSS3. Nohy používají SVG animaci, zatímco jiné části používají CSS3 animaci.
Hodiny Mohamada Mohebifara
Sledujte plynulý pohyb z druhé ruky v těchto hodinách ukazující aktuální čas. Animace je kompletně vytvořena pomocí funkce animace SVG.
Rainbow Rocket Man Chris Gannon
Kosmonaut střílí do vesmíru se svým jet-packem poháněným duhou (?). Pěkná animace pomocí pluginu GSAP Tweenmax.
Animovaná ikona Luigi De Rosa
Nicméně nad těmito animovanými SVG ikonami se můžete podívat, co mohou dělat. Tvůrce to provedl pomocí GSAP.
Plochý pracovní prostor od Hoàng Nhật
Animace ilustruje pracovní plochu v plochém designu. Tvůrce použil GSAP, aby tuto úžasnou animaci pracovní stanice vytvořil.
Klikací animovaná ikona Hamisha Williamsa
Jedná se o skvělou animaci využívající knihovnu snap.svg. Kliknutím zobrazíte e-mail “odesláno”.
Potápění Chris Gannon
Vynechali jste někdy kameny na hladině jezera? Zde je jednoduchá animace SVG cesty, která ilustruje, ale bez kamenů a bez jezera.
Pohyb pro web LegoMushroom
Má animaci, pěknou melodii, super skvělý vstup do textu, co to není? To je postaveno s mo.js, pohyblivou grafickou JavaScript knihovnou.
Animované psaní písmo Lee Porter
Kromě použití SVG k tomu, aby animace cesty kreslila tvar, můžete ji použít na typografii jako to, co tento tvůrce vytvořil. Efekt rozostření z něj dělá úžasnější.
Gooey menu Lucas Bebber
Bavte se s gooey efektem v tomto designu, který je vytvořen pomocí SVG filtru a přidáním CSS animace. Výsledek je realistický a opravdu cool a můžete hrát se čtyřmi různými verzemi.
Nový dort Marco Barría
Jak vytvořit vrstvený narozeninový dort s animací SVG a CSS.
Děkuji Rachel Smithové
Stačí vidět tuto úžasnou animaci jednoduchého poděkování. Je vytvořen pomocí SVG a GSAP TweenMax knihovny.
CSS vs SVG Mario Sanchez Maselli
Podívejme se nyní na srovnání CSS a SVG animace, vidíte rozdíl?
Pěší pes od Mark Nelson
Dalším způsobem, jak animovat SVG, je použití skřítků, jako to udělal tento tvůrce.
Zavaděč přesýpacích hodin od Leela
Kreativní práce s využitím čisté SVG animace (SMIL); žádné CSS nebo JS zde animovat věci.
Logo animace Adem ilter
Zde je pěkné animované logo intro pomocí in-line animace SVG. Žádné CSS ani JS nebyly použity k tomu, aby všechno fungovalo.
Statistiky animace Jonas Badalic
Krásný graf statistiky s animací SVG poháněnou knihovnou Snap.SVG.
Ouroboros od Noel Delgado
Úžasná cesta animace SVG. Nejprve tvůrce nakreslil cestu SVG, než použil tween.js k přidání animace.
Kreativní Gooey efekty Lucas Bebber
Zde je sedm kreativních způsobů použití SVG filtru, aby se dosáhlo efektu gooey. Vizualizér hudby je můj oblíbený, animace vypadá velmi pěkně.
Hoď krávu Sarah Drasnerová
Toto je SVG animace poháněná TweenMaxem, ale vyrobená jen pro zábavu. Držte a přetáhněte krávu kolem planety. To se točí na oběžné dráze.
Animované logo Ali
Animace by mohla být příjemným doplňkem pro bublinkové logo piva. Pěkné malé plovoucí bubliny jsou postaveny výhradně s nativní syntaxí nativní animace SVG.
