SVG inspirace: efekty, animace, interakce, přechody a další udělátka

SVG posouvá hranice možností webdesignu, ale trápí mě jak málo se to ví. V tomto textu budu proto shromažďovat ukázky možností, které SVG nabízí.

Zcela úmyslně se tady nebudu zamýšlet nad složitostí implementace, podporou v prohlížečích ani přístupností. Všechny tyto parametry jsou u různých ukázek různé.

Než se do některých řešení pustíte, poctivě to zvažte. Můžu ale slíbit, že se k těm nejzajímavějším budu na Vzhůru dolů vracet podrobněji.

Text: výplně, filtry, efekty

Práce s textem je jasná volba. V případě dobré implementace je SVG text plně přístupný: indexovatelný Googlem, čtený slepeckými čtečkami a je možné jej kopírovat.

1. Výplně textu obrázky nebo barevnými přechody: Codrops demo.
2. Animované textové výplně: Codrops demo.
3. Filtry na text jako v grafickém editoru: Článek na Smashing Magazine.
4. Animované ohraničení textu: CodePen demo.

Obrázky: výřezy a filtry

Ořezávání obrázků vlastními tvary bude do budoucna možné i v CSS. SVG teď ale nabízí širší podporu v prohlížečích. Zajímavé využití nabízí SVG i pro filtry přes obrázky. Sledujte co s nimi dělá Michael Mullany.

1. Vlastní ořez obrázku: CodePen demo.
2. Filtry přes fotky: CodePen demo.

Animace

Animování jednotlivých částí SVG má daleko širší škálu výrazových prostředků než v případě elementů stránky stylovaných pomocí CSS. SVG animace – SMIL – nemají plnou podporu a tak se pro rozhýbání používá buď CSS nebo javascriptové knihovny. Nejznámější je Snap.svg, který se bude líbit frontend kodérům. Greensock má zase velmi pokročilé možnosti.

1. Animovaná zatržítka s vlastním vzhledem: Codrops demo.
2. Animované interakce s textovými políčky: Codrops demo.
3. Animované ikony: Codrops demo.
4. Animace cesty na mapě pomocí posunu stránky: Codrops demo.
5. Pružnost: Codrops demo.
6. Lepkavost: Codrops demo.
7. Animované interakce s tlačítky: Codrops demo.
8. Líbí se mi animované diagramy co v článcích dělá Jake Archibald.
9. Symbio na svém webu animují epicky. A přitom vkusně, pro dobro věci.

Interakční přechody

Ano, i přechody mezi stavy se hodí animovat. Tohle se ve webdesignu zatím moc nepoužívá, ale dovolím si tomu věštit velkou budoucnost.

1. Animované načítání položek: Codrops demo.
2. Přechod se seznamu na detail: Codrops demo.
3. Mezistránkové přechody: Codrops demo.
4. Rozmazaný přechod mezi položkami prezentace: Codrops demo.

Widgety: bannery, mapy, infografiky

SVG se mimojiné hodí jako náhrada Flashe. Je to nový pomocník pro realizaci udělátek, malých webů uvnitř webů. Bannery, malé interaktivní apky, interaktivní infografiky… Zkrátka věci, které jsme dřív dělali ve Flashi.

Ano, já vím, SVG je zatím jako náhrada Flashe dost neadekvátní. Hlavně z pohledu nepřítomnosti pořádných designérských nástrojů. Ale však ono se to časem zlepší.

1. Interaktivní mapy: Codrops demo.
2. Infografika od SUPERKODERS: IslamophobiaNetwork.com.
3. Bannery v SVG: CodePen demo.
4. Omalovánka pro syna Lukáše Wernera: Blesk.
5. Půjčkolis: Bistro Agency.

…a, no jasně, ikony

Na samotných ikonkách nic objevného není. SVG (na rozdíl od ikonfontů) ale otevírá nové možnosti jak pracovat s jejich většími sadami. Mnozí doporučují SVG Store.

Další inspiraci hledejte v téhle nesmrtelné prezentaci od Sary Soueidan, na Codrops nebo třeba u Lucase Bebbera.