5 animací SVG, které oživí váš webový design

Animace mohou způsobit, že webové stránky budou hladké a hladké, ale jak můžete tuto funkci začlenit do své vlastní práce? Přidejte se k nám a naučte se, jak oživit svůj webový design pomocí těchto kreativních příkladů animací SVG.

Práce se škálovatelnou vektorovou grafikou

SVG je formát souboru, který k ukládání a zobrazování obrázků používá spíše čáry než pixely. Jak jejich název napovídá, škálovatelná vektorová grafika může škálovat bez ztráty kvality.

Kromě toho, že je skvělý pro změnu velikosti, můžete také použít kód SVG v HTML a bude fungovat jako jakýkoli jiný prvek. To znamená, že můžete použít Pravidla CSS, JavaScript kód, a co je nejdůležitější, animace s SVG vašeho webu.

Soubory SVG můžete vytvářet pomocí softwaru jako Adobe Illustrator a webových stránek jako SVGator, ale můžete je vytvářet i ručně. Formát SVG je prostý textový jazyk XML a vypadá trochu jako HTML.

Tento příklad obsahuje čtyři tlačítka s vlastními ikonami a blokově zbarveným pozadím. Když vyberete tlačítko, změní se z kruhu na zaoblený obdélník a zároveň se změní barva pozadí stránky, aby odpovídala tlačítku.

Kombinace JS a CSS vytváří tyto výsledky a vše začíná smyčkou, která přidává posluchače událostí ke každému tlačítku.

pro (var i = 0; i < nabídkaPoložky.délka; i++) {
 menuItems[i].addEventListener('klikněte', tlačítkoClick);
}

Po kliknutí na tlačítko provede funkce nazvaná buttonClick() několik akcí. Začíná se změnou barvy pozadí stránky:

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

Poté k tlačítku, které bylo stisknuto, přidá třídu CSS, spustí animaci a změní barvu pozadí tlačítka.

menuItemActive.classList.remove('menu__item--aktivní');
this.classList.add('menu__item--aktivní');
menuItemActive.classList.add('menu__item--animovat');
this.classList.add('menu__item--animovat');
menuItemActive = tento;

I když je tento příklad animace SVG jednoduchý, nabízí jedinečný způsob, jak učinit váš web poutavější. Tento typ funkce návrhu je ideální pro mobilní weby a aplikace založené na HTML.

Do cesty SVG můžete přidat libovolný počet uzlů, takže jsou ideální pro vytváření textu. Tato jednoduchá animace tahu dokonale demonstruje techniku, přičemž text vypadá zleva doprava, jako by byl psaný.

Animace nemá klíčové snímky, jednoduše aplikuje novou šířku tahu vedle vlastnosti přechodu CSS. Díky tomu se každý řádek kreslí přes obrazovku bez složité animace.

.cesta-1 {
 zdvih-dasharray: 1850 2000;
 posun tahu: 1851;
 přechod: 5s lineární;
}

Funkce JS přidává do každé části textu jedinečnou třídu CSS pomocí jedné nadřazené třídy CSS, aby se dále snížila hustota kódu.

$(funkce() {
funkceanimaceStart() {
 $('#kontejner').addClass('ploutev');
 }
setTimeout (animationStart, 250);
});

Jako příklad pouze CSS je tato animace SVG skvělá pro každého, kdo nechce namáčet prsty do kódu JavaScript. Myšlenka je jednoduchá: tlačítko začíná podtržením, které se po najetí myší změní na úplný okraj.

Klíčové snímky CSS vytvářejí pro tlačítko dva stavy. První stav má silnější tah a pokrývá pouze spodní část tlačítka tvaru SVG, počínaje 0 %. Dalším stavem je úplné tlačítko na 100 % s tenčím zdvihem.

@klíčové snímky kreslit {
 0% {
 zdvih-dasharray: 140 540;
 zdvih-pomlčka: -474;
 šířka tahu: 8px;
 }
100% {
 zdvih-dasharray: 760;
 tah-dashoffset: 0;
 šířka tahu: 2px;
 }
}

Tyto klíčové snímky jsou aplikovány pouze na obrys tlačítka tvaru SVG, když uživatel přesune kurzor nad tlačítko. Používá :hover Pseudotřída CSS Chcete-li toho dosáhnout, spusťte pravidlo, které přidá klíčové snímky animace k tlačítku.

.svg-wrapper:vznášet se.tvar {
-webkit-animace: 00,5 skreslitlineárnívpřed;
animace: 00,5 skreslitlineárnívpřed;
}

To ukazuje, jak můžete vytvářet krásné animace bez použití složitého kódu. Tyto základy a svou kreativitu můžete využít k vytvoření propracovanějších interaktivních prvků pro svůj vlastní web.

S tolika zajímavými technikami pod kapotou je těžké se rozhodnout, o čem diskutovat při pohledu na tento příklad hodin SVG.

Pro začátek používá funkci Date() ke sběru aktuálního data a času. Pomocí této hodnoty rozdělují funkce getHours(), getMinutes() a getSeconds() data na příslušné části. Kód pak vypočítá polohu každé ručičky na hodinách.

var datum = Novýdatum();
var hodinÚhel = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minutový úhel = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

Uložením každé z rukou do pole lze jejich polohu velmi snadno nastavit při každém spuštění kódu.

ruce[0].setAttribute('z', řazení (secAngle));
ruce[0].setAttribute('na', řazení (secAngle + 360));
ruce[1].setAttribute('z', řadič (minuteAngle));
ruce[1].setAttribute('na', řazení (minuteAngle + 360));
ruce[2].setAttribute('z', řadicí páka (hoursAngle));
ruce[2].setAttribute('na', řazení (hodinyÚhel + 360));

Čas má omezené aplikace v oblasti webdesignu, ale je užitečný pro odpočítávání, hodiny a ukládání časových razítek. Tento příklad také nabízí pohled na vytváření dynamických animací SVG s proměnnými.

Tato animace SVG řízená CSS poskytuje úhledný způsob, jak učinit jakýkoli formulář neuvěřitelným.

Pokud není vybráno nic, formulář má pod každým polem šedé čáry. Po výběru pole se objeví čára, která se posouvá zleva s plynulou animací. Pokud uživatel vybere jiné pole, čára se plynulým pohybem posune do nové polohy.

Nakonec, jakmile uživatel stiskne Přihlásit se čára se změní na kruh, který při načítání stránky pulzuje.

Tento příklad SVG je obzvláště působivý, protože při vytváření tak komplexního výsledku spoléhá pouze na CSS. K ukládání dat používá proměnné CSS, což usnadňuje ovládání prvků, jako je hlavní aplikace.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#aplikace {
 šířka: $app-width;
 výška: $app-height;
 padding: $app-padding;
 pozadí: bílé;
 box-shadow: 002rem rgba(Černá, 0.1);
}

Tento příklad můžete použít na téměř jakýkoli webový formulář a zaujmout své uživatele jako nikdy předtím.

Vytváření vlastních SVG animací pomocí HTML, JS a CSS

Vytváření animace SVG od začátku může být náročný proces, když začínáte. Tyto příklady vám poskytnou náskok, který potřebujete k vytvoření animací SVG, díky nimž bude váš web zářit.

9 pokročilých triků CSS pro dotazy na média, které byste měli znát

Přečtěte si další

O autorovi