Animazioni di testo per WordPress: lettera per lettera con CSS

Le animazioni di testo sono tra gli effetti più spettacolari e apprezzati nel web design moderno. Un titolo che si svela lettera per lettera, parole che appaiono in sequenza, un effetto onda che attraversa il testo: tutto questo può trasformare un titolo statico in un”esperienza memorabile. In questa guida completa vediamo come creare animazioni di testo per WordPress usando solo CSS e un pizzico di JavaScript per lo splitting.

Perché animare il testo?

Il testo è il veicolo principale del messaggio del tuo sito. Animarlo significa:

• Catturare l”attenzione: un titolo animato ferma lo sguardo dell”utente
• Migliorare la gerarchia visiva: il testo animato comunica importanza
• Aumentare il tempo di permanenza: gli utenti tendono a leggere testi animati con più attenzione
• Raccontare una storia: la rivelazione progressiva del testo crea suspence e coinvolgimento

La tecnica dello split del testo

Per animare singole lettere o parole, devi prima dividere il testo in elementi separati (solitamente tag <span>). Questo processo si chiama “text splitting”. Puoi farlo manualmente per testi brevi, o tramite JavaScript per testi più lunghi.

Split manuale (per testi brevi)

<h1 class="text-reveal">
    <span>B</span>
    <span>e</span>
    <span>n</span>
    <span>v</span>
    <span>e</span>
    <span>n</span>
    <span>u</span>
    <span>t</span>
    <span>i</span>
</h1>

Split automatico con JavaScript

function splitText(el) {
    const text = el.textContent;
    el.textContent = '';
    text.split('').forEach((char, i) => {
        const span = document.createElement('span');
        span.textContent = char === ' ' ? '\u00A0' : char;
        span.style.transitionDelay = (i * 0.03) + 's';
        el.appendChild(span);
    });
}

4 effetti di testo imperdibili

1. Text Reveal (svelamento progressivo)

Le lettere appaiono una dopo l”altra, creando un effetto di scrittura elegante.

.text-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: revealLetter 0.4s ease forwards;
}

.text-reveal span:nth-child(1) { animation-delay: 0s; }
.text-reveal span:nth-child(2) { animation-delay: 0.05s; }
.text-reveal span:nth-child(3) { animation-delay: 0.1s; }
/* Le animazioni si applicano in sequenza */

@keyframes revealLetter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

2. Wave (effetto onda)

Le lettere si muovono su e giù in sequenza, creando un effetto onda che attraversa il testo. È perfetto per dare energia a un titolo.

.text-wave span {
    display: inline-block;
    animation: waveLetter 0.6s ease infinite alternate;
}

.text-wave span:nth-child(1) { animation-delay: 0s; }
.text-wave span:nth-child(2) { animation-delay: 0.08s; }
.text-wave span:nth-child(3) { animation-delay: 0.16s; }
/* Continua per ogni lettera */

@keyframes waveLetter {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-12px) scale(1.05); color: #00c7b1; }
}

3. Flip Letter (rotazione 3D)

Ogni lettera ruota su se stessa mentre appare, creando un effetto 3D spettacolare.

.text-flip span {
    display: inline-block;
    opacity: 0;
    animation: flipLetter 0.5s ease forwards;
    transform-origin: bottom;
}

@keyframes flipLetter {
    0% { opacity: 0; transform: perspective(500px) rotateX(-90deg); }
    50% { opacity: 0.5; }
    100% { opacity: 1; transform: perspective(500px) rotateX(0); }
}

4. Glow Text (bagliore progressivo)

Il testo passa da opaco e senza ombra a luminoso e brillante. È un effetto elegante e raffinato.

.text-glow {
    animation: glowText 2s ease-in-out infinite alternate;
}

@keyframes glowText {
    from {
        text-shadow: 
            0 0 5px rgba(0, 199, 177, 0.2),
            0 0 10px rgba(0, 199, 177, 0.1);
    }
    to {
        text-shadow: 
            0 0 10px rgba(0, 199, 177, 0.4),
            0 0 20px rgba(0, 199, 177, 0.3),
            0 0 40px rgba(0, 199, 177, 0.2),
            0 0 80px rgba(0, 199, 177, 0.1);
    }
}

5. Typewriter (solo CSS)

L”effetto macchina da scrivere è un classico che funziona sempre. Con solo CSS:

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #00c7b1;
    width: 0;
    animation: typing 3s steps(30) 1s forwards,
               blink 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

Applicare le animazioni di testo in Gutenberg

Se vuoi usare questi effetti senza scrivere codice o gestire lo splitting manuale, ClassyBlocks Pro include 12 animazioni di testo già pronte: text reveal, wave, pop, letter flip, glow, word scramble, typewriter e altre. Basta selezionare un blocco di testo nell”editor Gutenberg, scegliere l”effetto dal pannello Animazioni, e lo script si occupa automaticamente dello splitting. Preview live integrata.