Premessa
Il reveal è l’animazione più richiesta e la più abusata: gli elementi che entrano quando arrivano in vista. Nel blocco Animazione è un effetto direzionale: i contenuti compaiono dal basso, dall’alto, dai lati, in scala o in dissolvenza, con durata, easing e sfasamento (stagger) regolabili. Lo stagger è ciò che rende vivo un elenco o una griglia: i figli non entrano tutti insieme, ma a cascata.
Il reveal classico parte una volta sola quando l’elemento entra, e non si ripete. Niente elementi che lampeggiano avanti e indietro se l’utente scrolla su e giù.
Provalo dal vivo
Scorri verso il basso: i tre riquadri qui sotto entrano dal basso, uno dopo l’altro, appena raggiungono il viewport.
Ingresso dal basso
Primo riquadro, entra per primo.
Secondo riquadro, sfasato di un soffio.
Terzo riquadro, chiude la cascata.
Ingresso da destra
Primo riquadro, entra per primo.
Secondo riquadro, sfasato di un soffio.
Terzo riquadro, chiude la cascata.
Effetto scala
Primo riquadro, entra per primo.
Secondo riquadro, sfasato di un soffio.
Terzo riquadro, chiude la cascata.
Effetto dissolvenza
Primo riquadro, entra per primo.
Secondo riquadro, sfasato di un soffio.
Terzo riquadro, chiude la cascata.
Flip verticale
Primo riquadro, entra per primo.
Secondo riquadro, sfasato di un soffio.
Terzo riquadro, chiude la cascata.
Flip orizzontale
Primo riquadro, entra per primo.
Secondo riquadro, sfasato di un soffio.
Terzo riquadro, chiude la cascata.
La modalità legata allo scroll
La modalità “legato allo scroll”: invece di partire una volta, i figli si rivelano in sequenza in proporzione alla posizione di scroll, e si ri-nascondono risalendo. È utile per un blocco di testo che vuoi far comparire riga per riga mentre il lettore avanza.
Sotto il cofano questa modalità non usa un from animato (sotto scrub non tiene lo stato iniziale), ma uno stato nascosto impostato esplicitamente più una timeline di segmenti scaglionati.
Qui i riquadri si rivelano in proporzione allo scroll: prova a risalire e li vedi ri-nascondersi.
Ingresso dal basso
Riga uno, legata allo scroll.
Riga due, compare un po’ dopo.
Riga tre, in fondo alla sequenza.
Ingresso da sinistra
Riga uno, legata allo scroll.
Riga due, compare un po’ dopo.
Riga tre, in fondo alla sequenza.
Effetto scala
Riga uno, legata allo scroll.
Riga due, compare un po’ dopo.
Riga tre, in fondo alla sequenza.
Effetto dissolvenza
Riga uno, legata allo scroll.
Riga due, compare un po’ dopo.
Riga tre, in fondo alla sequenza.
Flip verticale
Riga uno, legata allo scroll.
Riga due, compare un po’ dopo.
Riga tre, in fondo alla sequenza.
Flip orizzontale
Riga uno, legata allo scroll.
Riga due, compare un po’ dopo.
Riga tre, in fondo alla sequenza.
Accessibilità e degrado
Senza JavaScript, in modalità ridotta o se lo script fallisce, il contenuto resta visibile e nel flusso normale, senza salti. Sotto prefers-reduced-motion il reveal diventa una semplice dissolvenza in entrata, senza movimento. In nessun caso il lettore resta davanti a un riquadro vuoto.
Per maggiori informazioni contattami a info@davidemugnaini.it.