5 SVG-animasjoner for å livne opp webdesignet ditt

Animasjoner kan få et nettsted til å føles glatt og glatt, men hvordan kan du inkludere denne funksjonen i ditt eget arbeid? Bli med oss ​​og lær hvordan du liver opp webdesignet ditt med disse kreative SVG-animasjonseksemplene.

Arbeide med skalerbar vektorgrafikk

SVG er et filformat som bruker linjer, i stedet for piksler, for å lagre og vise bilder. Som navnet antyder, kan skalerbar vektorgrafikk skaleres uten å miste kvalitet.

I tillegg til å være flott for å endre størrelse, kan du også bruke SVG-kode i HTML, og den vil fungere som alle andre elementer. Dette betyr at du kan bruke CSS-regler, JavaScript-kode, og viktigst av alt, animasjoner med nettstedets SVG-er.

Du kan lage SVG-er ved å bruke programvare som Adobe Illustrator og nettsteder som SVGator, men du kan også lage dem for hånd. SVG-formatet er et XML-språk i ren tekst og ser litt ut som HTML.

Dette eksemplet har fire knapper med sine egne ikoner og en blokkfarget bakgrunn. Når du velger en knapp, endres den fra en sirkel til et avrundet rektangel, samtidig som den endrer bakgrunnsfargen på siden for å matche knappen.

En blanding av JS og CSS gir disse resultatene, og det hele starter med en loop som legger til hendelseslyttere til hver knapp.

til (var jeg = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('klikk', knappKlikk);
}

Når en knapp er klikket, utfører en funksjon kalt buttonClick() flere handlinger. Det starter med å endre sidens bakgrunnsfarge:

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

Etter dette legger den til en CSS-klasse til knappen som ble trykket, utløser en animasjon og endrer knappens bakgrunnsfarge.

menuItemActive.classList.remove('menu__element--aktiv');
this.classList.add('menu__element--aktiv');
menuItemActive.classList.add('menu__element--animer');
this.classList.add('menu__element--animer');
menuItemActive = dette;

Selv om det er enkelt, tilbyr dette SVG-animasjonseksemplet en unik måte å gjøre nettstedet ditt mer engasjerende på. Denne typen designfunksjon er perfekt for mobilnettsteder og HTML-baserte apper.

Du kan legge til så mange noder du vil i en SVG-bane, noe som gjør dem ideelle for å lage tekst. Denne enkle strekanimasjonen demonstrerer teknikken perfekt, med teksten som vises fra venstre mot høyre som om den blir skrevet.

Animasjonen har ikke nøkkelbilder, den bruker ganske enkelt en ny strekbredde ved siden av CSS-overgangsegenskapen. Dette gjør at hver linje trekker seg selv over skjermen uten komplisert animasjon.

.bane-1 {
 stroke-dasharray: 1850 2000;
 slag-dashoffset: 1851;
 overgang: 5s lineær;
}

En JS-funksjon legger til en unik CSS-klasse til hver del av teksten ved å bruke en enkelt overordnet CSS-klasse for å redusere tettheten til koden ytterligere.

$(funksjon() {
funksjonanimasjonStart() {
 $('#container').addClass('finne');
 }
setTimeout (animationStart, 250);
});

Som et eksempel på bare CSS er denne SVG-animasjonen flott for alle som ikke vil dyppe tærne i JavaScript-kode. Ideen er enkel: en knapp starter med en understreking som forvandles til en hel kant når du holder musepekeren over den.

CSS keyframes oppretter to tilstander for knappen. Den første tilstanden har et tykkere slag og dekker bare bunnen av SVG-formknappen, med start på 0 %. Den andre tilstanden er den komplette knappen på 100 % med et tynnere slag.

@keyframes tegne {
 0% {
 slag-dasharray: 140 540;
 slag-dashoffset: -474;
 slagbredde: 8px;
 }
100% {
 slag-dasharray: 760;
 slag-dashoffset: 0;
 slagbredde: 2px;
 }
}

Disse nøkkelbildene brukes bare på SVG-formknappomrisset når brukeren flytter markøren over knappen. Den bruker :hoveren CSS pseudo-klasse for å oppnå dette, utløser en regel som legger til animasjonens nøkkelbilder til knappen.

.svg-wrapper:sveve.form {
-webkit-animasjon: 0.5stegnelineærfremover;
animasjon: 0.5stegnelineærfremover;
}

Dette viser hvordan du kan lage vakre animasjoner uten å bruke kompleks kode. Du kan bruke disse grunnleggende og kreativiteten din til å lage mer forseggjorte interaktive elementer for ditt eget nettsted.

Med så mange interessante teknikker under panseret er det vanskelig å bestemme seg for hva man skal diskutere når man ser på dette SVG-klokkeeksemplet.

For å starte bruker den Date()-funksjonen for å samle inn gjeldende dato og klokkeslett. Ved å bruke denne verdien deler funksjonene getHours(), getMinutes() og getSeconds() dataene i de relevante delene. Koden beregner deretter posisjonen til hver viser på klokken.

var dato = nyDato();
var timerAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuttAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

Ved å lagre hver av hendene i en matrise, kan deres posisjoner angis veldig enkelt hver gang koden kjøres.

hands[0].setAttribute('fra', shifter (secAngle));
hands[0].setAttribute('til', shifter (secAngle + 360));
hands[1].setAttribute('fra', shifter (minuttvinkel));
hands[1].setAttribute('til', shifter (minuteAngle + 360));
hands[2].setAttribute('fra', shifter (hoursAngle));
hands[2].setAttribute('til', shifter (hoursAngle + 360));

Tid har begrensede applikasjoner innen webdesign, men det er nyttig for nedtellingstidtakere, klokker og lagring av tidsstempler. Dette eksemplet gir også et innblikk i å lage dynamiske SVG-animasjoner med variabler.

Denne CSS-drevne SVG-animasjonen gir en fin måte å få enhver form til å se utrolig ut.

Med ingenting valgt, har skjemaet nedtonede linjer under hvert felt. En linje vises når et felt blir valgt, og glir inn fra venstre med en jevn animasjon. Hvis brukeren velger et annet felt, glir linjen til sin nye posisjon i en jevn bevegelse.

Til slutt, når brukeren trykker på Logg Inn knappen, blir linjen til en sirkel som pulserer mens siden lastes inn.

Dette SVG-eksemplet er spesielt imponerende fordi det kun er avhengig av CSS for å produsere et så komplekst resultat. Den bruker CSS-variabler for å lagre data, noe som gjør det enklere å kontrollere elementer som hovedappen.

$app-padding: 6vh;
$app-bredde: 50vh;
$app-høyde: 90vh;
#app {
 width: $app-width;
 høyde: $app-høyde;
 padding: $app-padding;
 bakgrunn: hvit;
 boks-skygge: 002rem rgba(svart, 0.1);
}

Du kan bruke dette eksemplet på omtrent alle nettskjemaer, og engasjere brukerne dine som aldri før.

Lag dine egne SVG-animasjoner med HTML, JS og CSS

Å lage en SVG-animasjon fra bunnen av kan være en vanskelig prosess når du først kommer i gang. Disse eksemplene vil gi deg forspranget du trenger for å bygge SVG-animasjoner som får nettstedet ditt til å skinne.

9 avanserte CSS-triks for mediesøk du bør vite

Les Neste

Om forfatteren