JavaScript pro interaktivní posuvník — Funkcionalita tažení
Naprogramujte draggable efekt. Handlery pro myš a dotek, detekce pozice kurzoru a plynulé přesouvání obrázků.
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 připravit je na interakci s plynulými animacemi a responzivním chováním.
Proč je správná HTML struktura důležitá
Srovnávací posuvník se zdá jednoduchý na pohled, ale jeho výkon závisí na tom, jak jej postavíte. Dobře strukturovaný HTML vytváří základ pro plynulé interakce a výkon na všech zařízeních. Není to jen o kódu — je to o přístupnosti a uživatelském zážitku.
V tomto článku se podíváme na praktický přístup. Začneme tím, jak vrstvit obrázky, pokračujeme CSS styly a skončíme na optimalizacích. Každý krok má jasný účel.
Co se naučíte
- Jak organizovat dva obrázky v HTML
- Stylování kontejneru a dělicí čáry
- Příprava pro JavaScript interakci
- Responzivní design na mobilech
Základní HTML struktura
Posuvník se skládá ze tří hlavních vrstev. Vnější kontejner drží všechno pohromadě. Uvnitř je obrázek “před” — to je ten, který se zobrazuje na začátku. A pak je tam vrstva “po” s dělicí čárou, kterou uživatel přetahuje.
Struktura vypadá takto: jeden wrapper obsahuje oba obrázky. Obrázek “po” je umístěn absolutně, takže se může překrývat. A dělicí čára je malý prvek, kterým se manipuluje. Prosté, ale účinné.
HTML značky
<div class="slider-container">
<img src="before.jpg" alt="Před" class="slider-img">
<div class="slider-overlay">
<img src="after.jpg" alt="Po" class="slider-img">
</div>
<div class="slider-handle">
<span class="slider-arrow"></span>
</div>
</div>
CSS pro správný layout
CSS je místo, kde se děje kouzelství. Kontejner musí mít relativní pozicování — to vytváří kontext pro absolutně pozicované prvky. Obrázek “po” se pak umístí na stejné místo jako “před”, ale vidíte jen část.
Dělicí čára — to je důležitá část. Musí být přesně v tom místě, kde se má posouvat. A její handlery? Ty by měly být dostatečně velké na klikání, minimálně 44 pixelů. Není to jen design — je to usability.
position: relative
na kontejneru — tvoří positioning context
position: absolute
na overlay vrstvě — umožňuje překrytí
overflow: hidden
skrývá obsah mimo kontejner
width: 100%
obrázky vyplňují kontejner
Responzivní design a media queries
Posuvník na mobilu musí fungovat stejně dobře jako na desktopu. A to znamená pečlivé zvažování velikostí. Obrázky se musí škálovat bez ztráty kvality. Dělicí čára zůstává na stejném místě, ale obsah kolem ní se mění.
Nejjednoduší přístup? Používejte relativní jednotky. Procenta pro šířku, viewportu pro padding. A pak přidejte media query — třeba na 768 pixelech — kde upravíte handlery na větší velikost, protože na malém displeji jsou méně přesné.
Příklad media query
@media (max-width: 768px) {
.slider-handle {
width: 60px;
height: 60px;
}
}
Informace k článku
Tento článek je vzdělávacího charakteru a popisuje techniky a principy tvorby posuvníků pro webové stránky. Kód a metody jsou vhodné pro výuku a experimenty. Konkrétní implementace se může lišit v závislosti na vašich potřebách, prohlížeči a technologiích, které používáte. Vždy testujte na svých cílových zařízeních.
Máte základy, co dál?
HTML a CSS jsou jen začátek. S touto strukturou jste připraveni přidat JavaScript, který bude sledovat pohyb myši a dotyky. Posuvník se stane interaktivním a skutečně užitečným.
Příště se podíváme na JavaScript — jak detekovat, kde je kurzor, jak plynule animovat změny, a jak zajistit, aby vše fungovalo na mobilech. To je místo, kde se statická struktura mění v živou, responsivní komponentu.
Chcete se dozvědět více o funkcionálnosti?
Čtěte JavaScript částSouvisející články
