Un testo animato a strisce può rendere una pagina web più dinamica e riconoscibile, soprattutto in hero section, banner promozionali, landing page creative o progetti grafici legati al food design. L’esempio analizzato parte da un CodePen intitolato Pizza, costruito con HTML e CSS, senza JavaScript.
Come funziona l’effetto
Il layout mostra la parola PIZZA al centro dello schermo. L’effetto visivo nasce da un repeating-linear-gradient applicato al testo tramite background-clip: text. In questo modo il gradiente non resta sullo sfondo, ma viene ritagliato dentro le lettere.
Il movimento è gestito da una semplice animazione CSS con @keyframes, che sposta la posizione dello sfondo e crea l’impressione di strisce diagonali in movimento.
Struttura HTML
La struttura è molto semplice: un contenitore principale e una serie di lettere separate, utili per controllare meglio spaziatura, stile e possibili personalizzazioni.
<div class="stripes" contenteditable>
<div class="stripes_inner">
<div class="letter">P</div>
<div class="letter">I</div>
<div class="letter">Z</div>
<div class="letter">Z</div>
<div class="letter">A</div>
</div>
</div>CSS: il cuore dell’animazione
La parte più interessante è l’uso delle variabili CSS. Dimensione delle strisce, colori e durata dell’animazione possono essere modificati rapidamente.
:root {
--stripe-size: 120px;
--color1: #c44;
--color2: #ffffff;
--duration: 2s;
}Il testo viene reso trasparente e il gradiente viene mostrato solo all’interno delle lettere:
.stripes_inner {
font-size: clamp(7rem, 25vw, 20rem);
font-weight: 600;
font-family: sans-serif;
color: transparent;
background: repeating-linear-gradient(
45deg,
var(--color1) 25%,
var(--color1) 50%,
var(--color2) 50%,
var(--color2) 75%
);
background-size: var(--stripe-size) var(--stripe-size);
-webkit-background-clip: text;
background-clip: text;
animation: stripeBackgroundPosition var(--duration) linear infinite;
}Animazione con keyframes
Il movimento delle strisce è ottenuto spostando la posizione del background:
@keyframes stripeBackgroundPosition {
0% {
background-position: 0 0;
}
100% {
background-position: calc(var(--stripe-size) * -1) 0;
}
}Dove usare questo effetto
- Hero section per pizzerie e ristoranti
- Landing page creative
- Banner promozionali
- Progetti grafici in CSS puro
- Animazioni per titoli grandi
Consigli SEO e performance
L’effetto è leggero perché non usa librerie esterne né JavaScript. Per una pagina reale, però, è meglio usarlo su un solo titolo principale o su un blocco decorativo, evitando di animare troppi elementi contemporaneamente.
Conclusione
Questo esempio dimostra come con poche righe di CSS sia possibile creare un effetto visivo d’impatto. Il testo animato a strisce è una soluzione semplice, moderna e facilmente personalizzabile per dare carattere a una pagina web.
