5 SVG animācijas, lai atdzīvinātu jūsu tīmekļa dizainu

Animācijas var padarīt vietni gludu un gludu, taču kā jūs varat iekļaut šo funkciju savā darbā? Pievienojieties mums un uzziniet, kā atdzīvināt savu tīmekļa dizainu, izmantojot šos radošos SVG animācijas piemērus.

Darbs ar mērogojamu vektorgrafiku

SVG ir faila formāts, kurā attēlu glabāšanai un attēlošanai tiek izmantotas līnijas, nevis pikseļi. Kā norāda to nosaukums, mērogojamo vektorgrafiku var mērogot, nezaudējot kvalitāti.

Varat ne tikai lieliski mainīt izmērus, bet arī izmantot SVG kodu HTML kodā, un tas darbosies tāpat kā jebkurš cits elements. Tas nozīmē, ka varat izmantot CSS noteikumi, JavaScript kods, un, pats galvenais, animācijas ar jūsu vietnes SVG.

Varat izveidot SVG, izmantojot programmatūru, piemēram, Adobe Illustrator, un vietnes, piemēram, SVGator, taču varat tos izveidot arī manuāli. SVG formāts ir vienkārša teksta XML valoda, un tas nedaudz atgādina HTML.

Šajā piemērā ir četras pogas ar savām ikonām un bloka krāsas fonu. Atlasot pogu, tā mainās no apļa uz noapaļotu taisnstūri, vienlaikus mainot arī lapas fona krāsu, lai tā atbilstu pogai.

JS un CSS sajaukums rada šos rezultātus, un viss sākas ar cilpu pievieno notikumu klausītājus uz katru pogu.

priekš (var i = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('klikšķis', pogaNoklikšķiniet);
}

Kad tiek noklikšķināts uz pogas, funkcija buttonClick() veic vairākas darbības. Tas sākas, mainot lapas fona krāsu:

dokumentu.body.style.backgroundColor = `#${šis.getAttribute('data-background')}`;

Pēc tam tas nospiestajai pogai pievieno CSS klasi, aktivizējot animāciju un mainot pogas fona krāsu.

menuItemActive.classList.remove('menu__item — aktīvs');
this.classList.add('menu__item — aktīvs');
menuItemActive.classList.add('menu__item — animēt');
this.classList.add('menu__item — animēt');
menuItemActive = šis;

Lai gan šis SVG animācijas piemērs ir vienkāršs, tas piedāvā unikālu veidu, kā padarīt jūsu vietni saistošāku. Šāda veida dizaina funkcija ir lieliski piemērota mobilajām vietnēm un HTML lietotnēm.

SVG ceļam varat pievienot tik daudz mezglu, cik vēlaties, padarot tos ideāli piemērotus teksta izveidei. Šī vienkāršā triepiena animācija lieliski demonstrē paņēmienu, teksts tiek rādīts no kreisās puses uz labo tā, it kā tas tiktu rakstīts.

Animācijai nav atslēgkadru, tā vienkārši piemēro jaunu gājiena platumu līdzās CSS pārejas rekvizītam. Tas liek katrai līnijai novilkt sevi pāri ekrānam bez sarežģītas animācijas.

.path-1 {
 insults-dasharray: 1850 2000;
 insults-dashoffset: 1851;
 pāreja: 5s lineāra;
}

JS funkcija katrai teksta sadaļai pievieno unikālu CSS klasi, izmantojot vienu vecāku CSS klasi, lai vēl vairāk samazinātu koda blīvumu.

$(funkcija() {
funkcijaanimācijas sākums() {
 $('#konteiners').addClass('fin');
 }
setTimeout (animationStart, 250);
});

Tikai CSS piemērā šī SVG animācija ir lieliski piemērota ikvienam, kurš nevēlas iegremdēt savus pirkstus JavaScript kodā. Ideja ir vienkārša: poga sākas ar pasvītrojumu, kas pārvēršas par pilnu apmali, kad novietojat kursoru virs tās.

CSS atslēgkadri pogai izveido divus stāvokļus. Pirmajam stāvoklim ir biezāks gājiens, un tas aptver tikai SVG formas pogas apakšējo daļu, sākot ar 0%. Otrs stāvoklis ir pabeigta poga 100% ar plānāku gājienu.

