Con il linguaggio CSS è possibile creare effetti ed animazioni personalizzate all'interno di pagine Web e siti Internet. In questo articolo vedremo come sviluppare un animazione GLITCH ed ottenere questo risultato:
Come creare un effetto GLITCH animato sul testo in CSS
Come al solito per prima cosa creiamo un nuovo documento di tipo HTML ed impostiamo la struttura della pagina Web:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Creare effetto GLITCH con CSS</title>
</head>
<body>
</body>
</html>All'interno del documento andremo ad inserire tutti gli elementi HTML e CSS necessari alla creazione dell'effetto GLITCH animato. Potrebbe apparire come un effetto visivamente molto complesso. In realtà è piuttosto semplice da realizzare e non richiede l'applicazione di troppo markup HTML. Scriviamo quindi fin da subito il codice che comporrà il corpo del nostro documento.
<div id="container">
<h1 class="glitch">
Glitch effect
<span class="first">Glitch effect</span>
<span class="second" aria-hidden="true">Glitch effect</span>
</h1>
</div>Analizziamo quanto scritto, esternamente troviamo l'elemento <div></div> contenitore che avrà il compito di contenere al suo interno tutti gli elementi. Internamente troviamo l'elemento principale, ovvero il testo "Glitch effect" inserito all'interno dei tag <h1></h1>.
A questo elemento è necessario assegnare una classe per renderlo riconoscibile e poterlo richiamare in maniera rapida, lo nominiamo quindi aggiungendo class="glitch". Proseguiamo notando che sono presenti altri elementi all'interno del tag principale <h1></h1>, infatti l'obiettivo che vogliamo raggiungere comprende 3 strati di diverso colore che, animati in sovrapposizione, formano l'effetto desiderato.
Ecco perché oltre al testo "Glitch effect" tra <h1></h1> troviamo 2 ulteriori elementi con lo stesso testo. Ognuno dei due elementi <span></span> potrà essere richiamato grazie alla classe identificativa.
Definiamo ora il codice CSS grazie al quale potremo realizzare l'effetto GLITCH desiderato.
Il file CSS
Creiamo un nuovo file CSS ed assegniamo a questo un nome, ad esempio style.css, in modo da poterlo identificare e richiamare facilmente. A seguito della creazione del file CSS, lo includiamo nel codice del file HTML in modo da poterlo richiamare. Inseriamo quindi all'interno del documento principale un collegamento esterno al file di stile:
<link href="style.css" rel="stylesheet" type="text/css">Siamo ora pronti per scrivere le regole di stile che daranno forma all'effetto GLITCH.
Andiamo all'interno del file style.css e definiamo la formattazione del contenitore generale del nostro documento ovvero il body.
body{
width: 100%;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
margin: 0px;
background: #000;
}Utilizzando le regole display: grid; align-items: center; e justify-items: center; tutti gli oggetti contenuti all'interno del contenitore <div class=”container”></div> saranno posizionati esattamente al centro della pagina.Impostiamo inoltre un colore di sfondo scuro per render maggiormente visibile l'effetto GLITCH.
Stilizziamo il testo
A questo punto è ora di passare al soggetto del nostro articolo ovvero il tag <h1></h1> chiamato .glitch
.glitch {
font-size: 150px;
font-weight: 700;
text-transform: uppercase;
position: relative;
text-align: center;
font-family: sans-serif;
color: #fff;
}Definiamo con cura la grandezza, lo spessore, il font e la posizione anche se ancora il risultato finale è molto distante.
Otterremo 3 scritte "Glitch effect" in quando abbiamo inserito due elementi <span></span> oltre al soggetto principale <h1></h1>. Concentriamoci quindi sulla stilizzazione di questi due elementi aggiuntivi. Per prima cosa indichiamo position:absolute; per entrambi e subito dopo impostiamo la posizione.
.glitch span {
position: absolute;
top: 0;
left: 0;
}
Fatto ciò non resta che proseguire con la definizione dello stile e la creazione della sfumatura che animeremo in seguito.
Sfruttiamo la proprietà CSS chiamata text-shadow che permette di aggiungere ombre al testo e formare multipli livelli di colorazione RGB.
.glitch span {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
-0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
}
Grazie a questa proprietà possiamo infatti inserire tutti e 3 i colori RGB ed iniziare a dare forma all'effetto finale.
Proseguiamo creando l'animazione che sarà assegnata ai due elementi <span></span>.
.glitch span.first {
animation: glitch 650ms infinite;
}
.glitch span.second {
animation: glitch 450ms infinite;
}Analizzando quanto scritto notiamo che le due animazioni hanno entrambe una durata infinita ma una velocità differente, 650ms e 450ms questo in quanto avremo una discordanza di movimento e quindi in miglior risultato finale.
Diamo forma all'animazione
Proseguiamo verso la fine dell'articolo e scriviamo le regole che daranno forma all'animazione, per prima cosa cancelliamo le regole text-shadow scritte in precedenza all'interno delle regole assegnate all'elemento .glitch span e definiamo i @keyframes richiamando il nome dell'animazione creata poco fa.
@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85),
-0.04em -0.030em 0 rgba(0, 255, 0, 0.85),
-0.030em 0.05em 0 rgba(0, 0, 255, 0.85);
}
20% {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85),
-0.04em -0.030em 0 rgba(0, 255, 0, 0.85),
-0.030em 0.05em 0 rgba(0, 0, 255, 0.85);
}
21% {
text-shadow: -0.04em -0.030em 0 rgba(255, 0, 0, 0.85),
0.025em 0.025em 0 rgba(0, 255, 0, 0.85),
-0.04em -0.04em 0 rgba(0, 0, 255, 0.85);
}
49% {
text-shadow: -0.04em -0.030em 0 rgba(255, 0, 0, 0.85),
0.025em 0.025em 0 rgba(0, 255, 0, 0.85),
-0.04em -0.04em 0 rgba(0, 0, 255, 0.85);
}
50% {
text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85),
0.05em 0 0 rgba(0, 255, 0, 0.85),
0 -0.04em 0 rgba(0, 0, 255, 0.85);
}
99% {
text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85),
0.05em 0 0 rgba(0, 255, 0, 0.85),
0 -0.04em 0 rgba(0, 0, 255, 0.85);
}
100% {
text-shadow: -0.030em 0 0 rgba(255, 0, 0, 0.85),
-0.030em -0.030em 0 rgba(0, 255, 0, 0.85),
-0.030em -0.04em 0 rgba(0, 0, 255, 0.85);
}
}Quello che dovremo fare sarà definire dei keyframe che riempiano l'animazione da 0% a 100% alternando la colorazione RGB. Quest'ultima si compone di tre valori numerici che vanno da 0 a 255 e corrispondono ai colori rosso, verde e blu uniti a quello che è un movimento rapido e disallineato generando un GLITCH.
Oltre a determinare la percentuale di animazione è importante creare l'effetto "scatto" possibile grazie a piccole differenze percentuali. Nel nostro esempio (20% e 21% oppure 49% e 50% ed infine 99% e 100%) è stato fatto in modo che l'animazione non si muova con fluidità e crei il risultato finale.
