5 SVG-animationer for at sætte liv i dit webdesign

Animationer kan få et websted til at føles glat og glat, men hvordan kan du inkorporere denne funktion i dit eget arbejde? Slut dig til os og lær, hvordan du liver dit webdesign op med disse kreative SVG-animationseksempler.

Arbejde med skalerbar vektorgrafik

SVG er et filformat, der bruger linjer i stedet for pixels til at gemme og vise billeder. Som deres navn antyder, kan skalerbar vektorgrafik skaleres uden at miste kvalitet.

Ud over at være fantastisk til at ændre størrelse, kan du også bruge SVG-kode i HTML, og den vil fungere som ethvert andet element. Det betyder, at du kan bruge CSS regler, JavaScript-kode, og vigtigst af alt, animationer med dit websteds SVG'er.

Du kan oprette SVG'er ved hjælp af software som Adobe Illustrator og websteder som SVGator, men du kan også oprette dem i hånden. SVG-formatet er et almindeligt tekst-XML-sprog og ligner lidt HTML.

Dette eksempel har fire knapper med deres egne ikoner og en blokfarvet baggrund. Når du vælger en knap, ændres den fra en cirkel til et afrundet rektangel, mens den også skifter sidens baggrundsfarve, så den matcher knappen.

En blanding af JS og CSS producerer disse resultater, og det hele starter med en loop, der tilføjer begivenhedslyttere til hver knap.

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

Når der er klikket på en knap, udfører en funktion kaldet buttonClick() flere handlinger. Det starter med at ændre sidens baggrundsfarve:

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

Herefter tilføjer den en CSS-klasse til den knap, der blev trykket på, udløser en animation og ændrer knappens baggrundsfarve.

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

Selvom det er enkelt, tilbyder dette SVG-animationseksempel en unik måde at gøre dit websted mere engagerende på. Denne type designfunktion er perfekt til mobilwebsteder og HTML-baserede apps.

Du kan tilføje så mange noder, som du vil, til en SVG-sti, hvilket gør dem ideelle til at skabe tekst. Denne enkle streganimation demonstrerer teknikken perfekt, hvor teksten vises fra venstre mod højre, som om den bliver skrevet.

Animationen har ikke keyframes, den anvender blot en ny stregbredde ved siden af ​​CSS-overgangsegenskaben. Dette får hver linje til at tegne sig selv hen over skærmen uden kompliceret animation.

.sti-1 {
 slag-dasharray: 1850 2000;
 slag-stregforskydning: 1851;
 overgang: 5s lineær;
}

En JS-funktion tilføjer en unik CSS-klasse til hver sektion af teksten ved hjælp af en enkelt overordnet CSS-klasse for yderligere at sænke tætheden af ​​koden.

$(fungere() {
fungereanimationStart() {
 $('#beholder').addClass('fin');
 }
setTimeout (animationStart, 250);
});

Som et eksempel, der kun er CSS, er denne SVG-animation fantastisk til alle, der ikke ønsker at dyppe tæerne i JavaScript-kode. Ideen er enkel: En knap starter med en understregning, der omdannes til en fuld ramme, når du holder markøren over den.

CSS keyframes opretter to tilstande for knappen. Den første tilstand har en tykkere streg og dækker kun bunden af ​​SVG-formknappen, startende ved 0 %. Den anden tilstand er den komplette knap på 100 % med et tyndere slag.

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

Disse keyframes anvendes kun på SVG-formens knapkontur, når brugeren flytter markøren over knappen. Den bruger :hoveren CSS pseudo-klasse for at opnå dette ved at udløse en regel, der føjer animationsnøgleframes til knappen.

.svg-indpakning:hover.form {
-webkit-animation: 0.5stegnelineærfremad;
animation: 0.5stegnelineærfremad;
}

Dette viser, hvordan du kan skabe smukke animationer uden at bruge kompleks kode. Du kan bruge disse grundlæggende elementer og din kreativitet til at lave mere omfattende interaktive elementer til din egen hjemmeside.

Med så mange interessante teknikker under motorhjelmen er det svært at beslutte, hvad man skal diskutere, når man ser på dette SVG-ureksempel.

Til at starte bruger den funktionen Date() til at indsamle den aktuelle dato og klokkeslæt. Ved at bruge denne værdi opdeler funktionerne getHours(), getMinutes() og getSeconds() dataene i dets relevante dele. Koden beregner derefter hver visers position på uret.

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

Ved at gemme hver af hænderne i et array, kan deres positioner indstilles meget nemt, hver gang koden kører.

hænder[0].setAttribute('fra', skifter (secAngle));
hænder[0].setAttribute('til', skifter (secAngle + 360));
hænder[1].setAttribute('fra', skifter (minutvinkel));
hænder[1].setAttribute('til', skifter (minuteAngle + 360));
hænder[2].setAttribute('fra', shifter (hoursAngle));
hænder[2].setAttribute('til', skifter (hoursAngle + 360));

Tid har begrænsede applikationer inden for webdesign, men det er nyttigt til nedtællingstimere, ure og lagring af tidsstempler. Dette eksempel giver også et indblik i at skabe dynamiske SVG-animationer med variabler.

Denne CSS-drevne SVG-animation giver en pæn måde at få enhver form til at se utrolig ud.

Med intet valgt, har formularen nedtonede linjer under hvert felt. En linje vises, når et felt bliver valgt, glidende ind fra venstre med en jævn animation. Hvis brugeren vælger et andet felt, glider linjen til sin nye position i en jævn bevægelse.

Til sidst, når brugeren trykker på Log på knappen, bliver linjen til en cirkel, der pulserer, mens siden indlæses.

Dette SVG-eksempel er særligt imponerende, fordi det kun er afhængigt af CSS for at producere et så komplekst resultat. Den bruger CSS-variabler til at gemme data, hvilket gør det nemmere at kontrollere elementer som hovedappen.

$app-polstring: 6vh;
$app-bredde: 50vh;
$app-højde: 90vh;
#app {
 width: $app-width;
 højde: $app-højde;
 polstring: $app-polstring;
 baggrund: hvid;
 box-shadow: 002rem rgba(sort, 0.1);
}

Du kan bruge dette eksempel på næsten enhver webformular og engagere dine brugere som aldrig før.

Opret dine egne SVG-animationer med HTML, JS og CSS

At lave en SVG-animation fra bunden kan være en vanskelig proces, når du først kommer i gang. Disse eksempler vil give dig det forspring, du har brug for til at bygge SVG-animationer, der får dit websted til at skinne.

9 avancerede CSS-tricks til medieforespørgsler, du bør kende

Læs Næste

Om forfatteren