5 animácií SVG na oživenie vášho webového dizajnu

Animácie môžu spôsobiť, že web bude hladký a hladký, ale ako môžete túto funkciu začleniť do svojej vlastnej práce? Pridajte sa k nám a naučte sa, ako oživiť svoj webový dizajn pomocou týchto kreatívnych príkladov animácií SVG.

Práca so škálovateľnou vektorovou grafikou

SVG je formát súboru, ktorý na ukladanie a zobrazovanie obrázkov používa skôr čiary než pixely. Ako už názov napovedá, škálovateľná vektorová grafika sa dá škálovať bez straty kvality.

Okrem toho, že je skvelý na zmenu veľkosti, môžete použiť aj kód SVG v HTML a bude fungovať ako ktorýkoľvek iný prvok. To znamená, že môžete použiť CSS pravidlá, JavaScript kóda čo je najdôležitejšie, animácie s SVG vašej webovej lokality.

SVG môžete vytvárať pomocou softvéru ako Adobe Illustrator a webových stránok ako SVGator, ale môžete ich vytvárať aj ručne. Formát SVG je obyčajný textový jazyk XML a vyzerá trochu ako HTML.

Tento príklad obsahuje štyri tlačidlá s vlastnými ikonami a blokovo sfarbeným pozadím. Keď vyberiete tlačidlo, zmení sa z kruhu na zaoblený obdĺžnik, pričom sa zmení aj farba pozadia strany, aby zodpovedala tlačidlu.

Kombinácia JS a CSS vytvára tieto výsledky a všetko to začína slučkou, ktorá pridáva poslucháčov udalostí ku každému tlačidlu.

pre (var i = 0; i < menuPoložky.dĺžka; i++) {
 menuItems[i].addEventListener('kliknite', tlačidloKliknutie);
}

Po kliknutí na tlačidlo vykoná funkcia s názvom buttonClick() niekoľko akcií. Začína sa zmenou farby pozadia stránky:

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

Potom k tlačidlu, ktoré bolo stlačené, pridá triedu CSS, čím spustí animáciu a zmení farbu pozadia tlačidla.

menuItemActive.classList.remove('menu__item--active');
this.classList.add('menu__item--active');
menuItemActive.classList.add('menu__item -- animovať');
this.classList.add('menu__item -- animovať');
menuItemActive = toto;

Aj keď je tento príklad animácie SVG jednoduchý, ponúka jedinečný spôsob, ako urobiť váš web pútavejším. Tento typ funkcie dizajnu je ideálny pre mobilné webové stránky a aplikácie založené na HTML.

Do cesty SVG môžete pridať toľko uzlov, koľko chcete, vďaka čomu sú ideálne na vytváranie textu. Táto jednoduchá animácia ťahu dokonale demonštruje techniku, pričom text sa zobrazuje zľava doprava, ako keby bol písaný.

Animácia nemá kľúčové snímky, jednoducho aplikuje novú šírku ťahu popri vlastnosti prechodu CSS. Vďaka tomu sa každý riadok kreslí po obrazovke bez komplikovanej animácie.

.cesta-1 {
 zdvih-dasharray: 1850 2000;
 posun ťahu: 1851;
 prechod: 5s lineárny;
}

Funkcia JS pridáva do každej časti textu jedinečnú triedu CSS pomocou jednej nadradenej triedy CSS, aby sa ďalej znížila hustota kódu.

$(funkciu() {
funkciuanimácia Štart() {
 $('#kontajner').addClass('fin');
 }
setTimeout (animationStart, 250);
});

Ako príklad iba CSS je táto animácia SVG skvelá pre každého, kto nechce namáčať prsty na nohách do kódu JavaScript. Myšlienka je jednoduchá: tlačidlo začína podčiarknutím, ktoré sa po prejdení kurzorom zmení na úplný okraj.

Kľúčové snímky CSS vytvárajú pre tlačidlo dva stavy. Prvý stav má hrubší ťah a pokrýva iba spodok tlačidla tvaru SVG, počnúc od 0 %. Ďalším stavom je úplné tlačidlo na 100% s tenším zdvihom.

