5 SVG-animationer för att liva upp din webbdesign

Animationer kan få en webbplats att kännas smidig och smidig, men hur kan du infoga den här funktionen i ditt eget arbete? Följ med oss ​​och lär dig hur du livar upp din webbdesign med dessa kreativa SVG-animationsexempel.

Arbeta med skalbar vektorgrafik

SVG är ett filformat som använder linjer, snarare än pixlar, för att lagra och visa bilder. Som namnet antyder kan skalbar vektorgrafik skalas utan att förlora kvalitet.

Förutom att vara bra för att ändra storlek, kan du också använda SVG-kod i HTML, och den kommer att fungera som alla andra element. Det betyder att du kan använda CSS regler, JavaScript-kod, och viktigast av allt, animationer med din webbplats SVG.

Du kan skapa SVG med hjälp av programvara som Adobe Illustrator och webbplatser som SVGator, men du kan också skapa dem för hand. SVG-formatet är ett XML-språk i vanlig text och ser lite ut som HTML.

Det här exemplet har fyra knappar med sina egna ikoner och en blockfärgad bakgrund. När du väljer en knapp ändras den från en cirkel till en rundad rektangel, samtidigt som bakgrundsfärgen på sidan ändras för att matcha knappen.

En blandning av JS och CSS ger dessa resultat, och allt börjar med en loop som lägger till evenemangslyssnare till varje knapp.

för (var jag = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('klick', knappKlicka);
}

När en knapp har klickats utför en funktion som heter buttonClick() flera åtgärder. Det börjar med att ändra sidans bakgrundsfärg:

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

Efter detta lägger den till en CSS-klass till knappen som trycktes, utlöser en animering och ändrar knappens bakgrundsfärg.

menuItemActive.classList.remove('meny__objekt--aktiv');
this.classList.add('meny__objekt--aktiv');
menuItemActive.classList.add('menu__item--animera');
this.classList.add('menu__item--animera');
menuItemActive = detta;

Även om det är enkelt, erbjuder detta SVG-animationsexempel ett unikt sätt att göra din webbplats mer engagerande. Denna typ av designfunktion är perfekt för mobilwebbplatser och HTML-baserade appar.

Du kan lägga till så många noder som du vill till en SVG-sökväg, vilket gör dem idealiska för att skapa text. Denna enkla streckanimering demonstrerar tekniken perfekt, där texten visas från vänster till höger som om den skrivs.

Animationen har inga nyckelbildrutor, den tillämpar helt enkelt en ny streckbredd vid sidan av CSS-övergångsegenskapen. Detta gör att varje linje ritar sig själv över skärmen utan komplicerad animering.

.väg-1 {
 stroke-dasharray: 1850 2000;
 slag-streckförskjutning: 1851;
 övergång: 5s linjär;
}

En JS-funktion lägger till en unik CSS-klass till varje avsnitt av texten genom att använda en ensamstående CSS-klass för att ytterligare sänka kodens densitet.

$(fungera() {
fungeraanimationStarta() {
 $('#behållare').addClass('fena');
 }
setTimeout (animationStart, 250);
});

Som ett CSS-exempel är den här SVG-animationen bra för alla som inte vill doppa tårna i JavaScript-kod. Tanken är enkel: en knapp börjar med en understrykning som förvandlas till en hel ram när du håller muspekaren över den.

CSS-nyckelrutor skapar två tillstånd för knappen. Det första tillståndet har ett tjockare slag och täcker bara botten av SVG-formknappen, med början på 0 %. Det andra tillståndet är den kompletta knappen på 100 % med ett tunnare slag.

@nyckelrutor rita {
 0% {
 stroke-dasharray: 140 540;
 slag-streckförskjutning: -474;
 slagbredd: 8px;
 }
100% {
 stroke-dasharray: 760;
 slag-streckförskjutning: 0;
 slagbredd: 2px;
 }
}

Dessa nyckelrutor tillämpas endast på SVG-formens knappkontur när användaren flyttar markören över knappen. Den använder :hover CSS pseudoklass för att uppnå detta, utlöser en regel som lägger till animeringsnyckelbildrutor till knappen.

.svg-wrapper:sväva.form {
-webkit-animation: 0.5sdralinjärframåt;
animering: 0.5sdralinjärframåt;
}

Det här visar hur du kan skapa vackra animationer utan att använda komplex kod. Du kan använda dessa grunder och din kreativitet för att skapa mer utarbetade interaktiva element för din egen webbplats.

Med så många intressanta tekniker under huven är det svårt att bestämma vad man ska diskutera när man tittar på detta SVG-klockexempel.

Till att börja med använder den funktionen Date() för att samla in aktuellt datum och tid. Med det här värdet delar funktionerna getHours(), getMinutes() och getSeconds() upp data i dess relevanta delar. Koden beräknar sedan positionen för varje visare på klockan.

var datum = nyDatum();
var timmarAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minutAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

Genom att lagra var och en av händerna i en array kan deras positioner ställas in mycket enkelt varje gång koden körs.

händer[0].setAttribute('från', växel (secAngle));
händer[0].setAttribute('till', växel (secAngle + 360));
händer[1].setAttribute('från', shifter (minuteAngle));
händer[1].setAttribute('till', shifter (minuteAngle + 360));
händer[2].setAttribute('från', shifter (hoursAngle));
händer[2].setAttribute('till', shifter (hoursAngle + 360));

Tid har begränsade tillämpningar inom webbdesign, men det är användbart för nedräkningstimer, klockor och lagring av tidsstämplar. Det här exemplet ger också en inblick i att skapa dynamiska SVG-animationer med variabler.

Denna CSS-drivna SVG-animation ger ett snyggt sätt att få alla former att se otroliga ut.

Med inget markerat har formuläret nedtonade linjer under varje fält. En linje visas när ett fält väljs och glider in från vänster med en jämn animering. Om användaren väljer ett annat fält, glider linjen till sin nya position i en jämn rörelse.

Slutligen, när användaren trycker på Logga in knappen förvandlas linjen till en cirkel som pulserar när sidan laddas.

Detta SVG-exempel är särskilt imponerande eftersom det bara förlitar sig på CSS för att producera ett så komplext resultat. Den använder CSS-variabler för att lagra data, vilket gör det lättare att kontrollera element som huvudappen.

$app-utfyllnad: 6vh;
$app-bredd: 50vh;
$app-höjd: 90vh;
#app {
 width: $app-width;
 höjd: $app-höjd;
 padding: $app-padding;
 bakgrund: vit;
 box-shadow: 002rem rgba(svart, 0.1);
}

Du kan använda det här exemplet på nästan alla webbformulär och engagera dina användare som aldrig förr.

Skapa dina egna SVG-animationer med HTML, JS och CSS

Att skapa en SVG-animation från grunden kan vara en svår process när du först kommer igång. Dessa exempel ger dig det försprång du behöver för att bygga SVG-animationer som får din webbplats att glänsa.

9 avancerade mediefrågor CSS-tricks du bör känna till

Läs Nästa

Om författaren