Premessa
Il parallax sposta un blocco in verticale a una velocità diversa da quella dello scroll, dando l’impressione che stia su un piano più lontano o più vicino. L’intensità è regolabile da negativa (il blocco va più lento dello scroll) a positiva (più veloce).
Il punto delicato del parallax non è l’effetto, è come lo realizzi. Molte implementazioni animano top o background-position, costringendo il browser a ricalcolare il layout a ogni frame: su mobile diventa una sequenza di scatti. Qui muovo solo transform, agganciato allo scroll con uno scrub continuo, quindi l’effetto resta su un layer compositato e fluido.
L’ampiezza dello spostamento è proporzionale all’altezza del viewport, non a quella dell’elemento: così l’effetto è percepibile anche su un titolo o un testo basso, dove una percentuale dell’altezza dell’elemento sarebbe trascurabile. Il parallax si nota davvero quando ha un riferimento a velocità normale accanto.
Provalo dal vivo
Scorri: il riquadro di sinistra scorre con la pagina, quello di destra deriva a una velocità diversa. È il disallineamento tra i due a rendere evidente l’effetto.
Riferimento
velocità normale
Parallax
più veloce
Quando usarlo
Il parallax dà il meglio su immagini hero, sezioni di stacco o elementi decorativi, dove un movimento lieve aggiunge profondità. Su blocchi di testo denso meglio andarci piano: troppo movimento distrae dalla lettura. Un’intensità negativa, con il blocco più lento dello scroll, è in genere più elegante di una positiva.
Senza JavaScript o in modalità ridotta il blocco resta fermo nel flusso normale: nessun movimento, nessun salto di layout.
Per maggiori informazioni contattami a info@davidemugnaini.it.