@kľúčové snímky kresliť {
 0% {
 zdvih-dasharray: 140 540;
 posun pomlčky: -474;
 šírka ťahu: 8px;
 }
100% {
 zdvih-dasharray: 760;
 posun ťahu: 0;
 šírka ťahu: 2px;
 }
}

Tieto kľúčové snímky sa aplikujú iba na obrys tlačidla tvaru SVG, keď používateľ presunie kurzor nad tlačidlo. Používa :hover Pseudotrieda CSS aby ste to dosiahli, spustením pravidla, ktoré pridá kľúčové snímky animácie do tlačidla.

.svg-wrapper:vznášať sa.tvar {
-webkit-animácia: 00,5 skresliťlineárnedopredu;
animácie: 00,5 skresliťlineárnedopredu;
}

Toto ukazuje, ako môžete vytvárať nádherné animácie bez použitia zložitého kódu. Tieto základy a svoju kreativitu môžete použiť na vytvorenie prepracovanejších interaktívnych prvkov pre svoju vlastnú webovú stránku.

S toľkými zaujímavými technikami pod kapotou je ťažké rozhodnúť sa, o čom diskutovať pri pohľade na tento príklad hodín SVG.

Na spustenie používa funkciu Date() na zhromaždenie aktuálneho dátumu a času. Pomocou tejto hodnoty funkcie getHours(), getMinutes() a getSeconds() rozdelia údaje na príslušné časti. Kód potom vypočíta polohu každej ručičky na hodinách.

var dátum = NovýDátum();
var Uhol hodín = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minútový uhol = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

Uložením každej ruky do poľa je možné veľmi jednoducho nastaviť ich polohu pri každom spustení kódu.

ruky[0].setAttribute('od', radiaca páka (secAngle));
ruky[0].setAttribute('do', radenie (secAngle + 360));
ruky[1].setAttribute('od', posúvač (minuteAngle));
ruky[1].setAttribute('do', radiaca páka (minuteAngle + 360));
ruky[2].setAttribute('od', radenie (hoursAngle));
ruky[2].setAttribute('do', radenie (hodinyUhol + 360));

Čas má obmedzené aplikácie v oblasti webového dizajnu, ale je užitočný na odpočítavanie, hodiny a ukladanie časových pečiatok. Tento príklad tiež ponúka pohľad na vytváranie dynamických animácií SVG s premennými.

Táto animácia SVG založená na CSS poskytuje úhľadný spôsob, ako dosiahnuť, aby akýkoľvek formulár vyzeral neuveriteľne.

Ak nie je vybraté nič, formulár má pod každým poľom sivé čiary. Po výbere poľa sa zobrazí čiara, ktorá sa posúva zľava s plynulou animáciou. Ak používateľ vyberie iné pole, čiara sa plynulým pohybom posunie do novej polohy.

Nakoniec, keď používateľ stlačí tlačidlo Prihlásiť sa riadok sa zmení na kruh, ktorý pri načítaní stránky pulzuje.

Tento príklad SVG je obzvlášť pôsobivý, pretože pri vytváraní takéhoto komplexného výsledku sa spolieha iba na CSS. Na ukladanie údajov používa premenné CSS, čo uľahčuje ovládanie prvkov, ako je hlavná aplikácia.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#app {
 šírka: $app-width;
 výška: $app-height;
 padding: $app-padding;
 pozadie: biele;
 box-shadow: 002rem rgba(čierna, 0.1);
}

Tento príklad môžete použiť na takmer akýkoľvek webový formulár a zaujať svojich používateľov ako nikdy predtým.

Vytváranie vlastných SVG animácií pomocou HTML, JS a CSS

Vytvorenie animácie SVG od začiatku môže byť náročný proces, keď začínate. Tieto príklady vám poskytnú náskok, ktorý potrebujete na vytvorenie animácií SVG, vďaka ktorým bude váš web žiariť.

9 pokročilých trikov CSS na dopytovanie médií, ktoré by ste mali vedieť

Prečítajte si ďalej

O autorovi