5 SVG animacija za oživljavanje vašeg web dizajna

Animacije mogu učiniti da web stranica bude glatka i glatka, ali kako možete tu značajku ugraditi u svoj rad? Pridružite nam se i naučite kako oživjeti svoj web dizajn s ovim kreativnim primjerima SVG animacije.

Rad sa skalabilnom vektorskom grafikom

SVG je format datoteke koji koristi linije, a ne piksele, za pohranu i prikaz slika. Kao što im ime govori, skalabilna vektorska grafika može se skalirati bez gubitka kvalitete.

Osim što je izvrstan za promjenu veličine, možete koristiti i SVG kod unutar HTML-a, a djelovat će kao i svaki drugi element. To znači da možete koristiti CSS pravila, JavaScript kod, i, što je najvažnije, animacije sa SVG-ovima vaše web stranice.

SVG-ove možete izraditi pomoću softvera kao što je Adobe Illustrator i web-mjesta kao što je SVGator, ali ih možete izraditi i ručno. SVG format je XML jezik običnog teksta i pomalo nalikuje HTML-u.

Ovaj primjer sadrži četiri gumba s vlastitim ikonama i pozadinom u boji bloka. Kada odaberete gumb, on se mijenja iz kruga u zaobljen pravokutnik, a također mijenja boju pozadine stranice tako da odgovara gumbu.

Mješavina JS-a i CSS-a daje ove rezultate, a sve počinje s petljom koja dodaje slušatelje događaja na svaki gumb.

za (var i = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('klik', gumbKlik);
}

Nakon što se klikne na gumb, funkcija nazvana buttonClick() izvodi nekoliko radnji. Započinje promjenom boje pozadine stranice:

dokument.tijelo.stil.boja pozadine = `#${ovaj.getAttribute('data-background')}`;

Nakon toga dodaje CSS klasu gumbu koji je pritisnut, pokrećući animaciju i mijenjajući boju pozadine gumba.

menuItemActive.classList.remove('menu__item--aktivan');
this.classList.add('menu__item--aktivan');
menuItemActive.classList.add('menu__item--animirati');
this.classList.add('menu__item--animirati');
menuItemActive = ovaj;

Iako jednostavan, ovaj primjer SVG animacije nudi jedinstven način da svoju web stranicu učinite privlačnijom. Ova vrsta značajke dizajna savršena je za mobilne web stranice i aplikacije temeljene na HTML-u.

SVG stazi možete dodati koliko god želite čvorova, što ih čini idealnim za stvaranje teksta. Ova jednostavna animacija poteza savršeno demonstrira tehniku, a tekst se pojavljuje s lijeva na desno kao da je napisan.

Animacija nema ključne kadrove, jednostavno primjenjuje novu širinu poteza uz svojstvo prijelaza CSS-a. To čini da se svaka crta sama crta po zaslonu bez komplicirane animacije.

.put-1 {
 stroke-dasharray: 1850. 2000.;
 stroke-dashoffset: 1851;
 prijelaz: 5s linearni;
}

JS funkcija dodaje jedinstvenu CSS klasu svakom dijelu teksta koristeći jednu nadređenu CSS klasu kako bi dodatno smanjila gustoću koda.

$(funkcija() {
funkcijaanimacijaPočetak() {
 $('#kontejner').addClass('peraje');
 }
setTimeout (animationStart, 250);
});

Kao primjer samo za CSS, ova SVG animacija izvrsna je za sve koji ne žele uroniti prste u JavaScript kod. Ideja je jednostavna: gumb počinje s podcrtavanjem koji se pretvara u puni obrub kada zadržite pokazivač iznad njega.

CSS ključni okviri stvaraju dva stanja za gumb. Prvo stanje ima deblji potez i pokriva samo dno gumba SVG oblika, počevši od 0%. Drugo stanje je kompletan gumb na 100% s tanjim potezom.

@ključni okviri crtati {
 0% {
 stroke-dasharray: 140 540;
 hod-dashoffset: -474;
 širina poteza: 8px;
 }
100% {
 stroke-dasharray: 760;
 stroke-dashoffset: 0;
 širina poteza: 2px;
 }
}

Ovi ključni kadrovi primjenjuju se samo na obris gumba SVG oblika kada korisnik pomakne pokazivač preko gumba. Koristi :hover CSS pseudo-klasa kako bi se to postiglo, pokretanje pravila koje dodaje ključne kadrove animacije na gumb.

.svg-omot:lebdjeti.oblik {
-webkit-animacija: 0.5scrtatilinearninaprijed;
animacija: 0.5scrtatilinearninaprijed;
}

Ovo pokazuje kako možete stvoriti prekrasne animacije bez korištenja složenog koda. Možete koristiti ove osnove i svoju kreativnost kako biste izradili razrađenije interaktivne elemente za vlastitu web stranicu.

Uz toliko zanimljivih tehnika ispod haube, teško je odlučiti o čemu razgovarati gledajući ovaj primjer SVG sata.

Za početak, koristi funkciju Date() za prikupljanje trenutnog datuma i vremena. Koristeći ovu vrijednost, funkcije getHours(), getMinutes() i getSeconds() dijele podatke na relevantne dijelove. Kod zatim izračunava položaj svake kazaljke na satu.

var datum = noviDatum();
var satiKut = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minutni kut = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

Pohranjivanjem svake od ruku u nizu, njihove pozicije se mogu vrlo jednostavno postaviti svaki put kada se kod pokrene.

ruke[0].setAttribute('iz', mjenjač (secAngle));
ruke[0].setAttribute('do', mjenjač (secAngle + 360));
ruke[1].setAttribute('iz', mjenjač (minuteAngle));
ruke[1].setAttribute('do', mjenjač (minutni kut + 360));
ruke[2].setAttribute('iz', mjenjač (satiAngle));
ruke[2].setAttribute('do', mjenjač (satiAngle + 360));

Vrijeme ima ograničenu primjenu u području web dizajna, ali je korisno za odbrojavanje vremena, satove i pohranjivanje vremenskih oznaka. Ovaj primjer također nudi uvid u stvaranje dinamičkih SVG animacija s varijablama.

Ova SVG animacija vođena CSS-om pruža izvrstan način da bilo koji oblik izgleda nevjerojatno.

Ako ništa nije odabrano, obrazac ima zasivljene linije ispod svakog polja. Kada se odabere polje, pojavljuje se linija koja klizi s lijeve strane s glatkom animacijom. Ako korisnik odabere drugo polje, linija glatkim pokretom klizi na svoju novu poziciju.

Konačno, nakon što korisnik pritisne Prijaviti se gumb, linija se pretvara u krug koji pulsira kako se stranica učitava.

Ovaj SVG primjer je posebno impresivan jer se oslanja samo na CSS da bi proizveo tako složen rezultat. Koristi CSS varijable za pohranu podataka, što olakšava upravljanje elementima poput glavne aplikacije.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#app {
 širina: $app-width;
 visina: $app-height;
 padding: $app-padding;
 pozadina: bijela;
 kutija-sjena: 002rem rgba(crno, 0.1);
}

Možete koristiti ovaj primjer na gotovo bilo kojem web obrascu i angažirati svoje korisnike kao nikada prije.

Izrada vlastitih SVG animacija s HTML-om, JS-om i CSS-om

Stvaranje SVG animacije od nule može biti težak proces kada prvi put počnete. Ovi primjeri će vam dati početak koji vam je potreban za izradu SVG animacija koje će učiniti da vaša web stranica zablista.

9 naprednih CSS trikova za medijski upit koje biste trebali znati

Pročitajte dalje

O autoru