Fallback Řešení pro Dotykové Zařízení

Proč vůbec fallback potřebujete

Spotlight efekt, který sleduje pohyb kurzoru myši, vypadá nádherně na desktopu. Ale na tabletech a mobilech? Tam se to prostě nedá dělat stejně. Není tam kurzor, je tam jen dotyk. A když uživatel přestane dotýkat displeje, efekt zůstane na místě kde skončil — to není zrovna interaktivní.

Fallback řešení vám umožní, aby všichni uživatelé — bez ohledu na zařízení — viděli zajímavý osvětlovací efekt. Jen se bude chovat jinak. Na mobilech to bude statické, pohyb se animuje sám. Na desktopu kurzor sleduje myš. Všichni jsou spokojení.

Nic se nemusí “zablokovat” nebo skrývat. Prostě poskytnete každému uživateli to, co jeho zařízení umožňuje. Je to féérové a inteligentní.

Detekce dotykových zařízení

Prvním krokem je poznat, zda má uživatel dotykové zařízení. Máte dvě možnosti: JavaScript nebo CSS. Obě fungují, ale liší se přístupy.

CSS media query @media (hover: none) detekuje, jestli zařízení vůbec podporuje hover stav. Pokud ne — máte tablet nebo mobil. To je nejjednoduší řešení a nežádá JavaScript. Ale CSS media query sama neví, jestli se bude dít animace kurzoru. Je to jen příznak.

JavaScript vám dá více kontroly. Pomocí navigator.maxTouchPoints zjistíte počet dotykových bodů. Má-li zařízení 0 bodů — je to desktop bez dotyku. Má-li 1 či víc — je to dotykové zařízení. Na základě toho můžete vykonat různý kód.

Profesionálové často kombinují oboje. CSS pro základní styling, JavaScript pro chování. Tak máte jistotu, že to bude fungovat i bez JavaScriptu.

Statická animace místo kurzoru

Na mobilech nemůžete “sledovat kurzor”, protože žádný kurzor neexistuje. Ale můžete animovat spotlight tak, aby se pohyboval sám. Třeba kruh světla, který se pomalou animací pohybuje po obrazovce, krouží kolem, zmizel a znovu se objevil.

CSS animace vám postačí. Definujte keyframes, která mění pozici spotlight efektu — od horního levého rohu, přes střed, do pravého dolního rohu, a zpět. Trvání animace by mělo být 8–12 sekund. Takový pohyb není rušivý a stále zvyšuje vizuální zajímavost stránky.

Alternativa: umístěte spotlight do pevné pozice (třeba uprostřed obrazovky) a nechte jen intenzitu zářit — pulsovat. Efekt je subtilnější, ale stále přítomný. Uživatelé mobilů si všimnou, že něco svítí zajímavě, a bude to vypadat jako součást designu, ne jako bug.

Praktická implementace

Tady je konkrétní přístup: Na desktopu běží JavaScript, který sleduje kurzor a pohybuje spotlight efekt v reálném čase. Když se JavaScript nespustí nebo se jedná o dotykové zařízení, spadnete na CSS animaci.

V HTML máte kontejner s třídou, která se změní na základě detekce. Pokud je to desktop s podporou JavaScriptu, přidáte třídu spotlight-interactive . Pokud je to dotykové zařízení, přidáte třídu spotlight-animated . CSS pak styluje oba stavy jinak.

Pro spotlight-interactive: JavaScript mění CSS vlastnosti --spotlight-x a --spotlight-y podle pozice kurzoru. Spotlight se pohybuje hladce, je to interaktivní.

Pro spotlight-animated: CSS keyframes animují --spotlight-x a --spotlight-y automaticky. Pohyb je předem nastavený, ale vizuálně stejný zajímavý efekt.

Obě řešení používají stejné CSS vlastnosti a radial-gradient. Jen se liší, co hodnoty mění — JavaScript nebo CSS animace.