Vytváření Ticker Bannerů Krok za Krokem

Jak vytvořit hladký automatický horizontální posun textu, který upoutá pozornost bez rušivého efektu na čitelnost obsahu.

12 min čtení Pokročilý Březen 2026

Webový design s animovaným textovým bannerem pohybujícím se horizontálně přes obrazovku

Co je Marquee Ticker Banner?

Ticker banner je automaticky pohybující se textový prvek, který plynule posunuje obsah zleva doprava nebo naopak. Používá se pro oznámení, novinky, ceny akcií nebo důležité zprávy. Když se to dělá správně, přitáhne pozornost bez toho, aby to rukovalo uživateli v čtení.

Klíč je v rovnováze. Chcete, aby se to pohybovalo dost rychle na to, aby to bylo zajímavé, ale ne tak rychle, aby si toho člověk nemohl přečíst. Chcete také, aby se to zastavilo, když na to někdo najede myší — to je důležité pro přístupnost.

                  Proč to používat?
                
                    Upoutá pozornost bez agresivnosti
                  
                    Šetří prostor na stránce
                  
                    Funguje pro aktuální obsah a oznámení
                  
                    Vylepšuje vnímání značky

Základní HTML Struktura

Všechno začíná správným HTML. Nejjednoduší přístup je vytvořit kontejner, který obsahuje text, který se bude pohybovat. Text musí být v elementu, kterému můžete aplikovat CSS animaci.

Struktura je velmi přímá. Máte vnější kontejner, který se chová jako okno — skryje cokoliv, co přesahuje hrany. Uvnitř je prvek, který obsahuje samotný text a pohybuje se pomocí CSS animace.

Základní HTML:

<div class="ticker-container">
    <div class="ticker-content">
        Vaš text, který se bude pohybovat...
    </div>
</div>

Vnější div má overflow: hidden , což zabrání tomu, aby se text objevil mimo jeho hranice. Vnitřní div se pak pohybuje pomocí CSS animace keyframes.

Diagram HTML struktury ticker banneru s vnějším kontejnerem a vnitřním pohyblivým prvkem

Příklad CSS kódu pro animaci marquee s keyframes a nastavením délky animace

CSS Animace a Timing

Tady se začíná dít to zajímavé. CSS animace je to, co dává tickeru život. Máte dva klíčové prvky — keyframes, které definují pohyb, a vlastnosti animace, které řídí, jak rychle se to pohybuje.

Optimální rychlost se pohybuje mezi 20 až 40 sekundami pro jednu smyčku. To dává čtenářům čas přečíst si text bez pocitu, že jsou pospícháni. Když je to rychlejší než 15 sekund, začíná to být stresující. Když je to pomalejší než 60 sekund, začíná to být nudné.

Doporučené Časy Animace

Krátký text (do 50 znaků): 15-20 sekund

Středně dlouhý text (50-150 znaků): 25-35 sekund

Dlouhý text (více než 150 znaků): 40-50 sekund

Pauza Při Najetí Myší (Hover State)

Přístupnost je kritická. Ne každý si všimne pohybujícího se textu okamžitě, a někteří to mohou najít obtěžující. Proto je důležité umožnit uživatelům zastavit animaci, když na ni najede myší.

To se provádí pomocí animation-play-state: paused v CSS :hover stavu. Když si uživatel vezme myš a najedete na ticker, animace se okamžitě zastaví. Jakmile se myš posune pryč, animace se znovu spustí.

CSS pro Pause-on-Hover:

.ticker-container:hover .ticker-content {
    animation-play-state: paused;
}

To je všechno, co potřebujete. Jeden řádek CSS a už máte funkcionalitu, která je přístupná a uživatelsky přívětivá. Bez toho by byl ticker problémem pro lidi se zhoršenou pozorností nebo dyslexií.

Interaktivní demo ticker banneru, kde se text zastaví při najetí myší

Stylování Podle Vašeho Designu

Ticker nemusí být nudný. Barvy, fonty a pozadí — všechno se dá přizpůsobit. Klíč je zajistit, aby se to shodovalo s vaším celkovým designem webu. Pokud máte minimalistický design, ticker by měl být také minimalistický. Pokud máte odvážný design, ticker to může odrážet.

Barvy a Kontrast

Zajistěte dostatečný kontrast mezi textem a pozadím. Nepoužívejte světlý text na světlém pozadí. Minimálně 4.5:1 poměr kontrastu je standard pro přístupnost.

Typografie

Používejte bez-serifové fonty pro web. Arial, Helvetica, nebo modernější volby jako Inter nebo Roboto fungují lépe. Velikost textu by měla být čitelná — minimálně 14px.

Pozadí a Padding

Přidejte nějaký padding kolem textu. Ticker s textem tučně proti pozadí bez mezer vypadá stísněně. 12-16px padding vlevo a vpravo je obvyklé.

Sladěný Design

Barva pozadí tickeru by měla být buď primární barva vašeho webu, nebo subtilní akcentová barva. Nepoužívejte zcela cizí barvu — to rozbije vizuální hierarchii.

Příklady různých stylování ticker bannerů — tmavý design, světlý design, barevné varianty

Nejlepší Praktiky a Pitfalls

Dělejte To Správně

Otestujte čitelnost v různých rozměrech obrazovky
Zastavte animaci, když se uživatel přiblíží
Použijte adekvátní barvu a kontrast
Zvolte vhodnou délku textu

Vyvarujte Se Toho

Nikdy bez pause-on-hover (přístupnost!)
Příliš rychlá animace je frustrující
Příliš dlouhý text — zkraťte si ho
Blikající efekty bez smyslu

Ticker je mocný nástroj, ale pouze když se používá správně. Mnoho webů ho nadužívá nebo jej nastavuje tak, že je více rušivý než užitečný. Klíčem je subtilita — měl by upozorňovat, ne zdeptat.

Upozornění a Poznámky

Informace v tomto průvodci jsou určeny pouze pro vzdělávací účely. Implementace ticker bannerů se může lišit v závislosti na vaší platformě, CMS nebo frameworku. Vždy testujte na vašem cílovém zařízení a prohlížeči. Pokud máte přístupnostní obavy, zvažte konzultaci s expertem na webovou přístupnost.

Závěr: Ticker, Který Funguje

Vytváření ticker banneru není složité — je to spojení správné HTML struktury, CSS animace a pozornosti na detaily. Tím, že budete mít na paměti čitelnost, přístupnost a design, vytvoříte něco, co je jak vizuálně zajímavé, tak funkční.

Pamatujte si to: ticker by měl upozorňovat, ne rozptylovat. Měl by se pohybovat dost rychle, aby přitáhl pozornost, ale dost pomalu, aby byl čitelný. A hlavně — uživatelům by měl dát možnost ho zastavit, když chtějí.

Zpět na Marquee Ticker Design