30 Awesome SVG Animacija za vaše nadahnuće
Dizajneri su koristili CSS za izradu animacija u HTML elementima. Međutim, zbog ograničenja HTML elemenata u izradi uzoraka, oblika i drugih, oni se prirodno okreću SVG-u koji nudi više zanimljivih mogućnosti.
Radeći sa SVG-om, uživamo u dobrom pregledniku za SVG animaciju i imamo više načina za stvaranje nove animacije. Možete koristiti i ugrađenu funkcionalnost SVG animacije ili CSS3 animaciju (imajte na umu da CSS ne može sve učiniti tako da i dalje postoji potreba za JavaScriptom). Drugi način je korištenje JavaScript motora kao što je GSAP ili Snap. JS je dobra praksa za stvaranje animacije.
Ovdje sam sastavio nevjerojatnu animiranu SVG. Neki koriste SVG animaciju, drugi koriste CSS transformaciju za osnovnu animaciju, a ostatak koristi JavaScript.
Border Animacija Seana McCafferya
Napravljen samo s CSS-om, granica formira glatko oko teksta, kada prelazite preko “Hover” instrukcija.
Elastična SVG bočna traka Nikolaja Talanova
Bočna traka postaje elastična kada je pokušavate povući sa strane. Lijep koncept primijenjen na Sidebar-u nadahnutoj dizajnom materijala.
Povucite se do osvježenja Nikolay Talanov
Većina stranica omogućuje “povuci dolje” na stranici za osvježavanje. S ovom animacijom, kad vi “puštanje” na stranici, ikona Pošalji se mijenja u ikonu Plane i biva puštena u zrak.
Animirani gradijent na tekst Patricka Younga
Evo suptilnog, ali ne i lako propustljivog pomaka tekstualnog gradijenta koji će ljubavnici tipografije voljeti.
Animacija srca Nikolaja Talanova
Ova animacija pokazuje kako je ikona srca načinjena od dva kruga i kvadrata. Transformacija se vrši CSS animacijom.
Putujmo jjperezaguinaga
Animacija koja ilustrira gradove i popularna turistička odredišta u svijetu. Pokreti i transformacije stvoreni su pomoću CSS animacije.
Izbornik za prebacivanje animacije Tamina Martiniusa
Morfing animacija ikone hamburgera koja se pretvara u ikonu križa. Pogledajte kako je prijelaz između dva objekta glatka.
Animirani Infographic by Sdras
Awesome animacija Sarah Drasner, powered by GSAP vremenskoj. To je infografika koja oživljava, napravljena animacijom. Pomoću klizača pristupite okvirima iz bilo koje točke.
Rain-Bros ne vole JS od cihadturhana
Jedinstvena i zabavna animacija petlje koja prikazuje hodanje likova. Kretanje objekata u ovoj demonstraciji kombinacija je SVG i CSS3 animacije. Noge koriste SVG animaciju, dok ostale dijelove koriste CSS3 animaciju.
Sat od Mohamada Mohebifara
Gledajte glatko kretanje rabljenog u ovom satu koji prikazuje trenutno vrijeme. Animacija je u potpunosti izrađena pomoću funkcionalnosti SVG animacije.
Rainbow Rocket Man Chrisa Gannona
Astronaut koji puca u svemir sa svojim jet-jet paketom (?). Lijepa animacija napravljena pomoću dodatka GSAP Tweenmax.
Animirana ikona Luigija De Rose
No nad tim animiranim SVG ikonama provjerite što mogu učiniti. Stvoritelj je to napravio pomoću GSAP-a.
Ravan radni prostor od Hoàng Nhật
Animacija ilustrira radni prostor u stilu dizajna. Stvoritelj je koristio GSAP kako bi ovu sjajnu animaciju radne stanice napravio.
Animirana ikona s klikom Hamisha Williamsa
Ovo je cool animacija koja koristi biblioteku snap.svg. Kliknite da biste vidjeli poruku e-pošte “poslao”.
Ronjenje Chrisa Gannona
Jeste li ikada preskočili kamenje na površini jezera? Evo jednostavne SVG putanje animacije koja to ilustrira, ali bez kamenja, i bez jezera.
Prijedlog za web tvrtke LegoMushroom
Ima animaciju, lijepu melodiju, super cool ulaz za tekst, što se ne sviđa? Ovo je izgrađeno s mo.js, bibliotekom pokretnog grafičkog JavaScripta.
Animirani font za pisanje Lee Portera
Osim korištenja SVG-a kako bi animacija putanje skicirala oblik, možete je koristiti na tipografiji kao što je ovaj kreator napravio. Efekt zamućenja čini ga još sjajnijim.
Gooey izbornik Lucasa Bebbera
Zabavite se s gooey efektom u ovom dizajnu, koji je izrađen pomoću SVG filtra i dodavanjem CSS animacije. Rezultat je realan i stvarno cool, a možete igrati s četiri različite verzije.
Novi kolač Marca Barrie
Kako napraviti slojevitu rođendansku tortu sa SVG i CSS animacijom.
Hvala vam Rachel Smith
Samo pogledajte ovu sjajnu animaciju jednostavne zahvalnice. Stvara se pomoću SVG i GSAP TweenMax knjižnice.
CSS vs SVG - Mario Sanchez Maselli
Pogledajmo sada usporedbu CSS i SVG animacije, vidite li razliku?
Pas za šetnju Marka Nelsona
Drugi način animiranja SVG-a jest upotreba sprites slika, poput načina na koji je ovaj kreator učinio.
Leela s utovarivačem pješčanih satova
Kreativno djelo izrađeno pomoću čiste SVG animacije (SMIL); ne CSS ili JS animirati stvari ovdje.
Logo Animacija autora Adem ilter
Evo lijepog animiranog uvoda logotipa pomoću ugrađene SVG animacije. Nijedan CSS ili JS nije korišten da bi sve funkcioniralo.
Statistička animacija Jonasa Badalića
Prekrasan grafikon statistike sa SVG animacijom koju pokreće biblioteka Snap.SVG.
Ouroboros Noela Delgada
Nevjerojatna putanja SVG animacije. Prvo je kreator nacrtao putanju staze na SVG-u, prije nego što je koristio tween.js za dodavanje animacije.
Creative Gooey Učinci Lucas Bebber
Evo sedam kreativnih upotreba SVG filtra za stvaranje efekta nalik na gnjecavost. Glazbeni vizualizator je moja omiljena, animacija izgleda vrlo lijepo.
Bacite kravu Sarah Drasner
Ovo je SVG animacija koju pokreće TweenMax, ali napravljena samo za zabavu. Držite i povucite kravu oko planeta. Ona će se vrtjeti u "orbiti".
Animirani logotip Alija
Animacija bi mogla biti dobar dodatak za pivski logotip. Lijepi mali plutajući mjehurići izgrađeni su isključivo s izvornom SVG sintaksom animacije.
