CSS teksto glitch generatorius

Kas yra šis įrankis?

CSS glitch efektas imituoja sugadinto transliavimo signalo ar suplėšytos VHS juostos vaizdą, dukart pakartojant teksto fragmentą naudojant ::before ir ::after pseudo-elementus, kiekvieną kopiją šiek tiek nustumiant spalvotu text-shadow (klasikinis raudonas ir žydras, atkartojantis analoginio RGB signalo klaidas) ir animuojant kiekvienos kopijos clip-path per @keyframes, kad skirtingos horizontalios kiekvienos spalvotos kopijos juostos su laiku mirktų.

Šiai technikai nereikia nei vaizdų, nei JavaScript animacijos ciklo, nei canvas — tai grynas CSS, sluoksniuotas ant vieno HTML elemento, kuris savo tekstą turi du kartus: kartą kaip tikrą teksto turinį, ir kartą per data-text atributą, kurį pseudo-elementai nuskaito su content: attr(data-text).

Šaltinis: CSS Pseudo-Elements Module Level 4, W3C — apibrėžia ::before/::after pseudo-elementus ir attr() funkciją, ant kurių sukurtas šis efektas.

Kodėl jį naudoti?

• Gyva animuota peržiūra — matote tikrą glitch efektą jums renkant tekstą ir keičiant nustatymus, o ne statišką maketą.
• Dvi nepriklausomai reguliuojamos akcentinės spalvos, pagal numatymą naudojant klasikinį raudonos/žydros RGB atskyrimo stilių, bet pritaikomos bet kokiam prekės ženklui ar temai.
• Intensyvumo šliaužiklis valdo spalvoto šešėlio poslinkį pikseliais; greičio šliaužiklis valdo, kaip greitai kartojasi clip-path keyframes.
• Kopijuojamas ir CSS (įskaitant pilnus @keyframes blokus), ir tiksli reikalinga HTML struktūra, nes efektas priklauso nuo data-text atributo, atitinkančio matomą tekstą.
• Grynas CSS — vykdymo metu, kai jis jau puslapyje, JavaScript nereikalingas, taip pat nereikia jokių išorinių bibliotekų ar vaizdų.
• Nemokama, be registracijos, viskas vyksta jūsų naršyklėje.

Kaip naudoti

1. Įveskite tekstą, kurį norite paversti glitch efektu, į teksto lauką — gyva peržiūra atsinaujina iš karto.
2. Pasirinkite dvi akcentines spalvas; klasikinė numatytoji reikšmė yra raudona ir žydra retro RGB atskyrimo stiliui, bet tinka bet kurios dvi kontrastingos spalvos.
3. Sureguliuokite intensyvumo šliaužiklį, kad valdytumėte, kaip toli vienas nuo kito yra du spalvų sluoksniai — didesnės reikšmės atrodo kaip agresyvesnis glitch efektas.
4. Sureguliuokite greičio šliaužiklį, kad valdytumėte, kaip greitai mirksi glitch efektas.
5. Nukopijuokite CSS bloką ir įklijuokite jį į savo stilių lentelę.
6. Nukopijuokite HTML fragmentą ir naudokite jį tiksliai taip, kaip parodyta — data-text atributas turi atitikti elemento matomą tekstą, kad efektas veiktų.

Pavyzdys

Įvestis

Tekstas: „GLITCH“ · 1 spalva: #ff0040 (raudona) · 2 spalva: #00fff9 (žydra) · Intensyvumas: 5px

Išvestis

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

Pagrindinis tekstas lieka baltas, o jo dvi pseudo-elementų kopijos mirksi raudonai ir žydrai iš abiejų pusių, taip sukurdamos klasikinį sugadinto signalo vaizdą.

Kodėl elementui reikia data-text atributo

::before ir ::after pseudo-elementai negali tiesiogiai nuskaityti elemento įprasto teksto turinio — CSS content: attr() veikia tik su tikrais HTML atributais, o ne su antrinių elementų teksto mazgais. Būtent todėl sugeneruotame HTML tekstas pakartojamas kaip data-text="..." atributas tame pačiame elemente: matomas tekstas atvaizduojamas įprastai, o kiekvienas pseudo-elementas nepriklausomai nuskaito tą pačią eilutę per content: attr(data-text) ir sluoksniuoja savo spalvos pakeista, animuota kopija viršuje.

Kaip sukuriamas mirksėjimas

Kiekvienas pseudo-elementas animuojamas naudojant savo @keyframes bloką, kuris pereina per seriją clip-path: inset(...) reikšmių. Kiekvienoje raktinio kadro pozicijoje atskleidžiama skirtinga horizontali spalvotos kopijos juosta, o likusi dalis apkarpoma, todėl matoma raudonos (ar žydros) juostelė šokinėja vertikaliai animacijos metu — kartu su spalvotu text-shadow poslinkiu tai atrodo kaip suplėšyti, nesutampantys spalvų kanalai, o ne tolygus švytėjimas.

Kur šis efektas tinka

• Pagrindinės antraštės žaidimų, kiberpanko, transliavimo ar muzikos prekės ženklo reklaminiuose puslapiuose.
• 404 / klaidos puslapiai, kur glitch efektas sustiprina „kažkas sugedo“ temą.
• Užvedimo ar fokuso būsenos ant antraštės ar logotipo trumpam dėmesį patraukiančiam akcentui.
• Kraunimo ar „apdorojama“ būsenos, kur glitch efektas perteikia sistemos aktyvumą.
• Naudokite taupiai pagrindiniam tekstui — efektas sąmoningai sunkiai perskaitomas iš pirmo žvilgsnio, todėl geriausiai tinka trumpoms antraštėms ar logotipams, o ne pastraipoms.

Derinimas su kitais CSS įrankiais

Glitch antraštė dažnai yra tik vienas elementas didesniame tamsiame, aukšto kontrasto išdėstyme. Derinkite su švelniu švytinčiu šešėliu ar suapvalintais kortelės kraštais iš kitų žemiau esančių CSS įrankių, kad gautumėte labiau užbaigtą išvaizdą.

→ box-shadow generatorius · border-radius generatorius

Dažniausiai užduodami klausimai