Per costruirli si fa ricorso a procedure in JavaScript. Esistono plugin di ogni tipo e di ogni ordine di complessità , per cui è davvero molto semplice realizzarli. Ma un designer inglese ha presentato la sua soluzione creativa: niente uso di JavaScript, solo puro CSS3, quindi sfruttando le feature della nuova versione dei fogli di stile per il Web.

Il meccanismo è in realtà  davvero molto semplice: si sfrutta il floating degli oggetti e la proprietà  overflow per nascondere quelli che non devono essere mostrati all'interno dell'area di visualizzazione. Per creare l'effetto animazione si fa ricorso al selettore tilde (il sibling selector).

Qui una demo del risultato finale ottenuto.

8 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

Bello, si avvicina molto alle classiche headers in Jquery! é un peccato che a molti clienti non si riesca far capire la potenza di questi strumenti. Spesso prediligono ancora animazioni lunghe, pesantissime e al limite del ridicolo a discapito della compatibilità  con i nuovi dipositivi. Su Chrome funziona bene, come pure su iphone e ipad. Se lo guardiamo con IE 8 e precedenti invece... beh speriamo che queste versioni scompaiano in fretta.

Web Designer Monza
Web Designer Monza

il futuro: css per le cose semplici (spider, dropdown, animazioni lineari, ecc) - javascript per dom manipulation estremo - assenza di flash

Michele
Michele

purtroppo é ancora presto per i CSS3, bisognerà  aspettare un pò...

Andrea
Andrea

Alessandro a me su Chrome funziona benissimo, non capisco come mai a te non funziona !

Alessandro Papa
Alessandro Papa

Un bell'esercizio di stile. Pero' ancora non sono riuscito a vedere buone soluzioni in puro CSS applicabili in un progetto serio...

Matita
Matita

@alessandro é un esperimento, un case study per il futuro che speriamo arrivi presto dove vecchi SO e vecchi non standard browser spariscano

sunny
sunny

Da Windows XP é un fail... IE8 tutto fermo e Chrome si pianta chiudendosi.

Alessandro
Alessandro

Veramente notevole!

gabriel
gabriel