Categoria:

Slider in CSS

02/05/2014 23:41 Pubblicato da
Share on FacebookTweet about this on TwitterGoogle+Share on Reddit


slider

Fin dalla prima versione del prototipo dell’interfaccia grafica di questo blog era prevista una sezione in cui era possibile reperire informazioni riguardo all’autore del sito. Sono state fatte diverse bozze per rappresentare questa sezione. Una di queste verrà trattata brevemente in questo articolo.

Demo

Lo slideshow (alias slider, carousel, gallery, banner etc.) in questione è composto da due diapositive: la prima fornisce informazioni generali, in particolare il nome e il cognome, mentre la seconda contiene la bio del blogger, ovvero un insieme limitato di caratteri che possono rappresentarci.
Entrambe le slide sono contenute all’interno di un box (#wrapper) che ha delle dimensioni prefissate e può contenere un header e il contenitore, questo ultimo avente al suo interno le due slide.
L’header contiene il titolo che sarà visto dall’utente (nel nostro caso “Profile”). Subito sotto è collocato il contenitore delle due slide.
Quando viene posizionato il cursore del mouse sulla slide visibile, il contenitore delle due diapositive trasla gradualmente verso sinistra (transition: margin-left .5s cubic-bezier(0, 1, 0.5, 1)) fino a quando la seconda slide non sarà completamente visibile.

CSS 3 profile information slider

Demo

21/07/2017 10:14

Leave a Reply

Your email address will not be published. Required fields are marked *