CSS Text Glitch generátor

Ez az eszköz egy animált, RGB-szétválasztásos glitch szöveghatást épít fel tiszta CSS-ből, két duplikált pszeudoelemet használva, amelyek rezegnek és színben eltolódnak a szöveged mögött. Gépeld be a szöveget, válassz két kiemelőszínt, állítsd be a glitch intenzitását és sebességét, nézd, ahogy élőben animál, majd másold ki mind a generált CSS-t, mind a hozzá szükséges kis HTML szerkezetet.

Mi ez az eszköz?

A CSS glitch effekt egy sérült műsorszórási jel vagy egy elszakadt VHS szalag megjelenését hamisítja úgy, hogy egy szövegdarabot kétszer duplikál ::before és ::after pszeudoelemek segítségével, mindegyik másolatot kissé eltolja egy színes text-shadow-val (klasszikusan piros és cián, az analóg RGB jelhibákat visszhangozva), és @keyframes-szel animálja mindegyik másolat clip-path-jét, így az egyes színes másolatok különböző vízszintes szeletei villannak fel és el az idő során.

A technika nem igényel képeket, JavaScript animációs ciklust vagy canvas-t — tisztán CSS, egyetlen HTML elemre rétegezve, amely saját szövegét kétszer hordozza: egyszer valódi szövegtartalomként, egyszer pedig egy data-text attribútumon keresztül, amelyet a pszeudoelemek a content: attr(data-text) segítségével olvasnak.

Forrás: CSS Pseudo-Elements Module Level 4, W3C — ez definiálja a ::before/::after pszeudoelemeket és az attr() függvényt, amelyekből ez az effekt épül.

Miért érdemes használni?

Élő, animált előnézet — láthatod a tényleges glitcheléshez hatást gépelés közben és beállítások módosításakor, nem csak egy statikus makettet.
Két, egymástól függetlenül állítható kiemelőszín, alapértelmezetten a klasszikus piros/cián RGB-szétválasztásos megjelenéssel, de bármely márkához vagy témához igazítható.
Az intenzitás csúszka szabályozza a színes árnyék eltolását pixelben; a sebesség csúszka szabályozza, milyen gyorsan cirkulálnak a clip-path keyframes-ek.
Kimásolja mind a CSS-t (beleértve a teljes @keyframes blokkokat), mind a szükséges pontos HTML szerkezetet, mivel az effekt egy, a látható szöveggel megegyező data-text attribútumtól függ.
Tiszta CSS — nincs szükség JavaScriptre futásidőben, ha egyszer az oldaladon van, és nincsenek betöltendő külső könyvtárak vagy képek.
Ingyenes, nincs regisztráció, teljes egészében a böngésződben fut.

Használati útmutató

Gépeld be a glitchelni kívánt szöveget a szövegmezőbe — ez azonnal frissíti az élő előnézetet.
Válassz két kiemelőszínt; a klasszikus alapértelmezés a piros és cián egy retró RGB-szétválasztásos megjelenéshez, de bármely két kontrasztos szín működik.
Állítsd az intenzitás csúszkát, hogy szabályozd, mennyire távol legyen a két színréteg egymástól — a magasabb értékek agresszívabb glitchnek hatnak.
Állítsd a sebesség csúszkát, hogy szabályozd, milyen gyorsan villog a glitch.
Másold ki a CSS blokkot, és illeszd be a stíluslapodba.
Másold ki a HTML részletet, és használd pontosan úgy, ahogy megjelenik — a data-text attribútumnak meg kell egyeznie az elem látható szövegével, hogy az effekt működjön.

Példa

Bemenet

Szöveg: "GLITCH" · 1. szín: #ff0040 (piros) · 2. szín: #00fff9 (cián) · Intenzitás: 5px

Kimenet

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

Az alapszöveg fehér marad, miközben a két pszeudoelem-másolata pirosban és ciánban villog mindkét oldalon, előidézve a klasszikus sérült jel megjelenést.

Miért van szükség data-text attribútumra az elemen

