5 СВГ анимација за оживљавање вашег веб дизајна

Анимације могу учинити да веб локација изгледа глатко и глатко, али како можете да уградите ову функцију у свој рад? Придружите нам се и научите како да оживите свој веб дизајн помоћу ових креативних примера СВГ анимација.

Рад са скалабилном векторском графиком

СВГ је формат датотеке који користи линије, а не пикселе, за чување и приказивање слика. Као што им име говори, скалабилна векторска графика може да се скалира без губитка квалитета.

Поред тога што је одличан за промену величине, можете користити и СВГ код унутар ХТМЛ-а и понашаће се као сваки други елемент. То значи да можете користити ЦСС правила, ЈаваСцрипт код, и, што је најважније, анимације са СВГ-овима ваше веб странице.

Можете да креирате СВГ помоћу софтвера као што је Адобе Иллустратор и веб локација као што је СВГатор, али можете их креирати и ручно. СВГ формат је КСМЛ језик за обичан текст и помало личи на ХТМЛ.

Овај пример садржи четири дугмета са сопственим иконама и позадином у боји блока. Када изаберете дугме, оно се мења из круга у заобљени правоугаоник, а такође мења боју позадине странице тако да одговара дугмету.

Комбинација ЈС и ЦСС-а даје ове резултате, а све почиње петљом која додаје слушаоце догађаја на свако дугме.

за (вар и = 0; и < менуИтемс.ленгтх; и++) {
 менуИтемс[и].аддЕвентЛистенер('клик', буттонЦлицк);
}

Када се кликне на дугме, функција под називом буттонЦлицк() обавља неколико радњи. Почиње променом боје позадине странице:

документ.боди.стиле.бацкгроундЦолор = `#${ово.гетАттрибуте('дата-бацкгроунд')}`;

Након тога, додаје ЦСС класу дугмету које је притиснуто, покреће анимацију и мења боју позадине дугмета.

менуИтемАцтиве.цлассЛист.ремове('мену__итем--активан');
тхис.цлассЛист.адд('мену__итем--активан');
менуИтемАцтиве.цлассЛист.адд('мену__итем--анимирати');
тхис.цлассЛист.адд('мену__итем--анимирати');
менуИтемАцтиве = ово;

Иако једноставан, овај пример СВГ анимације нуди јединствен начин да своју веб локацију учините привлачнијом. Ова врста дизајнерске функције је савршена за мобилне веб странице и апликације засноване на ХТМЛ-у.

Можете додати онолико чворова колико желите у СВГ путању, што их чини идеалним за креирање текста. Ова једноставна анимација потеза савршено демонстрира технику, при чему се текст појављује с лева на десно као да је написан.

Анимација нема кључне кадрове, она једноставно примењује нову ширину потеза поред својства ЦСС прелаза. Ово чини да се свака линија црта по екрану без компликоване анимације.

.патх-1 {
 строке-дасхарраи: 1850 2000;
 строке-дасхоффсет: 1851;
 прелаз: 5с линеарни;
}

ЈС функција додаје јединствену ЦСС класу сваком одељку текста користећи једну надређену ЦСС класу да додатно смањи густину кода.

$(функција() {
функцијааниматионСтарт() {
 $('#контејнер').аддЦласс('фин');
 }
сетТимеоут (аниматионСтарт, 250);
});

Као пример само за ЦСС, ова СВГ анимација је одлична за свакога ко не жели да урони прсте у ЈаваСцрипт код. Идеја је једноставна: дугме почиње подвученом линијом која се претвара у пуну ивицу када пређете мишем преко њега.

ЦСС кључни кадрови креирају два стања за дугме. Прво стање има дебљи потез и покрива само дно дугмета СВГ облика, почевши од 0%. Друго стање је дугме комплетно на 100% са тањим потезом.

@кеифрамес нацртај {
 0% {
 строке-дасхарраи: 140 540;
 строке-дасхоффсет: -474;
 строке-видтх: 8пк;
 }
100% {
 строке-дасхарраи: 760;
 строке-дасхоффсет: 0;
 строке-видтх: 2пк;
 }
}

Ови кључни кадрови се примењују само на обрис дугмета СВГ облика када корисник помери курсор преко дугмета. Користи :ховер ЦСС псеудо-класа да би се ово постигло, покретање правила које додаје кључне кадрове анимације дугмету.

.свг-враппер:лебдети.облик {
-вебкит-аниматион: 0.5сцртатилинеарненапред;
анимација: 0.5сцртатилинеарненапред;
}

Ово показује како можете да креирате прелепе анимације без употребе сложеног кода. Можете користити ове основе и своју креативност да направите сложеније интерактивне елементе за своју веб локацију.

Са толико занимљивих техника испод хаубе, тешко је одлучити о чему разговарати када погледате овај пример СВГ сата.

За почетак, користи функцију Дате() да прикупи тренутни датум и време. Користећи ову вредност, функције гетХоурс(), гетМинутес() и гетСецондс() деле податке на релевантне делове. Код затим израчунава позицију сваке казаљке на сату.

вар датум = НоваДатум();
вар хоурсАнгле = 360 * дате.гетХоурс() / 12 + дате.гетМинутес() / 2;
вар минутеАнгле = 360 * дате.гетМинутес() / 60;
вар сецАнгле = 360 * дате.гетСецондс() / 60;

Чувањем сваке руке у низу, њихове позиције се могу врло лако подесити сваки пут када се код покрене.

руке[0].сетАттрибуте('из', мењач (сецАнгле));
руке[0].сетАттрибуте('до', мењач (сецАнгле + 360));
руке[1].сетАттрибуте('из', мењач (минутеАнгле));
руке[1].сетАттрибуте('до', мењач (минутни угао + 360));
руке[2].сетАттрибуте('из', мењач (хоурсАнгле));
руке[2].сетАттрибуте('до', мјењач (сатиАнгле + 360));

Време има ограничене примене у домену веб дизајна, али је корисно за тајмере, сатове и чување временских ознака. Овај пример такође нуди увид у креирање динамичких СВГ анимација са променљивим.

Ова СВГ анимација вођена ЦСС-ом пружа уредан начин да било који облик изгледа невероватно.

Када ништа није изабрано, образац има засивљене линије испод сваког поља. Линија се појављује када се изабере поље, клизи са леве стране са глатком анимацијом. Ако корисник одабере друго поље, линија глатко клизи на своју нову позицију.

Коначно, када корисник притисне Пријавите се дугме, линија се претвара у круг који пулсира док се страница учитава.

Овај СВГ пример је посебно импресиван јер се ослања само на ЦСС да би произвео тако сложен резултат. Користи ЦСС променљиве за складиштење података, што олакшава контролу елемената попут главне апликације.

$апп-паддинг: 6вх;
$апп-видтх: 50вх;
$апп-хеигхт: 90вх;
#апликација {
 ширина: $апп-видтх;
 висина: $апп-хеигхт;
 паддинг: $апп-паддинг;
 позадина: бела;
 сенка кутије: 002рем ргба(црн, 0.1);
}

Можете користити овај пример на скоро сваком веб обрасцу и ангажовати своје кориснике као никада раније.

Прављење сопствених СВГ анимација помоћу ХТМЛ-а, ЈС-а и ЦСС-а

Прављење СВГ анимације од нуле може бити тежак процес када први пут почнете. Ови примери ће вам дати почетак који вам је потребан да направите СВГ анимације које ће учинити да ваша веб локација заблиста.

9 напредних ЦСС трикова за медијске упите које треба да знате

Реад Нект

О аутору