HTML5 se nešourá ve smyslu pomalé animace, ale jeho nástup byl mnohem pomalejší než si odborníci představovali. Z mého hlediska byly důvody dva. Největší poskytovatelé reklamy dlouho neměli na HTML5 bannery „kalkulaci” a neexistoval schopný grafický editor na vytváření HTML5 bannerů. První pokusy, jak jsem uvedl v části o Flash, spočívaly v konverzi hotových Flash animací do HTML5. Později se objevily první aplikace, například Adobe Edge Animate, a online nástroje. Bohužel online nástroje většinou spočívaly pouze v úpravách již hotových šablon. Adobe Edge Animate navíc vedle Adobe Flash editoru vypadal jako velmi chudý příbuzný. Kvalitní HTML5 bannery tak vznikaly jako náročné programátorské projekty nebo modifikované šablony.
HTML5 banner totiž není jedinný formát, ale spojení značkovacího jazyka HTML verze 5, kaskádových stylů verze 3, Javaskriptu a případných bitmapových příloh. Co to připomíná? Ano, webovou stránku. HTML5 banner je taková malá webová prezentace se vším všudy. A právě proto, že tato technologie nabízí úplnou volnost tvůrci projektu, museli hostitelé reklamy vymyslet, jak tuto technologii uchopit. Z jejich pohledu je třeba na banneru vydělat, nenabídnout tvůrci úplnou svobodu z důvodu ohrožení vlastní webové prezentace a obcházení účtovacích mechanismů. Jde o to, že jsou nuceni umístit cizí kód do svého vlastního. V současné době se tedy HTML5 banner nejčastěji realizuje umístěním do tagu IFRAME a před uveřejněním probíhá kontrola použitého kódu.
Vývoj HTML5 banneru je tedy vývoj samostatné webové prezentace. Vše co nabízí dnešní web může tento banner také nabídnout. Je tedy možné vytvořit banner jak v textovém editoru (například PsPad), což může být velmi náročné díky složitému programování pohybů, nebo lze využít online nástroje s univerzálními šablonami, případně desktopové aplikace. Méně animované HTML5 bannery vytvoříte v jakémkoli HTML editoru včetně Adobe DreamWeaveru a jemu podobným, ale uživatelskému prostředí Flash editoru se nejvíce blíží aplikace Adobe Edge Animate a Google Web Designer.
Technologické zajímavosti: animujeme vlastně HTML tagy, tedy DIVy, odstavce P, seznamy apod. Můžeme využít nejen bitmapy (JPEG, GIF, PNG), ale díky podpoře v HTML5, i vektorový formát SVG, který svou skriptovou podobou nabízí práci s jednotlivými prvky obrázku v rámci CSS i Javaskriptu. Někdy je lepší animovat v CSS3 než měnit polohu pomocí Javaskriptu. CSS3 transformace totiž v prohlížečích podporují hardware akceleraci. SVG je zvláště vhodný pro tzv. „responzivní” design pro malé displeje, protože škálování vektorů nepoškozuje kvalitu obrázku. Výsledný HTML5 projekt může být jen jediný HTML soubor, ale rovněž balík souborů včetně samostatných nebo vložených obrázkových příloh. Datové limity se pohybují kolem 100KB (iDnes).
V tomto příkladě jsem využil aplikaci Google Web Designer. Jedná se o aplikaci zdarma a jediný požadavek je nainstalovaný Google Chrome prohlížeč. Tato aplikace je stále v beta verzi, proto doporučuji častější ukládání, ale jinak jsem se nesetkal s vážnějšími problémy. Prostředí se stane rychle intuitivní, pokud pochopíte základní věc, že animujete web a ne grafiku. Pak se prvotní hledání objektů a symbolů změní na rychlou práci s HTML tagy a jejich CSS atributy. Obsahuje již mnoho hotových komponent jako Youtube video, dotyková tlačítka (touch areas) a podobně. Implementace Google fontů je rovněž dílem dvou kliků myši. Zaznamenal jsem zatím dvě malé komplikace, trochu horší ovládání časové osy (osa je přiliš drobná), a trochu složitější implementaci nekonečného opakování banneru - je třeba opakovat všechny vrstvy nebo vytvořit dvě obrazovky, které na sebe odkazují. Nicméně dle Google zaměstnanců se na tom pracuje.
V animaci níže využívám hardwareově akcelerované CSS3 transformace do prostoru (otáčení listů), dotykovou plochu, obrazovou přílohu a Youtube video se zvukem.