30 Awesome SVG Animacija za vaš navdih

Oblikovalci se uporabljajo za ustvarjanje animacij v elementih HTML s pomočjo CSS. Vendar pa zaradi omejitev elementov HTML pri ustvarjanju vzorcev, oblik in drugih seveda obrnejo na SVG, ki ponuja bolj zanimive možnosti.

V sodelovanju z SVG-jem uživamo v dobrem brskalniku za SVG animacijo in imamo več načinov za ustvarjanje nove animacije. Uporabite lahko tako vgrajeno funkcionalnost SVG animacije bodisi animacijo CSS3 (upoštevajte, da CSS ne more storiti vsega, zato potrebujete JavaScript). Drug način je uporaba motorjev JavaScript, kot je GSAP ali Snap. JS je dobra praksa za ustvarjanje animacije.

Tukaj sem sestavil nekaj neverjetnih animiranih SVG. Nekateri uporabljajo SVG animacijo, drugi uporabljajo CSS transformacijo za osnovno animacijo, ostali pa uporabljajo JavaScript.

Border Animacija Seana McCafferyja

Izdelano samo s CSS, se meja po besedilu gladko oblikuje, ko se premikate nad “HOVER” navodila.

Elastična stranska vrstica SVG Nikolaja Talanova

Sidebar postane elastičen, ko ga poskušate izvleči stran. Lep koncept, ki se uporablja na stranski vrstici aplikacije, ki je navdihnila Material Design.

Povlecite do osvežitve Nikolaja Talanova

Večina strani vam dovoljuje “potegnite navzdol” na strani za osvežitev. S to animacijo, ko ste “sprostitev” stran, ikona Send (Pošlji) se spremeni v ikono Plane in se spusti v zrak.

Animirani gradient po besedilu Patricka Younga

Tukaj je prefinjen, vendar ne lahek zamuden premik besedila, ki ga bodo ljubitelji tipografije navdušili.

Animacija srca Nikolaja Talanova

Ta animacija vam pokaže, kako je ikona srca narejena iz dveh krogov in kvadrata. Preoblikovanje poteka z animacijo CSS.

Let's Travel by jjperezaguinaga

Animacija, ki ponazarja mesta in priljubljene turistične destinacije na svetu. Premiki in transformacije so ustvarjeni z uporabo CSS animacije.

Meni preklopite animacijo Tamina Martiniusa

Morfijska animacija ikone hamburgerja, ki se spremeni v križno ikono. Oglejte si, kako gladko je prehod med obema objektoma.

Animirani infografski film Sdras

Odlična animacija Sarah Drasner, ki jo poganja časovni trak GSAP. To je infografika, ki oživlja, ustvarjena z animacijo. Za dostop do okvirjev s katere koli točke uporabite drsnik.

Rain-Bros ne obožuje JS s cihadturhanom

Edinstvena in zabavna animacija zanka, ki prikazuje sprehode likov. Premikanje objektov v tej predstavitvi je kombinacija SVG in CSS3 animacije. Noge uporabljajo SVG animacijo, medtem ko drugi deli uporabljajo CSS3 animacijo.

Ura Mohamada Mohebifarja

Oglejte si tekoče gibanje rabljene v tej uri, ki prikazuje trenutni čas. Animacija je v celoti narejena z uporabo funkcionalnosti SVG animacije.

Rainbow Rocket Man Chrisa Gannona

Astronavt strelja v vesolje s svojim jet-jet paketom (?). Lepa animacija je narejena z vtičnikom GSAP Tweenmax.

Animirana ikona Luigija De Rose

Vendar pa nad temi animiranimi ikonami SVG preverite, kaj lahko storijo. Ustvarjalec je to naredil z uporabo GSAP.

Ploščati delovni prostor s Hoàng Nhật

Animacija ilustrira delovni prostor v stanovalnem slogu. Ustvarjalec je uporabil GSAP, da je ta super animacija delovne postaje.

Animirano ikono, ki jo lahko klikne Hamish Williams

To je kul animacija, ki uporablja knjižnico snap.svg. Kliknite, če želite videti pošto “poslano”.

Potapljanje Chrisa Gannona

Ste že kdaj preskočili kamenje na površini jezera? Tukaj je preprosta animacija SVG poti, ki ponazarja to, vendar brez kamnov in brez jezera.

Gibanje za splet s strani LegoMushroom

Ima animacijo, lepo melodijo, super hladen vhod za besedilo, kaj ni všeč? To je zgrajeno z mo.js, knjižnico gibanja JavaScript.

Pisana pisava Lee Porter

Poleg uporabe SVG, da bi animacijo poti skicirali obliko, jo lahko uporabite pri tipografiji, kot je tisto, kar je ustvaril ta ustvarjalec. Učinek zamegljenosti je še bolj osupljiv.

Gooey meni Lucasa Bebberja

Zabavajte se z gnjecavim učinkom pri tej zasnovi, ki je narejena z uporabo filtra SVG in z dodajanjem CSS animacije. Rezultat je realističen in res kul, lahko pa se igrate s štirimi različicami.

Nova torta Marca Barrie

Kako narediti večplastno rojstnodnevno torto z animacijo SVG in CSS.

Hvala vam Rachel Smith

Samo poglejte to čudovito animacijo preproste hvala. Ustvarjena je s pomočjo knjižnice SVG in GSAP TweenMax.

CSS vs SVG Mario Sanchez Maselli

Oglejmo si primerjavo med CSS in SVG animacijo, ali vidite razliko?

Pas za hojo po Marku Nelsonu

Drug način animacije SVG je uporaba slik iz sprites, kot je bil ta ustvarjalec.

Nakladalec s peresom Leela

Ustvarjalno delo, narejeno iz čiste SVG animacije (SMIL); ne CSS ali JS za animacijo stvari tukaj.

Logo Animacija z Adem ilter

Tukaj je lepo animirano predstavitev logotipa z uporabo inline SVG animacije. Noben CSS ali JS ni bil uporabljen, da bi vse delovalo.

Statistična animacija Jonasa Badalića

Čudovit graf s statistiko SVG animacije, ki jo poganja knjižnica Snap.SVG.

Ouroboros Noela Delgada

Neverjetna pot animacije SVG. Najprej je ustvarjalec narisal pot na SVG, preden je uporabil tween.js za dodajanje animacije.

Creative Gooey učinki, ki jih Lucas Bebber

Tukaj je sedem ustvarjalnih načinov uporabe filtra SVG za ustvarjanje gobasto podobnega učinka. Glasbeni vizualizator je moj najljubši, animacija izgleda zelo lepo.

Vrzi kravo Sarah Drasner

Ta je SVG animacija, ki jo poganja TweenMax, vendar je narejena samo za zabavo. Držite in povlecite kravo okoli planeta. Zavrtel se bo v "orbiti".

Animirani logotip Alija

Animacija je lahko lep dodatek za pivski logotip. Lepi plavajoči mehurčki so zgrajeni zgolj s sintakso izvorne animacije SVG.