5 SVG animacijos, kurios pagyvins jūsų interneto dizainą

Animacijos gali padaryti svetainę glotnią ir sklandžią, bet kaip galite įtraukti šią funkciją į savo darbą? Prisijunkite prie mūsų ir sužinokite, kaip pagyvinti savo interneto dizainą šiais kūrybiškais SVG animacijos pavyzdžiais.

Darbas su keičiama vektorine grafika

SVG yra failo formatas, kuriame vaizdams saugoti ir rodyti naudojamos linijos, o ne pikseliai. Kaip rodo jų pavadinimas, keičiamos vektorinės grafikos mastelį galima keisti neprarandant kokybės.

SVG kodą galite naudoti ne tik keičiant dydį, bet ir HTML, ir jis veiks kaip bet kuris kitas elementas. Tai reiškia, kad galite naudoti CSS taisyklės, JavaScript kodas, ir, svarbiausia, animacijos su jūsų svetainės SVG.

Galite kurti SVG naudodami programinę įrangą, pvz., „Adobe Illustrator“, ir svetaines, pvz., „SVGator“, bet galite juos kurti ir rankomis. SVG formatas yra paprasto teksto XML kalba ir atrodo kaip HTML.

Šiame pavyzdyje yra keturi mygtukai su savo piktogramomis ir bloko spalvos fonas. Kai pasirenkate mygtuką, jis pakeičiamas iš apskritimo į suapvalintą stačiakampį, taip pat keičiant puslapio fono spalvą, kad ji atitiktų mygtuką.

JS ir CSS derinys duoda šiuos rezultatus, ir viskas prasideda nuo kilpos prideda renginio klausytojus prie kiekvieno mygtuko.

dėl (var aš = 0; i < meniuItems.length; i++) {
 meniuItems[i].addEventListener('spustelėkite', mygtukasSpustelėkite);
}

Spustelėjus mygtuką, funkcija buttonClick() atlieka kelis veiksmus. Jis pradedamas keičiant puslapio fono spalvą:

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

Po to prie paspausto mygtuko prideda CSS klasę, suaktyvindama animaciją ir pakeisdama mygtuko fono spalvą.

menuItemActive.classList.remove('meniu__elementas – aktyvus');
this.classList.add('meniu__elementas – aktyvus');
menuItemActive.classList.add('meniu__item – animuoti');
this.classList.add('meniu__item – animuoti');
meniuItemActive = tai;

Nors ir paprastas, šis SVG animacijos pavyzdys siūlo unikalų būdą padaryti svetainę patrauklesnę. Šio tipo dizaino funkcija puikiai tinka svetainėms mobiliesiems ir HTML pagrįstoms programoms.

Prie SVG kelio galite pridėti tiek mazgų, kiek norite, todėl jie idealiai tinka teksto kūrimui. Ši paprasta brūkšnio animacija puikiai demonstruoja techniką, o tekstas atrodo iš kairės į dešinę, tarsi jis būtų rašomas.

Animacija neturi pagrindinių kadrų, ji tiesiog pritaiko naują eigos plotį kartu su CSS perėjimo ypatybe. Dėl to kiekviena linija brėžiama per ekraną be sudėtingos animacijos.

.kelias-1 {
 insultas-dasharray: 1850 2000;
 insultas-dashoffset: 1851;
 perėjimas: 5s linijinis;
}

JS funkcija prideda unikalią CSS klasę prie kiekvienos teksto dalies, naudodama vieną pirminę CSS klasę, kad dar labiau sumažintų kodo tankį.

$(funkcija() {
funkcijaanimacijos pradžia() {
 $('#konteineris').addClass('fin');
 }
setTimeout (animationStart, 250);
});

Kaip tik CSS pavyzdys, ši SVG animacija puikiai tinka tiems, kurie nenori panirti į „JavaScript“ kodą. Idėja paprasta: mygtukas prasideda pabraukimu, kuris virsta visa kraštine, kai užvedate pelės žymeklį virš jo.

CSS pagrindiniai kadrai sukuria dvi mygtuko būsenas. Pirmoji būsena yra storesnė ir apima tik SVG formos mygtuko apačią, pradedant nuo 0%. Kita būsena yra 100 % pilnas mygtukas su plonesniu judesiu.

