CSS Text Glitch generaator

See tööriist ehitab animeeritud RGB-lõhega glitch-teksti efekti puhtast CSS-ist, kasutades kahte duplikaat-pseudoelementi, mis värisevad ja nihutavad värvi teksti taga. Kirjuta oma tekst, vali kaks aktsentvärvi, reguleeri glitch-i intensiivsust ja kiirust, vaata seda reaalajas animeerumas ning kopeeri seejärel nii loodud CSS kui ka väike HTML struktuur, mida see vajab.

Mis see tööriist on?

CSS glitch-efekt matkib rikutud ringhäälingusignaali või rebitud VHS-lindi välimust, dubleerides tekstitüki kahekordselt ::before ja ::after pseudoelementide abil, nihutades kumbagi koopiat veidi värvilise text-shadow'ga (klassikaliselt punase ja tsüaaniga, mis kajastab analoogsignaali RGB vigu) ning animeerides kummagi koopia clip-path'i @keyframes abil, nii et erinevad horisontaalsed viilud kummastki värvilisest koopiast vilguvad aja jooksul sisse-välja.

See tehnika ei vaja pilte, JavaScripti animatsioonitsüklit ega canvast — see on puhas CSS, mis on kihistatud ühele HTML elemendile, mis kannab oma teksti kahekordselt: üks kord päris tekstisisuna ja üks kord data-text atribuudi kaudu, mida pseudoelemendid loevad content: attr(data-text) abil.

Allikas: CSS Pseudo-Elements Module Level 4, W3C — defineerib ::before/::after pseudoelemendid ja attr() funktsiooni, millest see efekt on ehitatud.

Miks seda kasutada?

Elav animeeritud eelvaade — näe päris glitch-efekti kirjutades ja seadeid muutes, mitte ainult staatilist makette.
Kaks sõltumatult reguleeritavat aktsentvärvi, mis vaikimisi on klassikaline punane/tsüaan RGB-lõhe välimus, kuid kohandatavad mistahes brändi või teemaga.
Intensiivsuse liugur kontrollib värvivarju nihet pikslites; kiiruse liugur kontrollib, kui kiiresti clip-path keyframes'id tsüklivad.
Kopeerib nii CSS-i (sealhulgas täieliku @keyframes ploki) kui ka täpse vajaliku HTML struktuuri, kuna efekt sõltub nähtava tekstiga sobivast data-text atribuudist.
Puhas CSS — töö ajal pole vaja JavaScripti ega väliseid teeke või pilte laadida.
Tasuta, registreerimist pole vaja, töötab täielikult sinu brauseris.

Kuidas kasutada

Kirjuta glitch-itav tekst tekstiväljale — see uuendab kohe elavat eelvaadet.
Vali kaks aktsentvärvi; klassikaline vaikeväärtus on punane ja tsüaan retro RGB-lõhe välimuse jaoks, kuid mistahes kaks kontrastset värvi töötavad.
Reguleeri intensiivsuse liugurit, et kontrollida, kui kaugel kaks värvikihti üksteisest asuvad — kõrgemad väärtused mõjuvad agressiivsema glitch'ina.
Reguleeri kiiruse liugurit, et kontrollida, kui kiiresti glitch vilgub.
Kopeeri CSS plokk ja kleebi see oma stiililehele.
Kopeeri HTML katkend ja kasuta seda täpselt nii nagu näidatud — data-text atribuut peab vastama elemendi nähtavale tekstile, et efekt toimiks.

Näide

Sisend

Tekst: "GLITCH" · Värv 1: #ff0040 (punane) · Värv 2: #00fff9 (tsüaan) · Intensiivsus: 5px

Tulemus

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

Baastekst jääb valgeks, samal ajal kui selle kaks pseudoelemendi koopiat vilguvad punase ja tsüaaniga kummalgi pool, tekitades klassikalise rikutud signaali välimuse.

Miks element vajab data-text atribuuti

