Premessa
Lo zoom fa variare la scala di un elemento in modo continuo mentre attraversa il viewport: passa da poco più piccolo a poco più grande, legato allo scroll. È diverso dal reveal con scala, che scatta una volta sola all’entrata: qui la scala segue la posizione di scroll, avanti e indietro.
Funziona meglio sulle immagini hero a tutta larghezza, dove un movimento di scala lento aggiunge dinamismo senza essere invadente. L’intensità dell’effetto è regolabile.
Come il parallax, anima solo transform, quindi resta leggero. È l’esempio più semplice di una famiglia di effetti che condividono la stessa idea: prendere una proprietà e legarla con uno scrub alla posizione di scroll invece che al tempo.
Provalo dal vivo
Scorri: il riquadro qui sotto si dilata in modo continuo mentre attraversa lo schermo, e torna a rimpicciolirsi se risali.
Una scala che cresce, legata allo scroll.
Scrubbed, non “once”
La differenza con un reveal in scala è che lo zoom non scatta e si ferma: resta agganciato allo scroll, quindi se risali la scala diminuisce. È un movimento reversibile, pensato per accompagnare la lettura, non per annunciare l’ingresso di un elemento.
Senza JavaScript o in modalità ridotta il riquadro resta alla sua dimensione naturale, fermo nel flusso: nessuna scala, nessun salto.
Per maggiori informazioni contattami a info@davidemugnaini.it.