@keyframes piešti {
 0% {
 insultas-dasharray: 140 540;
 smūgis-punkto nuokrypis: -474;
 brūkšnio plotis: 8 pikseliai;
 }
100% {
 insultas-dasharray: 760;
 brūkšnio-punkto poslinkis: 0;
 brūkšnio plotis: 2 pikseliai;
 }
}

Šie pagrindiniai kadrai taikomi tik SVG formos mygtuko kontūrui, kai vartotojas perkelia žymeklį ant mygtuko. Jis naudoja :hover CSS pseudoklasė Norėdami tai pasiekti, suaktyvinkite taisyklę, kuri prie mygtuko prideda animacijos pagrindinius kadrus.

.svg-wrapper:užveskite pelės žymeklį.figūra {
-Webkit-animacija: 0.5spieštilinijinisį priekį;
animacija: 0.5spieštilinijinisį priekį;
}

Tai parodo, kaip galite sukurti gražias animacijas nenaudodami sudėtingo kodo. Galite pasinaudoti šiais pagrindais ir savo kūrybiškumu, kad sukurtumėte sudėtingesnius interaktyvius savo svetainės elementus.

Kadangi po gaubtu yra tiek daug įdomių metodų, sunku nuspręsti, ką aptarti žiūrint į šį SVG laikrodžio pavyzdį.

Norėdami pradėti, ji naudoja funkciją Date (), kad surinktų dabartinę datą ir laiką. Naudodamos šią reikšmę, funkcijos getHours(), getMinutes() ir getSeconds() padalija duomenis į atitinkamas dalis. Tada kodas apskaičiuoja kiekvienos rodyklės padėtį laikrodyje.

var data = naujasData();
var valandosKampas = 360 * data.getHours() / 12 + data.getMinutes() / 2;
var minutės kampas = 360 * data.getMinutes() / 60;
var sekkampis = 360 * data.getSeconds() / 60;

Saugant kiekvieną ranką masyve, jų padėtis gali būti labai lengvai nustatoma kiekvieną kartą paleidžiant kodą.

hands[0].setAttribute('iš', perjungiklis (secAngle));
hands[0].setAttribute('į', perjungiklis (secAngle + 360));
hands[1].setAttribute('iš', perjungiklis (minuteAngle));
hands[1].setAttribute('į', perjungiklis (minuteAngle + 360));
hands[2].setAttribute('iš', perjungiklis (hoursAngle));
hands[2].setAttribute('į', perjungiklis (valandosAngle + 360));

Laikas turi ribotas programas interneto dizaino srityje, tačiau jis naudingas atgalinės atskaitos laikmačiams, laikrodžiams ir laiko žymų saugojimui. Šiame pavyzdyje taip pat pateikiama įžvalga, kaip kurti dinamines SVG animacijas su kintamaisiais.

Ši CSS pagrįsta SVG animacija yra puikus būdas bet kokiai formai atrodyti neįtikėtinai.

Nieko nepasirinkus, formoje po kiekvienu lauku yra pilkos linijos. Pasirinkus lauką atsiranda linija, slenkanti iš kairės su sklandžia animacija. Jei vartotojas pasirenka kitą lauką, linija sklandžiai slenka į naują vietą.

Galiausiai, kai vartotojas paspaudžia Prisijungti mygtuką, linija virsta apskritimu, kuris pulsuoja įkeliant puslapį.

Šis SVG pavyzdys yra ypač įspūdingas, nes jis remiasi tik CSS, kad gautų tokį sudėtingą rezultatą. Duomenims saugoti naudojami CSS kintamieji, todėl lengviau valdyti tokius elementus kaip pagrindinė programa.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#app {
 plotis: $app-width;
 aukštis: $app-height;
 padding: $app-padding;
 fonas: baltas;
 langelio šešėlis: 002rem rgba(juoda, 0.1);
}

Galite naudoti šį pavyzdį beveik bet kurioje žiniatinklio formoje ir įtraukti savo vartotojus kaip niekada anksčiau.

Savo SVG animacijų kūrimas naudojant HTML, JS ir CSS

SVG animacijos kūrimas nuo nulio gali būti sudėtingas procesas, kai pirmą kartą pradedate. Šie pavyzdžiai suteiks jums pagrindą, reikalingą kuriant SVG animacijas, kurios pavers jūsų svetainę spindinčia.

9 išplėstinės medijos užklausos CSS gudrybės, kurias turėtumėte žinoti

Skaitykite toliau

Apie autorių