Vhodné postupy při konstrukci banneru

Jako ideální postup se v současnosti jeví nakódovat banner v HTML a CSS, konkrétně tak, že:

• V HTML jsou elementy <div> nebo <img>.
• Tyto elementy obsahují vhodně připravené obrázky a jsou přes CSS absolutně napozicované na správná umístění.
• CSS vlastností transition je každému nastavena doba, jak dlouho se mají přeměňovat vlastnosti.
• Skriptem se mění třída rodičovského elementu, která způsobí změnu hodnot vlasností.

Při takovémto postupu starší prohlížeče neznající vlastnost transition přepínají stavy neanimovaně, což je dobrý kompromis.

Pár ukázek:

• Superb – pět jednoduchých kroků, 31 kB.
• Philips – deset kroků, 49 kB.
• T-Cloud – deset kroků, 26 kB.
• Dacia – třináct kroků, 37 kB.
• Nissan – čtrnáct kroků, 72 kB.
• KB – jedenáct kroků, obsahuje logo ve formátu SVG, 30 kB.
• Carollinum – video následované pěti kroky animace a myší ovladatelným posuvníkem, 22 kB (+ 130 kB po skončení videa).
• Manner – tři nezávislé animace, 75 kB.
• T-Mobile – tři jednoduché jednorázové změny pozice a průsvitnosti, 41 kB.
• Huawei – plynulý přechod mezi dvěma kvalitními obrázky, 51 kB.

Postup s animation

CSS vlastnost animation dělá animace sama bez toho, aby JS musel něco měnit. Její nevýhodou je, že když ji prohlížeč nezná, uživatel kouká na statický první snímek.

Další nevýhoda souvisí s vendor prefixy. Zatímco s transition stačí zopakovat jeden řádek (-webkit-transition), při animation se musí zkopírovat i celá mohutná větev @keyframes, což pak i komplikuje dodatečné změny.

Prefix -webkit dodnes potřebují některé používané tablety. Zatímco při vynechání prefixované verze u postupu s transition hrozí jen to, že přechody mezi stavy budou skokové (což není tragédie), u animation hrozí zobrazení jen statického prvního snímku…

Ukázka:

• Raiffeisen – dva animované prvky, 38 kB.
• Strepfen – složitější kombinace několika animací, 88 kB.

Složitější efekty

Ani na komplikovanější činnosti není nutné načítat stovky kilobajtů skriptů. Můžete se inspirovat ukázkami naší výroby:

• Spritz – mobilní kostka, pětice střídajících se obrázků, posun automaticky nebo tahem prstu, skript má 4 kB.
• Chytrý formulář na daně – s živým odpočtem času do koncem března, skript má 2 kB.

Kdy používat background a kdy <img>

Obrázek na pozadí jde pohodlně měnit přes CSS při změně třídy a může se opakovat.

Obrázek přes <img> nemusí mít nastavené rozměry (pokud jej nechcete zdeformovat) a oddaluje globální událost onload. Chcete-li změnu tříd nastartovat až po zaručeném načtení všeho, použijte <img>.

Pokud použijete <img>, nezapomeňte vynulovat border.