Vytvoření posuvníku — HTML struktura a CSS
Krok za krokem vysvětlení HTML značek a CSS stylů. Naučíte se, jak strukturovat dva obrázky a vytvořit handle pro interakci.
JavaScript pro interaktivní posuvník — Funkcionalita tažení
Naprogramujte draggable efekt, handlery pro myš a dotek, detekci pozice kurzoru a aktualizaci obrázku v reálném čase. Naučte se, jak vytvořit plynulou interakci, kterou uživatelé budou rádi používat.
Jak funguje interaktivní posuvník
Víte, co dělá posuvník opravdu zajímavým? Není to jenom vizuální prvek — je to zkušenost. Když uživatel chytí handle a táhne ho po obrazovce, mělo by to terčovat hladce a bez zpoždění. To je právě to, čemu se věnujeme v tomto článku.
JavaScriptový draggable mechanismus je základem celé interakce. Budeme pracovat s event listenery pro myš (mousedown, mousemove, mouseup) a s touch eventy pro mobilní zařízení (touchstart, touchmove, touchend). Klíčová je přesná detekce pozice kurzoru a její transformace na pozici posuvníku.
Když se vše naprogramuje správně, bude váš posuvník reagovat okamžitě na pohyb myši a prstů — bez trhavého chování, bez zpoždění.
Základní struktura event listenerů
Nejdříve si musíte uvědomit, jak probíhá interakce s myší. Uživatel stiskne tlačítko myši (mousedown), pak pohybuje myší (mousemove) a nakonec ji pustí (mouseup). Váš JavaScript musí poslouchat všechny tři tyto momenty.
Pro dotyková zařízení je to podobné — touchstart místo mousedown, touchmove místo mousemove a touchend místo mouseup. Nejjednodušší přístup? Kombinujte oba typy eventů. To je přesně to, co uděláme.
- Poslouchejte mousedown nebo touchstart na handleru
- Při pohybu (mousemove/touchmove) aktualizujte pozici
- Na mouseup/touchend zastavte sledování pohybu
- Vypočítejte procentuální pozici v rámci kontejneru
Detekce pozice kurzoru a myši
Tady začíná matematika. Když uživatel pohybuje myší, potřebujete vědět, kde je kurzor vzhledem k vašemu posuvníku. Funkce `getBoundingClientRect()` vám řekne, kde se váš element nachází na stránce. Vlastnosti event objektu (`clientX`, `clientY`) vám řeknou, kde je kurzor.
Odečtením souřadnic posuvníku od souřadnic kurzoru získáte relativní pozici. Vydělením šířkou posuvníku dostanete procentuální hodnotu od 0 do 1. A už víte, kam přesunout handle — to je přesně 35% nebo 72% nebo cokoliv dalšího.
Klíčový kód:
const rect = slider.getBoundingClientRect(); const position = (event.clientX – rect.left) / rect.width;
Důležité upozornění
Obsah tohoto článku je poskytnut pro vzdělávací účely. Konkrétní implementace se může lišit v závislosti na vašem projektu, knihovnách a cílových zařízeních. Vždy otestujte váš kód na skutečných zařízeních a prohlížečích. Při optimalizaci pro výkon zvažte možnosti jako throttling a requestAnimationFrame.
Optimalizace pro hladký výkon
Nemůžete prostě tak poslouchat `mousemove` bez nějaké strategie. Tenhle event se spouští desítky nebo stovky krát za sekundu. Pokud budete na každý event provádět těžké výpočty nebo překreslování, váš posuvník se bude chovat trhavě.
Zde jsou tři techniky, které vám pomohou: První je `requestAnimationFrame()` — synchronizuje vaše aktualizace s obnovovací frekvencí obrazovky (60 fps). Druhá je throttling — spustíte callback jen jednou za určitý čas, třeba každých 16 milisekund. Třetí je zjednodušení — přesuňte těžké výpočty mimo mousemove event.
1
Používejte `requestAnimationFrame()` pro aktualizace pozice
2
Implementujte throttling pro mousemove event
3
Minimalizujte DOM manipulace — aktualizujte jen to, co se změnilo
Podpora pro dotyková zařízení
Mobily a tablety jsou dnes nezbytné. Touch eventy fungují trochu jinak než myš. Event objekt má vlastnost `touches`, která obsahuje pole všech aktuálních dotykových bodů. Vezmete první dotek (index 0), a pak je to stejné jako s myší — `clientX` a `clientY`.
Pozor na jednu věc: touch event se spouští i když se váš prst pohybuje mimo element. Musíte si pohlídat, abyste se na to připravili. Také si pamatujte, že na dotykových zařízeních neexistuje “hover” — handle se může zvýraznit jinak, třeba když je aktivní.
Nejjednoduší řešení? Kombinujte oba eventy v jednu funkci. Použijte `(event.touches && event.touches[0]) || event` a máte univerzální kód, který funguje všude.
Váš posuvník je připraven
Nyní víte, jak vytvořit interaktivní srovnávací posuvník, který bude fungovat hladce na všech zařízeních. Kombinace správných event listenerů, detekce pozice a optimalizace výkonu vám dá základ pro něco opravdu dobrého.
Pamatujte si — detaily dělají rozdíl. Hladký pohyb, okamžitá odezva, bezproblémová práce s dotykový zařízením. To je to, co uživatele nadchne. Vaš posuvník bude vypadat a chovat se jako profesionální komponenta, kterou lidé budou rádi používat.
Nebojte se experimentovat. Přidejte animace, zvuky, nebo další efekty. JavaScript vám dává svobodu. Užijte si ji.