Scalable Vector Graphics (SVG) je obrazový formát napísaný v XML. Pomocou SVG môžete kódovať dvojrozmernú škálovateľnú grafiku. Potom ich môžete implementovať a upravovať v CSS a JavaScript.
SVG umožňuje tri typy grafiky: vektorové tvary (priame a zakrivené čiary vo všetkých smeroch a tvaroch), obrázky a text. Weboví návrhári sa vďaka svojim rôznym funkciám obracajú na SVG, aby vytvorili zložité animácie. Ľahko sa inštalujú, pri zmene ich veľkosti nestrácajú kvalitu a nevyžadujú fungovanie žiadnych aplikácií tretích strán.
Keďže animácie stále rastú v obľube, väčšina z nich ich nepozná. Tento článok upozorní na 20 fantastických animácií SVG, ktoré ukazujú potenciál tohto formátu.
1. Lekárske ikony SVG od kittonov
Rýchle odkazy
- 1. Lekárske ikony SVG od kittonov
- 2. Umiestnite kurzor myši na SeanMcCaffery
- 3. Potiahnite nadol, aby ste ho obnovili (papierová rovina) od Nikolaya Talanova
- 4. Len pokračujte v diaco M. Lotfollahi
- 5. SVG filtre pridané do videa HTML5
- 6. Puzzle
- 7. Liner Gradient od Patricka Younga
- 8. Poďme cestovať jjperezaguinagou
- 9. Hodiny od Mohamada Mohebifara
- 10. Animované ikony Luigi De Rosa
- 11. Všetky zariadenia v SVG od Chris Gannon
- 12. Vodopád Chrisa Gannona
- 13. Generátor rastlín Blake Bowen
- 14. Kliknutím na ikonu Hamish Williams
- 15. Nová torta od Marco Barría
- 16. Skartovač papiera od Chrisa Gannona
- 17. Low PolyLion od GRAYGHOST
- 18. Nakladač presýpacích hodín od Leela
- 19. Citlivá krava od Sarah Drasner
- 20. Študent Domany
- Si na rade
Táto vrelá a plynulá animácia je vynikajúca pre všetky webové stránky súvisiace so zdravím. Počas prehľadávania v rôznych vláknach sa obrázky jemne zobrazia. Pohotovostné vozidlo alebo atóm sa skonštruujú, oko sa otvorí a lekár vyskočí. Táto animácia ukazuje všetku zábavu a dynamiku SVG.
odkaz
2. Umiestnite kurzor myši na SeanMcCaffery
Univerzálna animácia, ktorú môžete umiestniť na akúkoľvek interaktívnu webovú stránku. Jemný vzhľad okrajov, keď sa vznášate, vás uspokojí a vyzve vás, aby ste klikli na odkaz.
odkaz
3. Potiahnite nadol, aby ste ho obnovili (papierová rovina) od Nikolaya Talanova
Spravidla sa stránky obnovia, keď na ne kliknete. Táto animácia to posunie na novú úroveň. Keď ho uvoľníte, spustíte do neba papierové lietadlo. Ak chcete, aby vaši návštevníci aktualizovali vašu aplikáciu často, mali by ste zvážiť pridanie takejto animácie.
4. Len pokračujte v diaco M. Lotfollahi
Animácia SVG, ktorá ukazuje potenciál vektora mierky. Hladký presný pohyb ľudského tela je hypnotizujúci.
odkaz
5. SVG filtre pridané do videa HTML5
Paul Irish z tímu prehliadača Google Chrome sa pozrel na to, ako môže SVG upravovať obsah mimo vektorovej grafiky. Kombinoval CSS a SVG, aby vytvoril úžasné vizuálne filtre, ktoré dokazujú, že animácia SVG môže byť dobrým doplnkom hotového videa.
odkaz
6. Puzzle
Pomocou animácie SVG môžete vytvárať úžasné interaktívne puzzle. V tomto príklade si môžeme vybrať jeden z mnohých obrázkov a uvidíme, ako rozloží veľa malých kúskov skladačky. Môžete to tiež zrekonštruovať!
odkaz
7. Liner Gradient od Patricka Younga
Ak ste do neónových svetiel a krásnych písiem, táto animácia sa vám bude páčiť. Táto práca ukazuje, ako nepotrebujete žiadne pohyblivé čiary pre skvelú animáciu, len skvelé písmo a správny farebný kód s efektom gradientu.
odkaz
8. Poďme cestovať jjperezaguinagou
Dva lietadlá a teplovzdušný balón otáčajúce sa okolo obľúbených svetových pamiatok. Táto animácia je farebná, optimistická a pútavá. Ukazuje všetko, čo môžete urobiť, ak ste zruční v SVG.
odkaz
9. Hodiny od Mohamada Mohebifara
Jednoduchá animácia pohyblivých hodín SVG, ktorá ukazuje aktuálny čas. Upokojujúci pohyb ukazovateľov a minimalistický dizajn zázrakov pre túto animáciu.
odkaz
10. Animované ikony Luigi De Rosa
Ak umiestnite kurzor myši na tieto ikony, spustíte animácie, ktoré sú jednoduché, ale efektívne. Môžete vidieť, že nemusíte robiť zázraky, aby ste vytvorili pôsobivú animovanú ikonu.
11. Všetky zariadenia v SVG od Chris Gannon
Animácia na jedno použitie, ktorá prechádza cez všetky inteligentné zariadenia, ktoré používame najkreatívnejším spôsobom. Na pracovnej ploche sa zmení laptop, laptop na tablet a potom smartphone.
odkaz
12. Vodopád Chrisa Gannona
Ďalší z nich, Chris Gannon, je úhľadnou ukážkou speneného dna vodopádu. Pohyb vody je čistý a môžete vidieť malé kvapky striekajúcej vody opúšťajúce hranice animácie, aby sa všetko zdalo realistickejším.
odkaz
13. Generátor rastlín Blake Bowen
Teraz je toto niečo iné. Po kliknutí na tlačidlo „Vytvoriť“ uvidíte rastliny rastúce a rastúce. Po každom kliknutí sa však vytvoria rôzne vzory.
odkaz
14. Kliknutím na ikonu Hamish Williams
Ďalší interaktívny SVG, ktorý spustí animáciu, keď na ňu kliknete. Po kliknutí na túto ikonu sa spustí animácia „Odoslať“.
odkaz
15. Nová torta od Marco Barría
Zaujímavá animácia, ktorá ukazuje vytvorenie koláčovej vrstvy po vrstve. Je to pôsobivá animácia SVG vhodná na blahoželanie k narodeninám.
16. Skartovač papiera od Chrisa Gannona
Ak máte radi sledovanie drvenia papiera, budete si túto animáciu, ktorá zobrazuje strojové drvenie papiera po papieri neobmedzene krát v plynulej sekvencii, páčiť.
odkaz
17. Low PolyLion od GRAYGHOST
Ide o ilustráciu a animáciu, ktorá vyfúkne myseľ a zobrazuje lví hlavu, ktorá sa objavuje a mizne vo forme animovaných polygónov.
odkaz
18. Nakladač presýpacích hodín od Leela
Ďalšia účinná animácia, ktorá používa iba SVG. Každých 5 sekúnd sa presýpacie hodiny otočia hore nohami a začnú nový cyklus.
odkaz
19. Citlivá krava od Sarah Drasner
Jedná sa o zábavnú interaktívnu animáciu, ktorá vám umožní kliknúť na kravu a pretiahnuť ju okolo Mesiaca, zatiaľ čo sa na ňu pozerá zmätený astronaut.
20. Študent Domany
Zdá sa, že je nadšený študent pripravený sa učiť! Je to skvelá animácia, pri ktorej sa stránky kníh úhľadne otáčajú. Žiadny žmurknutie od študenta, ale toto je stále dokonale upravená animácia na uzavretie tohto zoznamu.
odkaz
Si na rade
Aké sú vaše obľúbené animácie SVG, ktoré nie sú uvedené v tomto zozname? Podeľte sa o svoje tipy v komentároch nižšie!