@keyframes izdarīt {
 0% {
 insults-dasharray: 140 540;
 gājiens-dashoffset: -474;
 gājiena platums: 8 pikseļi;
 }
100% {
 insults-dasharray: 760;
 gājiens-dashoffset: 0;
 gājiena platums: 2 pikseļi;
 }
}

Šie atslēgas kadri tiek lietoti tikai SVG formas pogas kontūrai, kad lietotājs pārvieto kursoru virs pogas. Tas izmanto :hover CSS pseidoklase lai to panāktu, aktivizējot kārtulu, kas pogai pievieno animācijas atslēgkadrus.

.svg-wrapper:virziet kursoru.forma {
- Webkit-animācija: 0.5sizdarītlineārsuz priekšu;
animācija: 0.5sizdarītlineārsuz priekšu;
}

Tas parāda, kā jūs varat izveidot skaistas animācijas, neizmantojot sarežģītu kodu. Varat izmantot šos pamatus un savu radošumu, lai savai vietnei izveidotu sarežģītākus interaktīvus elementus.

Tā kā zem pārsega ir tik daudz interesantu paņēmienu, ir grūti izlemt, ko apspriest, aplūkojot šo SVG pulksteņa piemēru.

Lai sāktu, tā izmanto funkciju Date(), lai apkopotu pašreizējo datumu un laiku. Izmantojot šo vērtību, funkcijas getHours(), getMinutes() un getSeconds() sadala datus attiecīgajās daļās. Pēc tam kods aprēķina katras pulksteņa rādītāju pozīciju.

var datums = jaunsDatums();
var stundasLeņķis = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minūtesLeņķis = 360 * date.getMinutes() / 60;
var sekunžu leņķis = 360 * date.getSeconds() / 60;

Saglabājot katru roku masīvā, to pozīcijas var ļoti viegli iestatīt katru reizi, kad tiek palaists kods.

hands[0].setAttribute('no', pārslēdzējs (secAngle));
hands[0].setAttribute('uz', pārslēdzējs (secAngle + 360));
hands[1].setAttribute('no', pārslēdzējs (minuteAngle));
hands[1].setAttribute('uz', pārslēdzējs (minūtesAngle + 360));
hands[2].setAttribute('no', pārslēdzējs (hoursAngle));
hands[2].setAttribute('uz', pārslēgs (stundasAngle + 360));

Laikam ir ierobežotas lietojumprogrammas tīmekļa dizaina jomā, taču tas ir noderīgs atpakaļskaitīšanas taimeriem, pulksteņiem un laikspiedolu glabāšanai. Šis piemērs sniedz arī ieskatu dinamisku SVG animāciju ar mainīgajiem veidošanā.

Šī CSS vadītā SVG animācija nodrošina glītu veidu, kā padarīt jebkuru formu neticamu izskatu.

Ja nekas nav atlasīts, veidlapā zem katra lauka ir pelēkotas līnijas. Kad lauks ir atlasīts, tiek parādīta līnija, kas slīd no kreisās puses ar vienmērīgu animāciju. Ja lietotājs atlasa citu lauku, līnija vienmērīgā kustībā slīd uz savu jauno pozīciju.

Visbeidzot, kad lietotājs nospiež Pieslēgties pogu, līnija pārvēršas aplī, kas pulsē, lapai ielādējot.

Šis SVG piemērs ir īpaši iespaidīgs, jo tas paļaujas tikai uz CSS, lai iegūtu tik sarežģītu rezultātu. Tas izmanto CSS mainīgos, lai saglabātu datus, atvieglojot tādu elementu kā galvenās lietotnes kontroli.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#app {
 platums: $app-width;
 augstums: $app-height;
 polsterējums: $app-padding;
 fons: balts;
 kastes ēna: 002rem rgba(melns, 0.1);
}

Varat izmantot šo piemēru gandrīz jebkurā tīmekļa veidlapā un piesaistīt lietotājus kā vēl nekad.

Izveidojiet savas SVG animācijas, izmantojot HTML, JS un CSS

SVG animācijas izveide no nulles var būt sarežģīts process, kad pirmo reizi sākat darbu. Šie piemēri sniegs jums nepieciešamo priekšrocību, lai izveidotu SVG animācijas, kas padarīs jūsu vietni spīdīgu.

9 uzlaboto multivides vaicājumu CSS triki, kas jums jāzina

Lasiet Tālāk

Par autoru