::before ja ::after pseudoelemendid ei saa lugeda elemendi tavalist tekstisisu otse — CSS content: attr() töötab ainult päris HTML atribuutidega, mitte lapse-tekstisõlmedega. Seepärast kordab loodud HTML teksti data-text="..." atribuudina samal elemendil: nähtav tekst renderdub tavaliselt, samal ajal kui iga pseudoelement tõmbab sõltumatult sama stringi content: attr(data-text) abil ja paneb peale oma värvilise, animeeritud koopia.

Kuidas vilkumine tekitatakse

Iga pseudoelement on animeeritud oma @keyframes plokiga, mis liigub läbi mitme clip-path: inset(...) väärtuse. Igal keyframe'il paljastatakse värvilise koopia erinev horisontaalne riba, samal ajal kui ülejäänu on ära lõigatud, nii et nähtav punase (või tsüaani) viil hüppab animatsiooni käigus vertikaalselt ringi — koos värvilise text-shadow nihkega mõjub see rebitud, joondamata värvikanalitena, mitte sujuva hõõguna.

Kuhu see efekt sobib

Hero-pealkirjad gaming-, küberpunk-, striimimis- või muusikabrändi sihtlehtedel.
404 / veaküljed, kus glitch tugevdab 'midagi läks katki' teemat.
Pealkirja või logo hover- või fookuse olekud lühikese tähelepanu-tõmbava aktsendi jaoks.
Laadimise või 'töötlemise' olekud, kus glitch edastab süsteemi aktiivsust.
Kasuta säästlikult tavalise teksti puhul — efekt on tahtlikult raske pilgutamisi lugeda, seega töötab see kõige paremini lühikeste pealkirjade või logotüübi, mitte lõikude puhul.

Kombineerimine teiste CSS tööriistadega

Glitch-pealkiri on tihti vaid üks element suuremas tumedas, kõrge kontrastiga paigutuses. Kombineeri see pehme hõõguva varju või ümarate kaardiservadega alltoodud teistest CSS tööriistadest viimistletuma välimuse jaoks.

→ Box Shadow Generaator · Border Radius Generaator

Korduma kippuvad küsimused

Miks on punane ja tsüaan vaikevärvid?

Punane ja tsüaan matkivad klassikalist RGB kanalite valest joondust, mida nähakse rikutud analoogvideos ja varajastes digitaalse signaali vigades, kust 'glitch' efekti visuaalne keel algselt pärineb. Saad vahetada mistahes kaks värvi, kuid tugevalt kontrastsed toonid mõjuvad kõige selgemini värvilõhena.

Kas see efekt vajab JavaScripti?

Ei — kui CSS on juba sinu lehel, on glitch puhas CSS animatsioon, mida juhib @keyframes. JavaScripti kasutab ainult see tööriist ise, sinu brauseris, elava eelvaate uuendamiseks ja kopeeritava koodi genereerimiseks.

Miks efekt ei ilmu, kui kleebin CSS-i oma projekti?

Kõige levinum põhjus on sobimatu või puuduv data-text atribuut. Pseudoelemendid renderdavad seda stringi, mis on elemendi data-text="..." atribuudis, mitte elemendi enda tekstisisu, seega peavad mõlemad olema määratud ja täpselt kokku langema, sealhulgas suur- ja väiketähed.

Kas saan seda rakendada pealkirjale nagu h1, mitte divile?

Jah — tehnika töötab mistahes sisejoonelisel või plokk-elemendil, mis aktsepteerib ::before/::after pseudoelemente ja data-text atribuuti. Rakenda sama klass ja data-text atribuut oma h1-le, span'ile või muule elemendile divi asemel.

Kas tugev glitch-efekt kahjustab ligipääsetavust või SEO-d?

Aluseks olev tekstisisu on päris, valitav tekst, seega ekraanilugejad ja otsingumootorid loevad seda tavaliselt, sõltumata visuaalsest animatsioonist. Vilkumisele tundlikele kasutajatele kaalu prefers-reduced-motion arvestamist, keelates või aeglustades animatsiooni nende jaoks.