Effetti mask e reveal per WordPress: animazioni di rivelazione

Gli effetti mask e reveal sono tra le tecniche più spettacolari per creare animazioni di rivelazione nel web design. Un”immagine che si svela gradualmente da dietro una maschera, un testo che appare con un effetto clip, un contenuto che si rivela con un movimento a tendina: sono effetti cinematografici che trasformano l”esperienza di navigazione. In questa guida completa esploriamo tutte le tecniche per creare effetti di rivelazione in WordPress.

Cosa sono gli effetti mask e reveal

Gli effetti mask usano le proprietà CSS mask, clip-path o overflow per nascondere/rivelare parti di un elemento. Combinati con le animazioni scroll-driven (animation-timeline: view()), creano effetti di rivelazione che si attivano automaticamente durante lo scroll dell”utente.

Ci sono tre tecniche principali:

  • Clip-path: ritaglia un elemento usando forme (cerchio, poligono, percorso)
  • Mask: usa un”immagine o un gradiente come maschera
  • Overflow: nasconde parti di un elemento tramite overflow hidden e anima la posizione

1. Circle Reveal (rivelazione circolare)

L”elemento appare da un cerchio che si espande dal centro. È uno degli effetti più scenografici.

.circle-reveal {
    clip-path: circle(0% at 50% 50%);
    animation: circleExpand linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes circleExpand {
    from { clip-path: circle(0% at 50% 50%); }
    to { clip-path: circle(100% at 50% 50%); }
}

Ideale per: immagini hero, loghi, foto profilo, elementi da enfatizzare

2. Mask Gradient (rivelazione graduale)

Usando un gradiente come maschera, l”elemento si svela da sinistra verso destra o dal basso verso l”alto.

.mask-gradient {
    mask-image: linear-gradient(to right, transparent 0%, black 50%, black 100%);
    mask-size: 200% 100%;
    mask-position: 100% 0;
    animation: maskMove linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes maskMove {
    from { mask-position: 100% 0; }
    to { mask-position: 0% 0; }
}

Ideale per: immagini panoramiche, sfondi, testo su immagini, transizioni fluide

3. Slide Reveal (svelamento laterale)

Un elemento di copertura (un “curtain”) si sposta rivelando il contenuto sottostante. È l”effetto “tendina”.

.slide-reveal-container {
    position: relative;
    overflow: hidden;
}

.slide-reveal-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00c7b1;
    z-index: 1;
    animation: slideCurtain linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 50%;
    transform-origin: left;
}

@keyframes slideCurtain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.slide-reveal-content {
    position: relative;
    z-index: 0;
}

Ideale per: immagini, card, titoli di sezione, portfolio

4. Curtain Reveal (effetto tendina dall”alto)

.curtain-reveal {
    clip-path: inset(0 100% 0 0);
    animation: curtain linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes curtain {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

Ideale per: titoli, citazioni, testi importanti, elementi testuali

5. Wipe Reveal (pulizia verticale)

.wipe-reveal {
    clip-path: inset(100% 0 0 0);
    animation: wipeDown linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes wipeDown {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

Ideale per: immagini full-width, sfondi di sezione, hero

6. Text Mask Reveal (testo con maschera)

Il testo viene rivelato da una maschera che si sposta. È un effetto particolarmente elegante per titoli.

.text-mask-reveal {
    background: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: textMaskMove linear both;
    animation-timeline: view();
}

@keyframes textMaskMove {
    from { background-position: 200% 0; }
    to { background-position: -100% 0; }
}

7. Polygon Reveal (forma personalizzata)

.polygon-reveal {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    animation: polygonExpand linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes polygonExpand {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

Ideale per: forme personalizzate, design creativi, elementi non rettangolari

Consigli per effetti mask/reveal efficaci

  • Non abusarne: 1-2 effetti di rivelazione per pagina sono sufficienti per creare impatto
  • Scegli il momento giusto: gli effetti di rivelazione funzionano meglio su elementi hero o all”inizio di sezioni importanti
  • Abbina a fade: un leggero fade abbinato al reveal rende l”effetto più morbido
  • Clip-path vs Mask: clip-path è leggermente più performante di mask. Usa clip-path quando possibile
  • Testa su mobile: alcuni effetti (soprattutto clip-path) possono dare problemi su Safari mobile

Compatibilità cross-browser

Le proprietà clip-path e mask sono ampiamente supportate dai browser moderni. Per Safari e Firefox, i test mostrano un buon supporto, ma in alcuni casi specifici possono esserci differenze minime.

Con ClassyBlocks Pro ottieni 18 animazioni mask & reveal già pronte nel pack dedicato, con polyfill automatico per browser legacy, integrazione visuale in Gutenberg e preview live. Basta selezionare un blocco e scegliere l”effetto.

Tag

Articoli correlati

Lascia una risposta