Premessa
Il card stacking è un effetto molto utilizzato: una sezione si blocca a schermo e le schede al suo interno si impilano una sull’altra salendo dal basso, mentre quella sotto arretra leggermente in scala e opacità per dare profondità. Le schede sono semplicemente i blocchi figli: ne bastano due.
Tecnicamente la sezione è pinnata e la sequenza è scrubbed sullo scroll. Qui ho imparato una regola di GSAP a mie spese: in una timeline scrubbed si usano gsap.set più tl.to, mai tl.from. I from, sotto scrub, non si riproducono in modo affidabile, e le schede restavano bloccate a metà. La lunghezza del blocco pinnato (quanto scroll serve per ogni transizione) è configurabile, come anche l’offset di distanza dall’alto dove si ferma la scheda.
Il dettaglio di accessibilità: la sovrapposizione assoluta delle schede è attivata da una classe CSS che il JavaScript aggiunge solo quando l’effetto parte davvero. Senza JavaScript o in modalità ridotta le schede restano impilate verticalmente come blocchi normali, leggibili. Nessun layout rotto.
Provalo dal vivo
Scorri lentamente: la sezione si blocca e le quattro schede salgono una sull’altra, quella sotto arretra per dare profondità.
Scheda 1
Scheda 2
Scheda 3
Scheda 4
Per maggiori informazioni contattami: info@davidemugnaini.it.