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é.

Reklama: Vzhůru do lepší práce

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

Text: výplně, filtry, efekty v SVG

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

Obrázky: výřezy a filtry v SVG

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. Zajimavé 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

Animace v SVG

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

Interakční přechody v SVG

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 detal: Codrops demo.
  3. Mezistránkové přechody: Codrops demo.
  4. Rozmazaný přechod mezi položkami prezentace: Codrops demo.

Widgety: bannery, mapy, infografiky

Udělátka v SVG

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… Prostě věci co 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. Interaktivní infografika realizovaná SuperKodéry: IslamophobiaNetwork.com.
  3. Bannery v SVG: Codepen demo.
  4. Omalovánka pro syna Lukáše Wernera: Blesk.
  5. Půjčkolis: Bistro Agency.
  6. Interaktivní Vennovy diagramy: Serpo.cz.

…a, no jasně, ikony

Na samotných ikonkách nic objevného není. SVG ale otevírá nové možnosti jak pracovat s jejich většími sadami. Mnozí doporučují SVG Store, já jsem si oblíbil nástroj Grunticon, o kterém jsem také nedávno psal.

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

Vsadím boty, že tímhle sbírka jen začíná. Zmiňte se, pokud máte jiné hezké příklady z vlastní praxe. Nebo jste prostě viděli něco co v seznamu být musí. Nové věci rád přidám.


Zaujaly vás, ale nevíte jak ukázky zrealizovat? Vše co potřebujete znát vás naučí Michal Matuška na našem kurzu SVG.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích HTML, Netechnické.

Výsledky dotazníku: Jak se my, webaři a webařky, vzděláváme?

19. 2. 2017 na blogu

Nejvíce pomocí krátkých textů a videí. Fyzické knížky ani prezenční kurzy zatím jejich elektronické alternativy neporazily. Vzdělávání si účastníci většinou objednávají i platí sami.

NN Group: Jak vylepšit formulářové prvky pro vložení datumu?

9. 2. 2017 na blogu

Stručné shrnutí článku. Jak vylepšit input type=date z pohledu uživatelského.

Veřejná školení

SVG

SVG

Scalable Vector Graphics přináší do tvorby uživatelských rozhraní jednu z největších inovací za posledních deset let. Příští termín: 4. dubna.

23. února Dnešní webová kodéřina
9. března Responzivní design
23. března Optimalizace rychlosti načítání
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč