Najlepšie príklady použitia interaktívnej infografiky na vstupných stránkach. Kráľovská hrobka v Peru. Nakreslite sa: Ako príjem domácnosti predpovedá šance dieťaťa ísť na vysokú školu

Tu je príručka pre začiatočníkov k vizualizácii údajov, ktorá je užitočná pre každého, kto sa chce naučiť vytvárať interaktívne infografiky a mapy.

Infografika a interaktívne mapy sa stala súčasťou mnohých projektov realizovaných aktivistami, novinármi a sociálnymi hnutiami. Ale čo organizácie, ktoré nemajú dizajnéra na plný úväzok? Aj tak môžete vytvárať vysokokvalitné vizuálne materiály - Strážca povedal, ako to urobiť.

Údaje

Prvá vec, ktorú musíte urobiť, je pochopiť, aký druh údajov chcete vizualizovať.

Predpokladajme, že vediete kampaň za lepšiu hygienu na celom svete. Aby sme ukázali, aké dôležité je to, treba zdôrazniť, koľko krajín ešte má obmedzený prístup na čistenie toaliet a ako málo sa táto situácia zmenila za posledných 10 rokov. V tomto návode použijeme súbor údajov zo Svetovej banky.

Teraz máme údaje za 10 rokov, ale potrebujeme len údaje za roky 2000 a 2012. Preto po načítaní údajov pre seba vymažeme nepotrebné riadky a stĺpce (tip: uložte pôvodný súbor s údajmi).

Teraz, keď ste vymazali údaje, ste pripravení ich vykresliť. V našom prípade pred vykreslením pribudol ešte jeden stĺpec – rozdiel v percentách medzi rokmi 2000 a 2012.

Ako vytvoriť interaktívny graf

Zobrazenie údajov v grafe je najrýchlejší a najjednoduchší spôsob vizualizácie informácií. Stránky ako Datawrapper, Infogr.am a PiktoChart sú ľahké a ľahko použiteľné nástroje, pomocou ktorých môžete vytvárať rôzne grafy a tabuľky a vkladať ich do ľubovoľnej lokality.

Datawrapper je pravdepodobne najintuitívnejší a tiež zadarmo. Slabá stránka Tento nástroj nie je príliš dobrý na zobrazovanie veľkých súborov údajov, takže si predstavíme iba 10 krajín, ktoré za posledných 10 rokov zaznamenali najviac zmien.

Ako vytvoriť graf pomocou Datawrapper:

1. Zaregistrujte sa na stránke Datawrapper a vytvorte nový graf.
2. Skopírujte a prilepte svoje údaje do vyhradeného poľa.
3. Skontrolujte svoje údaje.
4. A teraz tá zábavnejšia časť – vyberte si šablónu grafu. Pre túto vizualizáciu bol zvolený jednoduchý interaktívny graf, ale môžete si vybrať Vysoké číslo možnosti uvedené na stránke.
5. Posledným krokom je konečná úprava vášho rozvrhu. Môžete zmeniť farby, pridať názov, popis atď.

Ako vytvoriť interaktívnu mapu

Na zobrazenie údajov súvisiacich s rozdielne krajiny, najlepšie je použiť mapu. Ponúkame vám prehľad troch bezplatné nástroje pre začiatočníkov.

Datawrapper

Tento nástroj má teraz možnosť mapy choropletu na vytvorenie gradientu na základe vašich údajov. Mapy využívajúce Datawrapper sa vytvárajú rovnakým spôsobom ako grafy.

Za: jeden z najrýchlejších a jednoduché nástroje... Datawrapper vás vyzve, keď zadáte nesprávny názov krajiny. Ďalšou výhodou tohto nástroja je, že ak prejdete myšou špecifická farba v legende budú na mape zvýraznené iba krajiny s touto farbou.

proti: neexistujú žiadne šablóny pre jednotlivé krajiny alebo mestá.

Za: zadarmo a jednoducho sa používa (najmä na vytváranie bodov na mape).

proti: pridané vlastnosti napr zmeniť farebná schéma pre začiatočníkov sa môže zdať skľučujúca (ak však viete, ako skombinovať súbory KML s existujúcimi údajmi, môžete takúto mapu vytvoriť). Je ťažké pridať do mapy legendu.

Na prvý pohľad sa to môže zdať skľučujúce, ale pomocou tohto nástroja môžete vytvoriť širokú škálu máp a prispôsobiť si ich podľa toho, čo chcete na mape vidieť.

Za: vám umožní vykonať veľa úprav a pridať ďalšie vrstvy. Funguje na mobilných zariadeniach.

proti: ak plánujete vytvoriť viac ako 5 kariet a očakávate, že budete mať viac ako 10 000 zobrazení stránok za mesiac, budete musieť za používanie tohto nástroja zaplatiť.

Ako vytvoriť tradičnú infografiku

Tradičné infografiky sú statické, farebný obrázok, na ktorom sú informácie zobrazené číslami a ikonami. S vytvorením takéhoto obrazu vám pomôžu nástroje spomenuté vyššie – Infogr.am a PiktoChart. Ich použitie je jednoduché - môžete ich jednoducho pretiahnuť potrebné informácie a vložte svoje údaje na vytvorenie grafov. Počet dostupných šablón v bezplatné verzie nástrojov, je obmedzený.

Príklad rýchlej vizualizácie nášho súboru údajov pomocou Infogr.am:

Pomocou nástrojov prezentovaných v tejto príručke môže ktokoľvek, bez ohľadu na úroveň zručností, vytvoriť krásnu interaktívnu infografiku alebo mapu a dostať svoje posolstvo k širšiemu publiku.

Čo je interaktívna infografika – túto otázku si stále častejšie kladú naši klienti. Donedávna malý počet agentúr a štúdií vo všeobecnosti chápal čo v otázke, no komunikačné spoločnosti idúce s dobou sú dnes povinné nielen zaradiť do cenníka túto službu ale aj efektívne vykonávať. Bohužiaľ, nie každý vie, ako to urobiť doteraz.

Existuje niekoľko typov a definícií interaktívnej infografiky.

Po prvé, interaktívne infografiky sú infografiky, ktoré zapájajú čitateľa do správy zobrazených údajov. Interaktivita je vytvorená pomocou technológií Flash alebo JavaScript, HTML 5.

Po druhé: akákoľvek infografika, ktorá vám to umožňuje online režim zmeniť údaje zobrazené v grafickej podobe.

Projekty na vytváranie interaktívnych infografík len naberajú na intenzite kvôli vysokej zložitosti a nákladom. Jedným z najjasnejších príkladov interaktívnej infografiky bol projekt „Kto zablahoželal Lukašenkovi k predsedníctvu“, 2011.

Interaktívne aktualizovaná infografika umožnila vidieť, kto z hláv štátov zablahoželal A.G. Lukašenko vo voľbách v roku 2010. Údaje zobrazené na infografike je možné vybrať z fotografie prezidenta, vlajky krajiny, tabuľky alebo zemegule. Používateľ si teda sám zvolil, o aké údaje má záujem a čo sa mu bude zobrazovať. V tabuľke bolo možné zoradiť krajiny aj podľa toho, ako dlho bola hlava štátu pri moci v čase blahoželania, podľa stavu práv a slobôd, kvality života, slobody tlače, de facto demokratických volieb. a hodnotenie diktátorov. Prítomnosť gratulantov sa kontrolovala na oficiálnych stránkach prezidentov a menila sa ručne.

Od spustenia tohto projektu uplynulo veľa času a dnes sa mnohí špecialisti snažia o to, aby interaktívne infografiky zmenili informácie automatický režim... To však vážne ovplyvňuje rozpočet projektu.

Veľké západné spoločnosti, ktoré pochopili hodnotu displeja, boli medzi prvými, ktorí využili interaktívnu infografiku ako prostriedok na budovanie reputácie alebo zvyšovanie lojality používateľov. komprimované informácie v dynamike a možnosti zapojenia sa prostredníctvom jej užívateľov.

Niektoré typy infografík umožňujú prispôsobiť si niektoré parametre v interaktívnom formáte a získať tak zaujímavé údaje. Používateľovi sa napríklad položí otázka, zadá určité číslo, po ktorom sa graf alebo diagram zmení pred jeho očami - získa sa úplne nový informačný materiál, v ktorom bol priamym účastníkom tvorby.

Teda napríklad k tretiemu výročiu prehliadača Spoločnosť Chrome Google vizualizoval históriu vývoja technológií a programov na prehliadanie webu: dôrazne vám odporúčame nasledovať odkaz a užiť si pestrú podívanú interaktívnych infografík v najlepších tradíciách Západu.

Vo vyššie uvedenom príklade používatelia hlavných prehliadačov internet Explorer 9+, Firefox 4+, Safari 4+, Chrome 10+, Opera 11+ môžu vidieť dve desaťročia technológií používaných v prehliadačoch – od protokolu http až po offline aplikácie AppCache.

Ruské spoločnosti ešte nezvládli interaktívnu infografiku, keďže v súčasnosti sú dostupné aj jednoduché infografiky dobrá kvalita nie každý. Napriek tomu, že služba na vytváranie interaktívnych infografík je skôr novinkou ruský trh, naša agentúra je pripravená vykonávať takéto úlohy už dnes, od r tento formát sa stáva čoraz žiadanejším. Náklady na túto službu sú vysoké, pretože podobné technológie sú slobodné a vždy prísne individuálne, čo si vyžaduje tvorbu softvérový produkt s "0" pre každú úlohu.

Testix uverejňuje preklad článkuRobbie Richards ... originál:Ako vytvoriť interaktívnu infografiku (6-bodový sprievodca)

Jeden z najviac veľké problémy To, čomu dnes marketéri čelia, je boj o vytváranie pútavého obsahu.

Algoritmy vyhľadávania sa neustále menia v snahe filtrovať obsah Nízka kvalita... So všetkým vyššie uvedeným to vedie k masívnej zmene stratégií tvorby obsahu.

Niektoré značky prešli na longready...

... alebo typ obsahu, ktorý Brian Dean propaguje pomocou svojej techniky mrakodrapov.

Výsledkom je explózia obsahu, ktorý zaplavil internet. Len na blogoch sa dnes každý deň zverejní viac ako 2 milióny článkov.

Táto úroveň nasýtenia obsahu spustila dramatický posun v stratégiách spoločností.

V posledné roky Mnohí pracovali na diverzifikácii svojho obsahu pridaním ďalších formátov, ako sú napríklad infografiky. Fakt: Infografika zaznamenala v roku 2016 prudký rast, pričom 58 % marketérov ich zaradilo medzi najlepšie taktiky, ktoré používajú na zapojenie publika.

Niektorí marketéri sa napríklad domnievajú, že tvorba infografík si vyžaduje určité profesionálne zručnosti alebo drahého grafického dizajnéra. Ale nie je to tak.

nepotrebuješ špeciálny tím vývojárov, ak máte platformy *, ktoré ponúkajú súbor nástrojov na urýchlenie a zjednodušenie procesu vytvárania interaktívneho obsahu.

Ako uvidíte v tomto článku, interaktívne infografiky sa nielen ľahko vytvárajú – sú dokonca efektívnejšie pri zapájaní vášho publika ako statické infografiky a premieňajú vašich čitateľov na potenciálnych zákazníkov.

Prečo interaktívne infografiky porážajú svoj statický náprotivok.

Koncept infografiky je jednoduchý: Vložte čo najväčšiu hodnotu pre svojich čitateľov do obsahu a vizualizujte ich, aby ste ich lepšie zaujali.

Presne na to slúžia interaktívne infografiky.

Originál

Grafický dizajn dokonale zapadá do zápletky príbehu aj s datasetom. Ocitnete sa pri rýchlosti 3 000 kilometrov za hodinu, preletíte okolo Medzinárodnej vesmírnej stanice až na samý vrchol zdroja 21,9 miliardy fotografií uverejnených na Instagrame každý rok.

Pri výbere vizuálnej témy pre interaktívnu infografiku treba pamätať na nasledujúce:

• Pomáhajú obrázky a interaktívne prvky oživiť dáta?
• Ako dobre odrážajú obrázky, animácie a dizajnové prvky vašu značku, ako aj iné značky, ktoré boli partnermi pri tvorbe obsahu?
• Kde bude žiť interaktívna grafika? Ak bude uvedená na vašej webovej lokalite, možno budete chcieť, aby jej dizajn zodpovedal téme alebo šablónam vašej lokality.
• Uistite sa, že nápad vizualizácie je relevantný pre záujmy vášho publika, odvetvia a príbehu vo všeobecnosti. Infografika rezortu bude mať úplne iný vizuálny štýl ako promo akcie pre top manažérov.

Ďalším skvelým príkladom je táto infografika Joho Bean:

Používateľa vezme na nevšedné multimediálne dobrodružstvo pomocou šťavnatých záberov, rozpráva o ceste kávových zŕn z miesta dozrievania ku konzumentovi.

Akcie používateľa by mali vytvoriť odpoveď

Interaktívne infografiky by mali byť interaktívne, to však neznamená, že by sa mali obmedzovať na jednotlivé klikacie prvky.

Každá akcia používateľa musí v rámci obsahu vytvoriť nejaký druh odozvy pre celok, aby sa vytvoril skutočne osobný zážitok – aj keď ide len o jednoduché posúvanie stránky.

Originál

Nielen skrytý obsah núti čitateľa aktívne sa podieľať na štúdiu obsahu, podporuje zvedavosť a tiež umožňuje čitateľom preskakovať časti, ktoré ich málo zaujímajú.

Prispôsobte obsah pomocou vstupu používateľa

Oveľa silnejšie zapojenie môžete zaručiť tým, že používateľom ponúknete údaje na základe informácií, ktoré zadajú. To je v súlade so želaniami používateľov: chcú viac interaktívny obsah a viac personalizácie.

Ohromujúcim príkladom toho sú personalizované infografiky, ktoré poskytujú prehľad o tom, či môže byť vaša práca ohrozená automatizáciou robotmi:

Originál

Používatelia si musia vybrať povolanie, ktoré ich zaujíma, aby sa dostali relevantná informácia.

Zahrňte grafické formuláre na zhromažďovanie informácií

Pravdepodobne ste si všimli obrovský posun online svete od textového obsahu po vizuálny obsah.

Sila vizuálu na internete a u nás sa nedá poprieť Každodenný život... Na YouTube a Instagrame dominuje vizuálny obsah; YouTube je 3. najnavštevovanejšia stránka na webe s viac ako 80 miliónmi fotografií uverejnených na Instagrame každý deň.

Blogové príspevky a články sú o 80 % „spotrebiteľnejšie“, ak majú farebné obrázky, hlavičky alebo miniatúry a ľudia na stránke nestrávia viac ako 15 sekúnd, ak ich neupúta už od prvých sekúnd.

Infografika je medzi publikom a predajcami obľúbená a dnes je pre ľudí o 800 % zaujímavejšia ako v roku 2012.

Navyše, obsah sa vytvára alarmujúcim tempom – 60 % marketérov vytvorí každý deň aspoň malý kúsok nového obsahu! Viac sa dozviete v prehľadnom článku.

Čím viac ľudí tvorí obsah, niečo sa stáva jasným: ak chcete byť videní, musíte vyniknúť.

Prirodzene, marketingoví pracovníci s obsahom už premýšľajú o budúcnosti vizuálneho obsahu, zisťujú, čo môžu robiť teraz, čo môžu robiť a aké nové technológie sú už na obzore. Tento druh myslenia vpred je to, čo môže spôsobiť alebo zlomiť všetky vaše snahy o marketing obsahu; musíte sa prispôsobiť, inak sa utopíte.

S vizuálnym obsahom, akým je infografika, majú marketéri jedinečná príležitosť vidieť budúcnosť, ako sa blíži. spoločnosti, grafických dizajnérov a všetci obchodníci začínajú používať infografiky – aktualizujú ich, aby ešte viac zaujali svoje publikum. Aj keď už pravidelne „len zverejňujete“ infografiku, nikdy nie je príliš skoro vedieť o trendoch, ktoré sa práve začínajú rozvíjať, rovnako ako nie je príliš skoro vedieť, ako ich implementovať do vašich stratégií obsahového marketingu.

Ak sa chcete pozrieť do budúcnosti a možno sa dokonca naučiť pár trikov skôr ako ostatní, teraz je ten správny čas!

Tu sú tri typy infografík, ktoré budú v (blízkej) budúcnosti najbežnejšie.

Ak hľadáte skvelý infografický nástroj, odporúčam vám vyskúšať Visme. Na začiatok ponúkajú bezplatný účet a vynikajúce pohodlné funkcie pre tých, ktorí sa nevenujú dizajnu. Teraz môžete získať bezplatný účet.

1. Interaktívna infografika

Zatiaľ čo vidíme krásu interaktívnych webových stránok a ľahko použiteľných hier, interaktívne infografiky sú vo svojom odbore stále celkom nové. Rovnako ako infografika, samozrejme obsahujú nejaké informácie a zvyčajne sú dynamické. Ale použitie interaktívnych prvkov dáva používateľom možnosť spojiť sa s informáciami a vytvoriť si vlastné.

Bez ohľadu na vašu firmu, produkt, službu alebo správu môžete vytvoriť interaktívne infografiky, ktoré ľuďom umožnia hodnotiť sa (napríklad „Vypočítajte si BMI tu“). Používatelia môžu tiež kliknúť na príslušné informácie, čím sa presmerujú na hlbšie zacielený zdroj alebo späť vstupná stránkačím sa generuje návštevnosť. Je to vysoko prispôsobivý a zábavný spôsob, ako zaujať publikum.

Mnoho obchodníkov sa už prispôsobilo tomuto typu infografiky a rýchlo sa prenáša. Zároveň však mnohí berú za základ jednoduchá infografika:

.... len si predstavte, čo ešte môžete robiť s interaktívnou infografikou.

Si môžete vyskúšať:

• Používanie techník posúvania, vďaka ktorým obrázky alebo tvary vyčnievajú z pozadia
• Vytvárajte „vyskakovacie okná“, ktoré rozširujú oblasti textu
• Plávajúce obrázky alebo štatistiky, keď na ne kliknete
• Premena infografiky na viacero stránok, ktoré si používatelia môžu prezerať

Pre viac podrobný príklad interaktívna infografika, pozrite si túto:

Aby bola vaša infografika vysoko interaktívna (s rolovaním, kontextovými oknami atď.), budete sa musieť naučiť niečo o HTML5 alebo CSS, alebo si najať niekoho iného, ​​aby to zistil za vás.

Napriek vynaloženému úsiliu bude vašou odmenou jedinečný, pútavý a efektívny obsah.

Prečo by ste sa mali pokúsiť implementovať infografiku v blízkej budúcnosti?

• Povzbudzuje vaše publikum, aby sa zapojilo a zdieľalo s vaším obsahom.
• To generuje návštevnosť (cez odkazy)
• Svojmu publiku to dokazuje, že ste inovatívni, vynaliezaví a odhodlaní poskytovať včasný a pútavý obsah.
• Existujú úrovne interaktívnej infografiky, ktoré riadia jej vývoj.

2. Vložené video a GIF

Ide o ďalší typ infografiky, ktorý dnes vidíme čoraz častejšie. Infografika ponúkajúca krátke videá alebo dokonca GIF (Graphics Interchange Format) - skvelý spôsob upútajte pozornosť a nechajte svoju infografiku vyniknúť z davu. Aj keď to obmedzuje platformy, môžete zdieľať svoje infografiky v reálnom čase.

Množstvo jednoduchých infografických nástrojov, ako napríklad Easel.ly, ponúka možnosť „Vložené video na YouTube“ alebo môžete do infografík, ktoré vytvoríte vo Photoshope, pridať video pomocou vrstvy videa. Na snímku v Powerpointe môžete dokonca pridať video, ktoré môžete premeniť aj na infografiku.

A čo viac, na nete nájdete milióny GIF a vložíte ich rovnakým spôsobom. Háčik je v tom, že budete musieť distribuovať svoju infografiku ako adresu URL, aby ste sa uistili, že je správne vložená na vašu stránku. Takéto infografiky nesmiete distribuovať ani ukladať vo formáte .jpeg alebo PDF. Nepochybne, keďže sa to stáva čoraz populárnejším, budú existovať ďalšie nástroje na vkladanie videa a GIF, ktoré tento proces ešte viac uľahčia.

Ak však chcete používať tento typ infografiky skôr, ako sa to naučia všetci ostatní, dokonca aj ich psy, začnite teraz s nástrojmi, ktoré nájdete online.

Ak to chcete posunúť na vyššiu úroveň, môžete vytvoriť video z infografiky, ktorú už máte. Je to skvelá príležitosť byť videný na YouTube, Instagram a dokonca aj na video platformách ako Vimeo, Snapchat a ďalšie. Video nižšie - skvelý príklad o tom, ako premeniť infografiku na videá.

Prečo vkladať videá alebo obrázky GIF do infografík?

• Poskytuje vám prvok prekvapenia – ľudia neočakávajú, že sa obraz začne hýbať!
• Je to veľmi zábavné a originálne, čo zvyšuje šancu, že ľudia budú interagovať a zdieľať vašu infografiku.
• to dobrý spôsob ukážte všetkým jedinečnosť vašej značky

3. Animované infografiky

Animované infografiky majú veľké množstvo vizuálne modely a vyžaduje si veľa pozornosti. Keď si používateľ prezerá stránku, zvyčajne neočakáva, že sa niečo pohne, takže je dobré, ak sa všetky tieto techniky naučíte skôr ako ostatní.

Vzhľadom na to, že mnohé animované infografiky sú pomerne zložité a môžu si niektoré vyžadovať grafický dizajn, kódovanie a/alebo znalosti v danej oblasti softvér, veľmi si ich vážia.

Tu je príklad toho, o čom hovorím:

Ak by ste sa chceli dozvedieť viac o tom, ako vytvárať animované infografiky, pozrite si túto infografiku od Tabletop Whale. Môžete tiež nájsť rôzne služby ktoré pomáhajú pri vytváraní infografík tohto druhu. V každom prípade ide o jeden z najťažších procesov vo vývoji infografiky.

Prečo by ste mali tráviť svoj čas, energiu a/alebo peniaze vytváraním animovaných infografík?

• V skutočnosti vás odlíši od davu, pretože nie každý má prístup k tomuto druhu softvéru alebo obsahu.
• O pár rokov to bude bežné – budete jeden z prvých, ktorí to urobia!
• Vďaka animácii budú informácie v infografike nezabudnuteľnejšie
• Bude to inšpirovať vašich používateľov, aby s vami spolupracovali.

Toto všetko nie je sci-fi.

Môže to znieť príliš technicky a zdá sa vám to ako niečo mimo vášho dosahu, ale je pravdepodobné, že tieto typy infografík budú o 2-3 roky veľmi bežné. Už teraz sme svedkami výrazného prelomu v animovaných infografikách a infografikách GIF, najmä keď popularita GIF neustále rastie. Infografika sa stáva jednou z najkonzumovanejších a najčastejšie využívaných typy, ktoré sa majú vytvoriť obsahu na internete. prečo? Pretože mozog potrebuje len 250 milisekúnd na prijatie a spracovanie hodnoty symbolu.

Ak priemerný človek strávi na webovej stránke asi 15 sekúnd a potom sa začne nudiť, potom samozrejme budete chcieť vytiahnuť čokoľvek, čo by ho mohlo zdržať – alebo aspoň dostať správu za 15 sekúnd alebo menej. Niektoré štúdie dokonca dokázali, že ľudia sa dokážu na niečo sústrediť maximálne 8 sekúnd a toto číslo sa každým rokom znižuje.

To je dôvod a možno aj vedľajší produkt našej neustálej potreby informácií. Žijeme v informačnom veku a všetky informácie sú nám dostupné. To však znamená aj to, že čo viac ľudí pokúšať sa zdieľať správy a odpovedať na všetko prípadné otázky, tým viac sa vytváraný obsah stáva šumom pozadia.

