Koncem dubna 2016 jsme vymysleli vlastní řešení ilayerů.
Ilayer je v našem pojetí HTML banner jako každý jiný, liší se jen tím, že při najetí myší po patřičné pauze změní své rozměry. Přesněji řečeno, roztáhne se <iframe>, v němž je stránka banneru nalistovaná.
Indikaci sekundu a půl trvající pauzy zařídí náš skript. Zavírací křížek do pravého horního rohu doplní také náš skript. O logiku otevírání/zavírání se nemusíte starat, podobu křížku ani indikace nemůžete ovlivnit, ani nemůžete skriptem vyvolat zavření.
Ve všech ohledech platí pro ilayery stejné podmínky jako pro standardní bannery, krom limitu pro maximální velikost, který jsme stanovili na 120 kB. Připomínáme, že platí i pravidlo o přiměřeném využívání limitů.
Žádná část rozbalené ilayerové stránky nesmí být příliš průsvitná. Pokud se banner rozbaluje přes obsah, uživatel musí jednoznačně vidět, kde končí prostor banneru (aby při kliku věděl, jestli kliká do obsahu nebo do banneru). Reklama nemůže vytvářet dojem, že není obdélníková.
Pokud má banner při rozbalení obsahovat video, nesmí se soubor s videem začít stahovat dříve, než dojde k prvnímu rozbalení – element <video> musí mít atribut preload="none", musí mít vyplněný poster (klidně s průsvitným GIFem, důležité je, aby prohlížeč neměl motivaci sáhnout si pro video) a nesmí mít atribut autoplay.
Podmínit zobrazení/skrytí prvků banneru stavem rozbalení jde přes @media queries.
#rozbalena-vrstva { display: none }
@media (min-height: 201px) {
#rozbalena-vrstva { display: block }
}
Případně můžete zadávat rozměry elementů v procentech a ony se pak roztáhnou podle dostupného místa.
Z hlediska skriptů vyvolává rozbalení/zabalení událost onresize – tu můžete odchytit a nějak zpracovat – třeba spustit video při rozbalení výšky na 600 pixelů:
window.onresize = function()
{
if(window.innerHeight >= 600)
{
document.getElementsByTagName("video")[0].play();
window.onresize = null;
}
};
window.onresize();
Co se kompatibility týče, naše rozbalování funguje pouze v novějších prohlížečích. Starší prohlížeče (konkrétně Internet Explorer verze 9 a nižší) zobrazí pouze nerozbalenou podobu. Upozorňujeme, že Explorer 8 nepodporuje @media queries, takže doporučujeme, aby logika v banneru byla spíš „pokud je výška vyšší než X, zobrazuj to a to“, než „pokud je výška nižší než X, skryj to a to“.
Většina ilayerů mívá stejné či velmi podobné grafické podklady v obou složkách banneru, které by se načítaly zbytečně dvojmo. Rozšířit existující plně načtený banner je rychlejší a plynulejší, než načítat při najetí kurzoru dodatečně nějaký další.