5 animații SVG pentru a vă anima designul web

Animațiile pot face un site web să se simtă elegant și neted, dar cum puteți încorpora această caracteristică în propria muncă? Alăturați-vă nouă și aflați cum să vă animați designul web cu aceste exemple creative de animație SVG.

Lucrul cu grafică vectorială scalabilă

SVG este un format de fișier care utilizează linii, mai degrabă decât pixeli, pentru a stoca și afișa imagini. După cum sugerează și numele, grafica vectorială scalabilă se poate scala fără a pierde calitatea.

Pe lângă faptul că este excelent pentru redimensionare, puteți folosi și cod SVG în HTML și va acționa ca orice alt element. Asta înseamnă că poți folosi reguli CSS, Cod JavaScriptși, cel mai important, animații cu SVG-urile site-ului dvs. web.

Puteți crea SVG-uri folosind software precum Adobe Illustrator și site-uri web precum SVGator, dar le puteți crea și manual. Formatul SVG este un limbaj XML cu text simplu și seamănă puțin cu HTML.

Acest exemplu prezintă patru butoane cu propriile pictograme și un fundal colorat în bloc. Când selectați un buton, acesta se schimbă dintr-un cerc într-un dreptunghi rotunjit, schimbând, de asemenea, culoarea de fundal a paginii pentru a se potrivi cu butonul.

O combinație de JS și CSS produce aceste rezultate și totul începe cu o buclă care adaugă ascultători de evenimente la fiecare buton.

pentru (var i = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('clic', butonClick);
}

Odată ce se face clic pe un buton, o funcție numită buttonClick() efectuează mai multe acțiuni. Începe prin a schimba culoarea de fundal a paginii:

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

După aceasta, adaugă o clasă CSS la butonul care a fost apăsat, declanșând o animație și schimbând culoarea de fundal a butonului.

menuItemActive.classList.remove('meniu__item--activ');
this.classList.add('meniu__item--activ');
menuItemActive.classList.add('meniu__articol--animare');
this.classList.add('meniu__articol--animare');
menuItemActive = acest;

Deși simplu, acest exemplu de animație SVG oferă o modalitate unică de a vă face site-ul mai captivant. Acest tip de caracteristică de design este perfect pentru site-urile web mobile și aplicațiile bazate pe HTML.

Puteți adăuga câte noduri doriți la o cale SVG, făcându-le ideale pentru crearea de text. Această animație simplă demonstrează tehnica perfect, textul apărând de la stânga la dreapta ca și cum ar fi scris.

Animația nu are cadre cheie, pur și simplu aplică o nouă lățime a cursei alături de proprietatea de tranziție CSS. Acest lucru face ca fiecare linie să se deseneze pe ecran fără animație complicată.

.calea-1 {
 stroke-dasharray: 1850 2000;
 stroke-dashoffset: 1851;
 tranziție: 5s liniară;
}

O funcție JS adaugă o clasă CSS unică la fiecare secțiune a textului folosind o singură clasă CSS părinte pentru a reduce și mai mult densitatea codului.

$(funcţie() {
funcţieanimationStart() {
 $('#container').addClass('fin');
 }
setTimeout (animationStart, 250);
});

Ca exemplu numai CSS, această animație SVG este grozavă pentru oricine nu vrea să-și bage degetele de la picioare în codul JavaScript. Ideea este simplă: un buton începe cu o subliniere care se transformă într-un chenar complet atunci când treci cu mouse-ul peste el.

Cadrele cheie CSS creează două stări pentru buton. Prima stare are o contur mai groasă și acoperă doar partea de jos a butonului de formă SVG, începând de la 0%. Cealaltă stare este butonul complet la 100% cu o cursă mai subțire.

@keyframes a desena {
 0% {
 stroke-dasharray: 140 540;
 stroke-dashoffset: -474;
 lățimea cursei: 8px;
 }
100% {
 stroke-dasharray: 760;
 stroke-dashoffset: 0;
 lățimea cursei: 2px;
 }
}

Aceste cadre cheie sunt aplicate doar conturul butonului de formă SVG atunci când utilizatorul mută cursorul peste buton. Utilizează :hover pseudo-clasă CSS pentru a realiza acest lucru, declanșând o regulă care adaugă cadrele cheie de animație la buton.

.svg-wrapper:planare.formă {
-webkit-animatie: 0.5sa desenaliniarînainte;
animaţie: 0.5sa desenaliniarînainte;
}

Aceasta arată cum puteți crea animații frumoase fără a utiliza cod complex. Puteți folosi aceste elemente fundamentale și creativitatea dvs. pentru a crea elemente interactive mai elaborate pentru propriul site web.

Cu atât de multe tehnici interesante sub capotă, este greu să decideți despre ce să discutați când priviți acest exemplu de ceas SVG.

Pentru a începe, folosește funcția Date() pentru a colecta data și ora curente. Folosind această valoare, funcțiile getHours(), getMinutes() și getSeconds() împart datele în părțile lor relevante. Codul calculează apoi poziția fiecărei mâini pe ceas.

var data = nouData();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

Prin stocarea fiecărei mâini într-o matrice, pozițiile acestora pot fi setate foarte ușor de fiecare dată când se rulează codul.

mâini[0].setAttribute('din', shifter (secAngle));
mâini[0].setAttribute('la', schimbător (secAngle + 360));
mâini[1].setAttribute('din', shifter (minuteAngle));
mâini[1].setAttribute('la', shifter (minuteAngle + 360));
mâini[2].setAttribute('din', schimbător (oreUnghi));
mâini[2].setAttribute('la', schimbător (oreUnghi + 360));

Timpul are aplicații limitate în domeniul designului web, dar este util pentru cronometre, ceasuri și stocarea marcajelor de timp. Acest exemplu oferă, de asemenea, o perspectivă asupra creării de animații SVG dinamice cu variabile.

Această animație SVG bazată pe CSS oferă o modalitate ordonată de a face orice formă să arate incredibil.

Fără nimic selectat, formularul are linii gri sub fiecare câmp. O linie apare atunci când un câmp este selectat, alunecând din stânga cu o animație lină. Dacă utilizatorul selectează un câmp diferit, linia alunecă în noua sa poziție într-o mișcare lină.

În cele din urmă, odată ce utilizatorul apasă butonul Autentificare butonul, linia se transformă într-un cerc care pulsează pe măsură ce pagina se încarcă.

Acest exemplu SVG este deosebit de impresionant, deoarece se bazează numai pe CSS pentru a produce un rezultat atât de complex. Utilizează variabile CSS pentru a stoca date, facilitând controlul elementelor precum aplicația principală.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#aplicație {
 lățime: $app-width;
 înălțime: $app-height;
 umplutură: $app-padding;
 fundal: alb;
 cutie-umbra: 002rem rgba(negru, 0.1);
}

Puteți folosi acest exemplu pe aproape orice formular web și puteți implica utilizatorii dvs. ca niciodată.

Creați-vă propriile animații SVG cu HTML, JS și CSS

Crearea unei animații SVG de la zero poate fi un proces dificil atunci când începeți. Aceste exemple vă vor oferi avantajul de care aveți nevoie pentru a crea animații SVG care vă vor face site-ul web să strălucească.

9 trucuri CSS avansate de interogare media pe care ar trebui să le cunoașteți

Citiți în continuare

Despre autor