5 SVG animacij za poživitev vašega spletnega oblikovanja

Animacije lahko naredijo spletno mesto gladko in gladko, toda kako lahko to funkcijo vključite v svoje delo? Pridružite se nam in se naučite, kako poživite svoje spletno oblikovanje s temi kreativnimi primeri animacije SVG.

Delo s prilagodljivo vektorsko grafiko

SVG je format datoteke, ki za shranjevanje in prikaz slik uporablja črte in ne slikovne pike. Kot pove že njihovo ime, se lahko razširljiva vektorska grafika poveča brez izgube kakovosti.

Poleg tega, da je odlična za spreminjanje velikosti, lahko uporabite tudi kodo SVG znotraj HTML in deluje kot kateri koli drug element. To pomeni, da lahko uporabite Pravila CSS, JavaScript koda, in, kar je najpomembneje, animacije s SVG-ji vašega spletnega mesta.

SVG lahko ustvarite s programsko opremo, kot je Adobe Illustrator, in spletnimi mesti, kot je SVGator, lahko pa jih ustvarite tudi ročno. Format SVG je jezik XML z navadnim besedilom in je nekoliko podoben HTML.

Ta primer vsebuje štiri gumbe z lastnimi ikonami in ozadje v barvi blokov. Ko izberete gumb, se spremeni iz kroga v zaobljen pravokotnik, hkrati pa preklopi tudi barvo ozadja strani, da se ujema z gumbom.

Mešanica JS in CSS daje te rezultate in vse se začne z zanko doda poslušalce dogodkov na vsak gumb.

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

Ko kliknete gumb, funkcija, imenovana buttonClick(), izvede več dejanj. Začne se s spremembo barve ozadja strani:

dokument.body.style.backgroundColor = `#${to.getAttribute('data-background')}`;

Po tem gumbu, ki je bil pritisnjen, doda razred CSS, ki sproži animacijo in spremeni barvo ozadja gumba.

menuItemActive.classList.remove('menu__item--aktiven');
this.classList.add('menu__item--aktiven');
menuItemActive.classList.add('menu__item--animirati');
this.classList.add('menu__item--animirati');
menuItemActive = to;

Čeprav je preprost, ta primer animacije SVG ponuja edinstven način, kako narediti vaše spletno mesto bolj privlačno. Ta vrsta oblikovne funkcije je kot nalašč za mobilna spletna mesta in aplikacije, ki temeljijo na HTML.

Pot SVG lahko dodate poljubno število vozlišč, zaradi česar so idealna za ustvarjanje besedila. Ta preprosta animacija poteze odlično prikazuje tehniko, pri čemer se besedilo pojavlja od leve proti desni, kot da je napisano.

Animacija nima ključnih okvirjev, preprosto uporabi novo širino poteze poleg lastnosti prehoda CSS. Tako se vsaka črta nariše po zaslonu brez zapletene animacije.

.pot-1 {
 stroke-dasharray: 1850 2000;
 stroke-dashoffset: 1851;
 prehod: 5s linearen;
}

Funkcija JS vsakemu delu besedila doda edinstven razred CSS z uporabo enega nadrejenega razreda CSS, da dodatno zmanjša gostoto kode.

$(funkcijo() {
funkcijoanimacija Začni() {
 $('#posoda').addClass('fin');
 }
setTimeout (animationStart, 250);
});

Kot primer samo za CSS, je ta animacija SVG odlična za vse, ki ne želijo potopiti prstov v kodo JavaScript. Ideja je preprosta: gumb se začne s podčrtajem, ki se spremeni v polno obrobo, ko miškin kazalec premaknete nanj.

Ključni okvirji CSS ustvarijo dve stanji za gumb. Prvo stanje ima debelejšo potezo in pokriva samo dno gumba oblike SVG, začenši pri 0%. Drugo stanje je popoln gumb na 100 % s tanjšim udarcem.

@ključni okvirji nariši {
 0% {
 stroke-dasharray: 140 540;
 stroke-dashoffset: -474;
 širina poteze: 8px;
 }
100% {
 stroke-dasharray: 760;
 stroke-dashoffset: 0;
 širina poteze: 2px;
 }
}

Ti ključni okvirji se uporabijo samo za obris gumba oblike SVG, ko uporabnik premakne kazalec nad gumb. Uporablja :hover Psevdorazred CSS da bi to dosegli, sproži pravilo, ki gumbu doda ključne okvire animacije.

.svg-ovij: lebdi.oblika {
-webkit-animacija: 0.5srisatilinearnanaprej;
animacija: 0.5srisatilinearnanaprej;
}

To kaže, kako lahko ustvarite čudovite animacije brez uporabe zapletene kode. Te osnove in svojo ustvarjalnost lahko uporabite za izdelavo bolj dovršenih interaktivnih elementov za svoje spletno mesto.

S toliko zanimivimi tehnikami pod pokrovom se je težko odločiti, o čem bi razpravljali, ko pogledamo ta primer ure SVG.

Za začetek uporablja funkcijo Date() za zbiranje trenutnega datuma in časa. S to vrednostjo funkcije getHours(), getMinutes() in getSeconds() razdelijo podatke na ustrezne dele. Koda nato izračuna položaj vsake roke na uri.

var datum = novoDatum();
var ureKot = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minutni kot = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

S shranjevanjem vsake roke v matriko lahko zelo enostavno nastavite njihov položaj vsakič, ko se koda zažene.

roke[0].setAttribute('od', menjalnik (secAngle));
roke[0].setAttribute('do', menjalnik (secAngle + 360));
roke[1].setAttribute('od', menjalnik (minuteAngle));
roke[1].setAttribute('do', menjalnik (minuteAngle + 360));
roke[2].setAttribute('od', menjalnik (hoursAngle));
roke[2].setAttribute('do', menjalnik (uriAngle + 360));

Čas ima omejeno uporabo na področju spletnega oblikovanja, vendar je uporaben za odštevalnike časa, ure in shranjevanje časovnih žigov. Ta primer ponuja tudi vpogled v ustvarjanje dinamičnih animacij SVG s spremenljivkami.

Ta animacija SVG, ki jo poganja CSS, zagotavlja čeden način, da vsaka oblika izgleda neverjetno.

Če ni nič izbranega, ima obrazec pod vsakim poljem zasenčene črte. Ko je polje izbrano, se prikaže črta, ki drsi z leve z gladko animacijo. Če uporabnik izbere drugo polje, se vrstica gladko premika na svoj novi položaj.

Končno, ko uporabnik pritisne tipko Vpiši se gumb, se vrstica spremeni v krog, ki utripa, ko se stran nalaga.

Ta primer SVG je še posebej impresiven, ker se za tako zapleten rezultat zanaša samo na CSS. Za shranjevanje podatkov uporablja spremenljivke CSS, kar olajša nadzor nad elementi, kot je glavna aplikacija.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#app {
 širina: $app-width;
 višina: $app-height;
 padding: $app-padding;
 ozadje: belo;
 senca škatle: 002rem rgba(Črna, 0.1);
}

Ta primer lahko uporabite na skoraj katerem koli spletnem obrazcu in pritegnete svoje uporabnike kot še nikoli doslej.

Ustvarjanje lastnih SVG animacij s HTML, JS in CSS

Ustvarjanje SVG animacije iz nič je lahko težaven proces, ko prvič začnete. Ti primeri vam bodo dali prednost pri izdelavi SVG animacij, s katerimi bo vaše spletno mesto zasijalo.

9 naprednih trikov CSS za medijsko poizvedbo, ki jih morate poznati

Preberite Naprej

O avtorju