Skalabilna vektorska grafika (SVG) format je slike ispisan u XML-u. Pomoću SVG-a možete kodirati dvodimenzionalnu skalabilnu grafiku. Zatim ih možete implementirati i modificirati u CSS i JavaScript.
SVG omogućuje tri vrste grafike: vektorske oblike (ravne i zakrivljene linije u svim smjerovima i oblicima), slike i tekst. Zbog različitih mogućnosti, web dizajneri se okreću SVG-u kako bi napravili složene animacije. Instaliraju se lako, ne gube na kvaliteti kad im se promijeni veličina i ne zahtijevaju da rade bilo koje treće aplikacije.
Budući da animacije i dalje rastu, većina ih nije upoznata. Ovaj članak će istaknuti 20 fantastičnih SVG animacija koje pokazuju potencijal ovog formata.
1. Medicinske SVG ikone od kitona
Brze veze
- 1. Medicinske SVG ikone od kitona
- 2. Zadržite pokazivač miša kod SeanMcCaffery
- 3. Povucite prema dolje da se osvježite (papirnati zrakoplov) Nikolaja Talanova
- 4. Samo nastavite dalje Diaco M. Lotfollahi
- 5. SVG filtri su dodani u HTML5 video
- 6. Slagalica
- 7. Linerni gradijent Patrick Young
- 8. Putujmo jjperezaguinaga
- 9. Sat Mohamad Mohebifar
- 10. Animirane ikone Luigi De Rosa
- 11. Svi uređaji u SVG-u Chrisa Gannona
- 12. Vodopad Chrisa Gannona
- 13. Generator bilja Blake Bowen
- 14. Ikona koja se može kliknuti Hamish Williams
- 15. Novi kolač Marca Barria
- 16. Shredder za papir Chrisa Gannona
- 17. Niski poliLion tvrtke GRAYGHOST
- 18. Utovarivač na satu Leela
- 19. Odzivna krava Sarah Drasner
- 20. Student by Domany
- Tvoj red
Ova topla i glatka animacija izvrsna je za bilo koju web stranicu koja se odnosi na zdravlje. Dok listate kroz različite teme, slike će se suptilno pojaviti. Vozilo hitne pomoći ili atom će konstruirati, oko će se otvoriti i liječnik će iskočiti. Ova animacija pokazuje svu zabavu i dinamičnost SVG-a.
Veza
2. Zadržite pokazivač miša kod SeanMcCaffery
Univerzalna animacija koju možete staviti na bilo koju interaktivnu web stranicu. Suptilni izgled obruba kad lebdite u leđima ostavlja vas zadovoljavajući osjećaj i poziva vas da kliknete na vezu.
Veza
3. Povucite prema dolje da se osvježite (papirnati zrakoplov) Nikolaja Talanova
Obično će se stranice osvježiti kad na njih "povučete". Ova animacija dovodi to na novu razinu. Kad se povučete da biste je oslobodili, lansirat ćete papirni avion u nebo. Ako želite da posjetitelji često osvježavaju vašu aplikaciju, razmislite o dodavanju animacije poput ove.
4. Samo nastavite dalje Diaco M. Lotfollahi
SVG animacija koja pokazuje potencijal Vektora skaliranja. Glatko precizno kretanje ljudskog tijela hipnotizira.
Veza
5. SVG filtri su dodani u HTML5 video
Paul Irish iz tima Google Chrome pogledao je kako SVG može mijenjati sadržaj izvan vektorske grafike. Kombinirao je CSS i SVG kako bi napravio nevjerojatne vizualne filtre kako bi pokazao da SVG animacija može biti dobar dodatak gotovom videu.
Veza
6. Slagalica
Možete napraviti nevjerojatne interaktivne slagalice sa SVG animacijom. U ovom primjeru možemo odabrati jednu od mnogih slika i vidjeti kako ona dekonstruira mnoge male dijelove slagalice. Možete ga i rekonstruirati!
Veza
7. Linerni gradijent Patrick Young
Ako se uključite u neonska svjetla i prekrasne fontove, uživat ćete u ovoj animaciji. Ovo djelo pokazuje kako vam ne trebaju nikakve pokretne linije za sjajnu animaciju, samo sjajan font i pravi kôd boje s efektom gradijenta.
Veza
8. Putujmo jjperezaguinaga
Dva zrakoplova i balon s vrućim zrakom koji se okreću oko popularnih svjetskih znamenitosti. Ova animacija je šarena, optimistična i fantastična. Pokazuje sve što možete učiniti ako ste vješti u SVG-u.
Veza
9. Sat Mohamad Mohebifar
Jednostavna SVG animacija pomičnog sata koja prikazuje trenutno vrijeme. Umirujući pokret pokazivača i minimalistički dizajn čine čuda za ovu animaciju.
Veza
10. Animirane ikone Luigi De Rosa
Ako miš zadržite iznad ovih ikona, pokrenut ćete animacije, koje su jednostavne, ali učinkovite. Možete vidjeti da ne morate činiti čuda da biste napravili impresivnu animiranu ikonu.
11. Svi uređaji u SVG-u Chrisa Gannona
Animacija u jednom koraku koja ide preko svih pametnih uređaja koje koristimo na najkreativniji način. Desktop će se pretvoriti u laptop, laptop u tablet, a zatim u pametni telefon.
Veza
12. Vodopad Chrisa Gannona
Još jedan Chris Gannon, ovo je uredna demonstracija pjenušavog dna vodopada. Kretanje vode je uredno i možete vidjeti male kapljice pljusnute vode kako napuštaju granice animacije kako bi sve izgledalo što realnije.
Veza
13. Generator bilja Blake Bowen
Ovo je nešto drugo. Kada kliknete na gumb "Stvori", vidjet ćete kako biljke rastu i rastu. Ali svaki put kada kliknete, formirat će se različiti uzorci.
Veza
14. Ikona koja se može kliknuti Hamish Williams
Još jedan interaktivni SVG koji aktivira animaciju kada kliknete na nju. Ovaj će pokrenuti animaciju "Pošalji" nakon što kliknete na nju.
Veza
15. Novi kolač Marca Barria
Zanimljiva animacija koja prikazuje izradu torte sloj po sloj. To je impresivna SVG animacija pogodna za rođendansku čestitku.
16. Shredder za papir Chrisa Gannona
Ako uživate gledati uništavanje papira, uživat ćete u ovoj animaciji koja neprestano slikovito prikazuje papir u strojnom rezanju papira.
Veza
17. Niski poliLion tvrtke GRAYGHOST
Ovo je umiljata ilustracija i animacija koja prikazuje lavovu glavu koja se pojavljuje i nestaje u obliku animiranih poligona.
Veza
18. Utovarivač na satu Leela
Još jedna učinkovita animacija koja koristi samo SVG. Svakih 5 sekundi satni sat će se okrenuti naopačke i započeti novi ciklus.
Veza
19. Odzivna krava Sarah Drasner
Ovo je smiješna interaktivna animacija koja vam omogućuje da kliknete na kravu i povučete je oko mjeseca dok je zbunjeni astronaut gleda u nju.
20. Student by Domany
Pojavljuje se oduševljeni student spreman za učenje! Izvrsna je animacija u kojoj se stranice knjiga uredno okreću. Nema treptanja od učenika, ali ovo je još uvijek savršeno uredna animacija za zaključivanje ovog popisa.
Veza
Tvoj red
Koje su vaše omiljene SVG animacije koje nisu uključene na ovaj popis? Podijelite svoje tipove u komentarima ispod!
