Maskování Obsahu Radiální Zářícím Efektem

Co je Maskování Radiální Zářícím Efektem?

Maskování obsahu radiální zářícím efektem je pokročilá webová technika, která používá interaktivní světelný efekt následující pohyb myši. Místo toho, aby byl obsah vždy viditelný, skrýváte ho pod masku a odhalujete ho pouze v oblasti, kde se kurzor pohybuje.

Tímto způsobem vytváříte neobvyklý vizuální zážitek. Návštěvníci musí aktivně prozkoumat vaši stránku, aby viděli všechen obsah. Efekt je dramatický a pamatuje si ho. To je důvod, proč se stal oblíbeným v portfolio webech a v moderních komerčních projektech.

Příklad maskování obsahu s radiální zářící maskou

CSS maska a SVG radiální gradient techniky pro odhalení obsahu

Jak to Vlastně Funguje?

Technicky jde o kombinaci tří prvků. Nejdřív potřebujete CSS masku — vlastnost mask-image, která řekne prohlížeči, jaké části stránky zobrazit a jaké skrýt. Druhý prvek je SVG radiální gradient. Vytváří měkkou přechod od světla k tmě, ne ostrou hranu.

Třetí prvek je JavaScript sledující pozici myši. Když se kurzor pohybuje, aktualizujete pozici gradientu v CSS masce. Gradient se pohybuje spolu s kurzorem, takže obsah se odhaluje přesně tam, kde je myš.

Klíčový princip: Maska se nezmění na obsahu — obsah se změní v masce. To je podstatný rozdíl. Místo aby jste měnili viditelnost prvků, měníte to, co je vidět skrz masku.

Základní Implementace

Začnete s jednoduchým HTML. Potřebujete kontejner s obsahem, který chcete maskovat. Nic složitého — normální div s textem, obrázky, cokoliv.

Pak přidáte CSS. Nastavíte mask-image na SVG s radiálním gradientem. Gradient má výchozí pozici — obvykle uprostřed obrazovky nebo mimo obrazovku. Poloměr masky určuje, jak velké je osvětlené pole. Typicky se pohybuje mezi 80 až 200 pixely — dostatečně velké na to, aby bylo vidět, co se děje, ale dost malé na to, aby zůstalo zajímavé.

Vytvořte SVG masku

SVG obsahuje radiální gradient s černou a bílou. Bílá část je viditelná, černá skrytá.

Použijte masku v CSS

mask-image odkazuje na SVG gradient. mask-position určuje výchozí polohu.

Sledujte myš

JavaScript detekuje pohyb myši a aktualizuje mask-position v reálném čase.

Kód implementace CSS masky s mask-image vlastností

Poznámka o Kompatibilitě

CSS mask-image není podporován všemi prohlížeči — nejméně v Safari na macOS. Firefox a Chrome fungují bez problémů. Internet Explorer vůbec nic. To je důvod, proč budete potřebovat fallback řešení. Pro uživatele bez podpory můžete zobrazit statickou verzi efektu nebo jednoduše skrýt obsah a nechat si ho odhalit klikem.

Pokročilé varianty radiálního efektu s různými velikostmi a intenzitou

Pokročilé Techniky

Jakmile máte základní verzi fungující, můžete ji vylepšit. Prvním krokem je měnit velikost masky na základě rychlosti pohybu. Když se myš pohybuje rychle, zvětšíte poloměr — obsah se odhaluje větší plocha. Když se myš pohybuje pomalu nebo zastaví, poloměr se zmenší. To vytváří efekt “hledání” obsahu.

Druhá možnost je přidat easing. Místo aby se maska ihned přesunula na pozici myši, postupně se tam přesouvá. Používáte requestAnimationFrame s interpolací — obvykle cubic-easing. Pohyb se pak zdá hladší a elegantní.

Třetí technika je vrstvení. Místo jedné masky použijete více masek s různými intenzitami. Vytvořit různé hloubky odhalení. Obsah v centru je vidět jasně, na okrajích se postupně ztrácí v tmě.

Výkon a Optimalizace

Efekt vypadá zajímavě, ale může být náročný. Každý pixel se musí přepočítat, když se maska pohybuje. Na pomalém zařízení to může způsobit trhání obrazu.

Řešení je jednoduchý: throttling. Neaktualizujete masku každý frame — aktualizujete ji jen jednou za 16 ms nebo každých 20 ms. To stačí na to, aby vypadalo hladce pro lidské oko, ale ušetří spoustu výkonu.

Druhý tip: nepoužívejte efekt na stránkách s příliš mnohem obsahem. Ideální je obsah omezit na 30-50 % stránky. Zbytek může zůstat bez masky. Tak efekt zůstane zajímavý bez toho, aby zpomalil celou stránku.

Příklad optimalizace výkonu s throttlingem a omezením efektu

Shrnutí

Maskování obsahu radiální zářícím efektem je mocná technika na vytvoření pamětihodné webové zkušenosti. Není to složité — je to kombinace CSS masek, SVG gradientů a JavaScript sledování myši. Výsledek je stojí za to.

Klíčem k úspěchu je spravovat kompatibilitu a výkon. Ujistěte se, že máte fallback pro starší prohlížeče a zařízení s dotykem. Optimalizujte efekt tak, aby neubrzdil vaši stránku. Používejte ho promyšleně — na místech, kde opravdu zvyšuje uživatelský zážitek, ne všude.

Pokud to uděláte správně, návštěvníci si váš obsah zapamatují. Efekt se stane jejich první vzpomínkou na vaši stránku. To je síla interaktivního designu.