A ::before és ::after pszeudoelemek nem tudják közvetlenül olvasni egy elem normál szövegtartalmát — a CSS content: attr() csak valódi HTML attribútumokkal működik, nem gyerek szövegcsomópontokkal. Ezért ismétli meg a generált HTML a szöveget egy data-text="..." attribútumban ugyanazon az elemen: a látható szöveg normálisan jelenik meg, míg mindegyik pszeudoelem függetlenül lehívja ugyanazt a stringet a content: attr(data-text) segítségével, és rárétegzi a saját, színeltolt, animált másolatát.

Hogyan jön létre a villogás

Mindegyik pszeudoelemet a saját @keyframes blokkja animálja, amely clip-path: inset(...) értékek sorozatán lép végig. Minden keyframe-nél a színes másolat egy másik vízszintes sávja válik láthatóvá, míg a többi levágódik, így a piros (vagy cián) látható csíkja fel-le ugrál, ahogy az animáció fut — a színes text-shadow eltolással kombinálva ez inkább szakadt, félreillesztett színcsatornáknak hat, nem sima izzásnak.

Hol illik ez az effekt

Hero címsorok gaming, cyberpunk, streaming vagy zenei márka landing oldalakon.
404 / hibaoldalak, ahol egy glitch megerősíti a 'valami elromlott' témát.
Hover vagy fókusz állapotok egy címsoron vagy logón egy rövid, figyelemfelkeltő akcentusért.
Betöltő vagy 'feldolgozás alatt' állapotok, ahol a glitch rendszeraktivitást közvetít.
Használd mértékletesen törzsszövegen — az effekt szándékosan nehezen olvasható egy pillantásra, így rövid címsorokon vagy logótípuson működik legjobban, nem bekezdéseken.

Párosítás más CSS eszközökkel

Egy glitch címsor gyakran csak egy eleme egy nagyobb, sötét, magas kontrasztú elrendezésnek. Kombináld egy lágy izzó árnyékkal vagy lekerekített kártyaéllel a lenti egyéb CSS eszközökből egy kidolgozottabb megjelenésért.

→ Box Shadow Generátor · Border Radius Generátor

Gyakori kérdések

Miért a piros és cián az alapértelmezett szín?

A piros és cián a klasszikus RGB csatorna félreigazodást utánozza, amely sérült analóg videóban és korai digitális jelhibákban látható, és innen ered eredetileg a 'glitch' effekt vizuális nyelvezete. Bármely két színt behelyettesíthetsz, de az erősen kontrasztos árnyalatok hatnak legvilágosabban színszétválasztásnak.

Igényel ez az effekt JavaScriptet?

Nem — ha a CSS egyszer az oldaladon van, a glitch egy tiszta CSS animáció, amelyet @keyframes hajt. JavaScriptet csak ez az eszköz maga használ, a böngésződben, hogy frissítse az élő előnézetet és legenerálja a másolható kódot.

Miért nem jelenik meg az effekt, amikor beillesztem a CSS-t a projektembe?

A leggyakoribb ok egy eltérő vagy hiányzó data-text attribútum. A pszeudoelemek azt a stringet jelenítik meg, ami az elemen a data-text="..."-ban van, nem az elem saját szövegtartalmát, így mindkettőt be kell állítani, és pontosan egyezniük kell, a kis- és nagybetűket is beleértve.

Alkalmazhatom ezt egy h1-hez hasonló címsorra, div helyett?

Igen — a technika bármely inline vagy blokk elemen működik, amely elfogadja a ::before/::after pszeudoelemeket és egy data-text attribútumot. Csak alkalmazd ugyanazt az osztályt és data-text attribútumot a h1-edre, span-edre vagy más elemedre div helyett.

Árt az erős glitch effekt az akadálymentességnek vagy a SEO-nak?

Az alapul szolgáló szövegtartalom valódi, kijelölhető szöveg, így a képernyőolvasók és keresőmotorok normálisan olvassák, függetlenül a vizuális animációtól. A villogó mozgásra érzékeny felhasználók számára érdemes tiszteletben tartani a prefers-reduced-motion beállítást azáltal, hogy kikapcsolod vagy lelassítod az animációt számukra.