Ak je dnes ukazovateľom dostupnosť infografík, čoskoro budú všade. To znamená nové zmeny vo vašej práci. Žiadna marketingová kampaň v histórii nebola úspešná tým, že by sa robilo stále to isté.

Ide o to, aby ste v infografike videli viac ako len jpeg obrázok. Infografiku je možné prispôsobiť rôznym prostrediam a použiť na obrovskej škále platforiem. Podnikatelia a marketéri už v tom videli potenciál. a ty?

V túto lekciu naučíme sa vytvárať interaktívne infografiky pomocou SVG, CSS a JavaScriptu. Menej diskutovanou témou je vlastnosť nových prehliadačov pri zvyšovaní podpory súborov v formát SVG... Na rozdiel od bitmapy napr. PNG, JPG alebo GIF, Vektorová grafika v súboroch SVG je absolútne škálovateľný na akúkoľvek veľkosť a zobrazí sa v akomkoľvek rozlíšení alebo hustote obrazovky bez straty kvality. V mnohých prípadoch sú súbory SVG oveľa menšie a načítavajú sa rýchlejšie. Najzaujímavejšie však je, že niektorí vývojári nechápu, že SVG je založené na špecifikácii XML a dá sa aplikovať podobným spôsobom ako HTML.

To tiež znamená, že môžeme pristupovať a manipulovať s grafikou a prvkami v súbore SVG pomocou CSS technológie a JavaScript, ktorý už vývojári webu poznajú. Vývojári teraz môžu vytvárať pôsobivé animácie a efekty pomocou SVG. Dnes preskúmame silu SVG vytvorením interaktívnej vektorovej infografiky pre web. Zobraziť demo alebo stiahnuť zdroj môžete kliknutím na odkazy pod obrázkom nižšie. Začnime.

Príprava súboru SVG

Existuje mnoho spôsobov, ako vytvoriť SVG grafika... Aj keď je možné robiť SVG ručným kódovaním, v prípade zložitejšej grafiky budeme chcieť mať nejaký typ vektorového softvéru, ktorý dokáže exportovať vo formáte SVG. Populárna voľba väčšina dizajnérov nám môže byť známa Adobe ilustrátor , ale existujú aj iné verejne dostupné aplikácie, ako napr Inkscape, ktoré môžu byť pre naše účely vhodnejšie.

Bez ohľadu na softvér, ktorý si vyberiete, je nevyhnutné, aby ste mohli zoskupovať objekty a pomenovať tieto skupiny (napísaním atribútov id). To nám umožňuje organizovať naše SVG do vhodnej hierarchie, ku ktorej môžeme neskôr pristupovať pomocou CSS a / alebo JavaScriptu. Illustrator a Inkscape majú možnosť to urobiť výberom viacerých grafických prvkov tak, že prejdete na Object> Group (alebo Ungroup) z hlavného menu.

Každému objektu alebo skupine potom možno priradiť názov, ktorý sa pri exporte stane atribútom id skupiny alebo objektu, preto sa vyhýbajte medzerám, špeciálne znaky a duplikáty.

V aplikácii Illustrator to môžete urobiť na paneli Vrstvy ( vrstvy). Stačí na paneli nájsť objekt, ktorý chcete pomenovať, dvakrát kliknúť na pole vrstvy a zadať požadované ID. V používaní Inkscape Objekt > Vlastnosti objektu panel na priradenie ID objektu alebo skupine. Dá sa to urobiť aj s Upraviť> Editor XML panel, kde môžete písať nielen id, ale aj triedy.

V našom príklade, keď šetríme súbor SVG a otvorte ho textový editor, bude mať nasledujúcu štruktúru:

id = "pozadie"> id = "bg-lines-left"> < /g> id = "bg-lines-right"> < /g> < /g> id = "logo"> < /g> id = "citát"> id = "úvodzovka-ľavá-zátvorka"> < /g> id = "citát-pravá-zátvorka"> < /g> id = "citátový-text"> < /g> < /g> id = "časová os"> id = "káva"> id = "coffee-bar" /> id = "kávová šípka" /> id = "čas na kávu"> < /g> id = "odznak kávy"> id = "coffee-circle" /> id = "názov kávy"> < /g> id = "detaily kávy"> < /g> < /g> < /g> id = "dizajn"> id = "design-bar" /> id = "design-arrow" /> id = "design-time"> < /g> id = "design-badge"> id = "design-circle" /> id = "názov-návrhu"> < /g> id = "detail-details"> < /g> < /g> < /g> id = "build"> id = "build-bar" /> id = "build-arrow" /> id = "čas zostavenia"> < /g> id = "build-badge"> id = "build-circle" /> id = "názov-zostavy"> < /g> id = "podrobnosti o zostave"> < /g> < /g> < /g> id = "sťažnosť"> id = "complain-bar" /> id = "šípka sťažnosti" /> id = "čas sťažnosti"> < /g> id = "odznak sťažnosti"> id = "kruh sťažností" /> id = "názov sťažnosti"> < /g> id = "detaily sťažnosti"> < /g> < /g> < /g> id = "pivo"> id = "pivný bar" /> id = "pivo-šípka" /> id = "čas na pivo"> < /g> id = "pivný odznak"> id = "pivný kruh" /> id = "názov piva"> < /g> id = "detaily o pive"> < /g> < /g> < /g> < /g>

