Scalable Vector Graphics (SVG) je obrazový formát psaný v XML. Pomocí SVG můžete kódovat dvourozměrnou škálovatelnou grafiku. Poté je můžete implementovat a upravit v CSS a JavaScript.
SVG umožňuje tři typy grafiky: vektorové tvary (přímé a zakřivené čáry ve všech směrech a tvarech), obrázky a text. Díky svým různým schopnostem se weboví designéři obracejí na SVG a vytvářejí složité animace. Snadno se instalují, při změně velikosti neztrácejí kvalitu a nepotřebují k fungování žádné aplikace třetích stran.
Protože animace stále rostou v oblibě, většina z nich s nimi není obeznámena. Tento článek upozorní na 20 fantastických SVG animací, které ukazují potenciál tohoto formátu.
1. Lékařské SVG ikony od kittonů
Rychlé odkazy
- 1. Lékařské SVG ikony od kittonů
- 2. Umístěte kurzor na SeanMcCaffery
- 3. Nikolay Talanov potáhněte dolů a obnovte jej (papírové letadlo)
- 4. Jen pokračujte v Diaco M. Lotfollahi
- 5. Filtry SVG přidané do videa HTML5
- 6. Skládačka
- 7. Liner Gradient od Patricka Younga
- 8. Pojďme cestovat jjperezaguinaga
- 9. Hodiny Mohamada Mohebifara
- 10. Animované ikony Luigi De Rosa
- 11. Všechna zařízení ve SVG od Chris Gannon
- 12. Vodopád Chris Gannon
- 13. Generátor rostlin Blake Bowen
- 14. Kliknutelná ikona Hamish Williams
- 15. Nový dort od Marco Barría
- 16. Skartovač papíru od Chris Gannon
- 17. Low PolyLion od GRAYGHOST
- 18. Loader přesýpacích hodin od Leela
- 19. Citlivá kráva Sarah Drasner
- 20. Student by Domany
- Tvůj tah
Tato příjemná a plynulá animace je skvělá pro všechny webové stránky související se zdravím. Zatímco seznamujete v různých vláknech, obrázky se jemně objeví. Pohotovostní vůz nebo atom se vytvoří, oko se otevře a lékař vyskočí. Tato animace ukazuje veškerou zábavu a dynamiku SVG.
Odkaz
2. Umístěte kurzor na SeanMcCaffery
Univerzální animace, kterou můžete umístit na jakýkoli interaktivní web. Jemný vzhled okrajů, když se vznášíte, vás uspokojí a vyzve vás k kliknutí na odkaz.
Odkaz
3. Nikolay Talanov potáhněte dolů a obnovte jej (papírové letadlo)
Obvykle se stránky obnoví, když na ně „stáhnete“. Tato animace to přivede na novou úroveň. Když ji uvolníte, vypustíte do oblohy papírové letadlo. Pokud chcete, aby návštěvníci vaši aplikaci často aktualizovali, měli byste zvážit přidání takové animace.
4. Jen pokračujte v Diaco M. Lotfollahi
Animace SVG, která ukazuje potenciál škálovacího vektoru. Hladký přesný pohyb lidského těla je hypnotizující.
Odkaz
5. Filtry SVG přidané do videa HTML5
Paul Irish z týmu Google Chrome se podíval na to, jak SVG může upravovat obsah mimo vektorovou grafiku. Kombinoval CSS a SVG, aby vytvořil úžasné vizuální filtry, které ukazují, že animace SVG může být dobrým doplňkem hotového videa.
Odkaz
6. Skládačka
Můžete vytvářet úžasné interaktivní puzzle s animací SVG. V tomto příkladu si můžeme vybrat jeden z mnoha obrázků a uvidíme, jak dekonstruuje mnoho malých kousků skládačky. Můžete to také rekonstruovat!
Odkaz
7. Liner Gradient od Patricka Younga
Pokud jste do neonových světel a krásných písem, tuto animaci si užijete. Tato práce ukazuje, jak nepotřebujete žádné pohyblivé čáry pro skvělou animaci, jen skvělé písmo a správný barevný kód s efektem přechodu.
Odkaz
8. Pojďme cestovat jjperezaguinaga
Dva letouny a horkovzdušný balón se točí kolem populárních památek světa. Tato animace je barevná, optimistická a ohromující. Ukazuje vše, co můžete dělat, pokud jste zruční v SVG.
Odkaz
9. Hodiny Mohamada Mohebifara
Jednoduchá animace pohyblivých hodin SVG, která ukazuje aktuální čas. Uklidňující pohyb ukazatelů a minimalistický design dělají tuto animaci zázraky.
Odkaz
10. Animované ikony Luigi De Rosa
Pokud umístíte kurzor na tyto ikony, spustí se animace, které jsou jednoduché, ale efektivní. Můžete vidět, že nemusíte dělat divy, abyste vytvořili působivou animovanou ikonu.
11. Všechna zařízení ve SVG od Chris Gannon
Jednorázová animace, která překonává všechna inteligentní zařízení, která používáme nejkreativnějším způsobem. Na ploše se změní notebook, notebook na tablet a poté smartphone.
Odkaz
12. Vodopád Chris Gannon
Další z nich, Chris Gannon, je úhledná ukázka pěnivého vodopádového dna. Pohyb vody je čistý a můžete vidět malé kapky stříkající vody opouštějící hranice animace, aby bylo vše realističtější.
Odkaz
13. Generátor rostlin Blake Bowen
Tohle je něco jiného. Když kliknete na tlačítko „Vytvořit“, uvidíte, že rostliny rostou a rostou. Při každém kliknutí se však vytvoří různé vzory.
Odkaz
14. Kliknutelná ikona Hamish Williams
Další interaktivní SVG, který spustí animaci, jakmile na ni kliknete. Po kliknutí na tuto se spustí animace „Odeslat“.
Odkaz
15. Nový dort od Marco Barría
Zajímavá animace, která ukazuje vytvoření dortu vrstvy po vrstvě. Je to působivá animace SVG vhodná pro přání k narozeninám.
16. Skartovač papíru od Chris Gannon
Pokud si užijete sledování skartace papíru, užijete si tuto animaci, která zobrazuje strojové skartování papíru papírem bez omezení v plynulé sekvenci.
Odkaz
17. Low PolyLion od GRAYGHOST
Jedná se o falešnou ilustraci a animaci, která lví hlavu objevuje a mizí ve formě animovaných polygonů.
Odkaz
18. Loader přesýpacích hodin od Leela
Další efektivní animace, která používá pouze SVG. Každých 5 sekund se přesýpací hodiny otočí vzhůru nohama a zahájí nový cyklus.
Odkaz
19. Citlivá kráva Sarah Drasner
Jedná se o zábavnou interaktivní animaci, která vám umožní kliknout na krávu a přetáhnout ji kolem Měsíce, zatímco na ni vypadá bezradný astronaut.
20. Student by Domany
Zdá se, že nadšený student je připraven se učit! Je to skvělá animace, kde se stránky knihy úhledně otáčí. Žádné blikání od studenta, ale tohle je stále dokonale uklizená animace k uzavření tohoto seznamu.
Odkaz
Tvůj tah
Jaké jsou vaše oblíbené animace SVG nezahrnuté v tomto seznamu? Podělte se o své výběry v komentářích níže!