Vyššie uvedené označenie nám ukazuje štruktúru, ku ktorej smerujeme.

Ako môžeme vidieť v našom označení SVG, každý tag ukazuje na nová skupina objekty, ktoré sa môžu nachádzať v rámci iných skupín. Samozrejme, pri vytváraní SVG nie je potrebné predpísať id pre každý objekt / skupinu, ale v budúcnosti bude pohodlnejšie pre prístup cez CSS alebo JavaScript a ľahšie rozpoznateľné v značkách.

Načítava sa SVG do HTML pomocou JAVASCRIPT

Html

Existujú spôsoby, ako zahrnúť alebo umiestniť SVG do HTML. To je možné pomocou značky , tag alebo pomocou CSS vlastnosti'Obrázok na pozadí. Pre naše účely potrebujeme prístup k DOM vo vnútri SVG. Budeme používať HTML5. Načítajte SVG priamo na stránku pomocou jQuery.

Najprv vytvorte div v našom dokumente HTML:

JavaScript

Teraz sa používa nahrávanie jQuery, načítajte súbor SVG do bloku #stage a priraďte mu triedu svgLoaded, ktorú použijeme na spustenie animácie:

$ (funkcia () ($ ("# fáza") .load ("interactive.svg", funkcia (odpoveď) ($ (toto) .addClass ("svgLoaded"); ak // Úplne sa uistite, že to máte spustené na webovom serveri alebo localhost! } } ) ; } ) ;

Dôležité: načítanie SVG pomocou JavaScriptu za účelom prístupu k jeho DOM. Chrome (a možno aj iné prehliadače) vám to lokálne neumožnia; to bude fungovať iba pri spustení s HTTP protokol z bezpečnostných dôvodov.

CSS

Všimnite si, že CSS v tomto návode nebude obsahovať žiadne špecifikácie prehliadača, ale budú v súboroch.

Najprv špecifikujeme niektoré štýly pre div blok... Pri načítavaní SVG sa súbor musí zhodovať s veľkosťou bloku, preto je dôležité nastaviť veľkosť bloku tak, aby zodpovedala veľkosti SVG plátna.

#stage (šírka: 1024px; výška: 1386px;)

Styling prvkov SVG: nastavenie „transform-origins“

Kľúčom k animácii prvkov v rámci plátna je vlastnosť transform-origin. V predvolenom nastavení všetky transformácie akéhokoľvek prvku v SVG pochádzajú z (0px, 0px) SVG plátna. Pre každý prvok, ktorý chceme transformovať (napr. mierka, rotácia), musíme nastaviť vhodný pôvod transformácie vzhľadom na ľavú a hornú stranu SVG plátna. Počiatok sa bude líšiť od každého prvku v závislosti od požadovaného efektu / animácie, ale vo väčšine prípadov sa bude rovnať stredovému bodu, kde je prvok už umiestnený. Môže to byť dosť únavné, ale je jednoduchšie jednoducho skopírovať informácie o súradniciach, ktoré sú prezentované v našom vektorovom editore.

#coffee (transform-origin: 517px 484px;) # coffee-badge (transform-origin: 445px 488px;) # coffee-title (transform-origin: 310px 396px;) # coffee-details (transform-origin: 311px 489px;) #design (transform-origin: 514px 603px;) # design-badge (transform-origin: 580px 606px;) # design-title (transform-origin: 712px 513px;) # design-details (transform-origin: 710px 620px;) #build (transform-origin: 511px 769px;) # build-badge (transform-origin: 445px 775px;) # build-title (transform-origin: 312px 680px;) # build-details (transform-origin: 310px 790px;) #complain (transform-origin: 512px 1002px;) # Claim-badge (transform-origin: 586px 1000px;) # Claim-title (transform-origin: 718px 921px;) # Claim-details (transform-origin: 717px 1021px;) #beer (transform-origin: 513px 1199px;) # beer-badge (transform-origin: 444px 1193px;) # beer-title (transform- pôvod: 313px 1097px; ) # podrobnosti o pive (transform-origin: 316px 1202px;)

Uplatnenie niektorých počiatočných transformácií

Na zmenu polohy niektorých objektov musíme nastaviť počiatočné štýly. A tiež je potrebné sa skrývať určité predmetyže nechceme ukázať, kým sa nad nimi nepohneme.

Aby sme to dosiahli, použijeme Selektor CSS... V podstate vyberáme objekty s id „príponami“.

[id $ = odznak] ( / * Akýkoľvek prvok s ID, ktoré končí na "odznak" * / transformácia: mierka (0. 5 , 0 .5 ); ) [id $ = názov] (transformácia: mierka (1. 8 ) preložiť (0px, 48px); ) [id $ = podrobnosti] (transformácia: mierka (0, 0);)

Pridanie štýlu pre: umiestnenie kurzora myši a použitie prechodov

Vyberieme prvky v rámci vznášajúcej sa skupiny a zmeníme ich späť na východisková pozícia. Potom nastavíme prechod 0,25 s pre skvelý animačný efekt.

#timeline> g: visieť kurzorom [id $ = odznak], #timeline> g: visieť myšou [id $ = podrobnosti] (transformácia: mierka (1, 1);) #timeline> g: visieť myšou [id $ = názov] (transformácia : mierka (1) preložiť (0px, 0px);) [id $ = odznak], [id $ = názov], [id $ = podrobnosti] (prechod: transformácia 0,25 s uvoľnenie von;)

Úvod do animácie

Používame CSS animácia... Najprv musíte vytvoriť niekoľko kľúčových snímok na animáciu niektorých rôznych vlastností CSS:

@keyframes left-brace-intro ( 0 % (transformácia: translateX (220px); nepriehľadnosť: 0;) 50 % (nepriehľadnosť: 1; transformácia: translateX (220px);) 100 % (transformácia: translateX (0px);)) @keyframes pravá-zátvorka-úvod ( 0 % (transformácia: translateX (-220px); nepriehľadnosť: 0;) 50 % (nepriehľadnosť: 1; transformácia: translateX (-220px);) 100 % (transform: translateX (0px);)) @keyframes fade-in ( 0 % (nepriehľadnosť: 0 ;) 100 % (nepriehľadnosť: 1;)) @keyframes grow-y ( 0 % (transformácia: stupnicaY (0);) 100 % (transformácia: scaleY (1);)) @keyframes grow-x ( 0 % (transformácia: scaleX (0);) 100 % (transformácia: scaleX (1);)) @keyframes rastú ( 0 % (transformácia: mierka (0, 0);) 100 % (transformácia: mierka (1, 1);))

Vytvorenie animačnej sekvencie

Môžeme použiť selektory založené na triede svgLoaded, ktorú sme použili predtým.

Opýtať sa animačná sekvencia, nastavte vlastnosť animation-delay a nastavte animation-fill-mode: dozadu, aby bola animácia pozastavená.

SvgLoaded #logo (animácia: zoslabenie 0,5s uvoľnenie-výstupu;) .svgLoaded #quot-text (animácia: zoslabenie 0,5s uvoľnenie-výstupu 0,75s; režim vyplnenia animácie: spätne ;) .svgLoaded # quote-left-brace (animácia: ľavá-zátvorka-úvod 1s uvoľnenie-v-out 0,25s; režim vyplňovania animácie: dozadu;) .svgLoaded # quote-right-brace (animácia: pravá- brace-intro 1s easy-in-out 0.25s; animation-fill-mode: backwards;) .svgLoaded #background (animácia: grow-y 0.5s easy-in-out 1.25s; transform-origin: 512px 300px ; režim vyplnenia animácie: dozadu;) .svgLoaded #background> g (animácia: rast-x 0,25 s nabehnutie nahor 1,75 s; režim vyplnenia animácie: dozadu;) .svgLoaded #pozadie> g: last-of-type (transform-origin: 458px 877px;) .svgLoaded #background> g: first-of-type (transform-origin: 563px 877px;) .svgLoaded #coffee, .svgLoaded #design, .svgLoaded #build .svgLoaded #complain, .svgLoaded #beer (animácia: rast 0 .25s easy-in-out; animačný-fill-mode: dozadu; ) .svgLoaded #coffee (oneskorenie animácie: 2 s;) .svgLoaded #design (oneskorenie animácie: 2 ,25 s;) .svgLoaded #build (oneskorenie animácie: 2,5 s;) .svgLoaded #complain: (animácia 2 ,75 s;) .svgLoaded #beer (oneskorenie animácie: 3 s;)

WEB fonty

Keďže sme v našom súbore SVG použili vlastné písma, musíme ich zahrnúť aj na našu webovú stránku. Je dôležité zadať správny názov fontu, ktorý bol použitý pri exporte SVG. Otvoríme súbor SVG v textovom editore a len nájdeme text, kde bolo použité písmo, a pozrieme sa na vlastnosť font-family:

12:00

Ako vidíme, súbor SVG bol exportovaný pomocou rodiny fontov s názvom „LeagueGothic“... Musíme teda definovať webové písmo v CSS pomocou presne rovnakého názvu.

@ font-face (rodina fontov: "LeagueGothic"; url ( "../fonts/league-gothic/league-gothic.eot.woff") formát ("woff"); )

To je všetko! Dúfame, že sa vám návod páčil a považovali ste ho za užitočný a poučný. Budeme radi, ak si vypočujeme vaše pripomienky.

Preklad - Pracovná miestnosť.