KenBurns Transition & Sheer Skin Html Slideshow

Questo slideshow ha un carattere morbido e amichevole, quasi romantico. I colori dominanti sono il viola e il bianco, e l'utilizzo delle semi-trasparenze ne rinforza l'aspetto soffice e sognante. È un design che andrebbe benissimo su siti per incontri romantici, per agenzie di viaggio specializzati in viaggi per coppie e per autori di libri per donne.

Questo esempio sfrutta l'effetto di transizione ‘kenburns’ per passare da una pagina all'altra. Si tratta di una transizione molto dolce costituita da un leggero spostamento dell'immagine seguito da una dissolvenza. Di nuovo, l'effetto si associa bene al carattere generalmente sognante del design ma allo stesso tempo aggiunge un elemento dinamico.

La didascalia si trova all'angolo in basso a sinistra e utilizza carattere di colore viola. La didascalia ha titolo e sottotitolo. Il titolo si trova in un rettangolo dagli angoli arrotondati, con sfondo bianco appena trasparente; il sottotitolo è su rettangolo bianco semitrasparente con un bordo bianco più opaco. L'utilizzo della trasparenza in questo design permette ai colori della foto di emergere in maniera soffice e diffusa.

Il font utilizzato è il Raleway, un elegante sans-serif che si adatta bene allo schema dei colori.

Le didascalie appaiono con un effetto di veloce rigonfiamento a partire da un singolo punto. Appare prima il titolo seguito dal sottotitolo.

Puntando il mouse sul blocco appariranno le frecce di navigazione, con un effetto di rimpicciolimento. Il loro disegno è piuttosto originale: sono delle punte di freccia con bordo bianco semitrasparente poste all'interno di un cerchio bianco trasparente con bordo bianco semitrasparente. Puntando il mouse su una delle frecce, il cerchio diventa viola e la freccia diventa opaca.

Cliccando sulle frecce di navigazione l'utente potrà scorrere in successione le immagini dello slideshow.

Spostando il cursore del mouse lontano dal blocco, le frecce si 'rigonfiano' per poi dissolversi. Di nuovo, una transizione morbida e gentile che rinforza il carattere soffice e romantico del design complessivo, ricordando un po' l'effetto visivo di una goccia di pioggia che cade nell'acqua.

Ci sono piccoli pulsanti a forma di cerchi bianchi semitrasparenti. Ognuno di essi è associato a una delle immagini dello slideshow e l'utente può quindi cliccarci sopra per navigare direttamente sull'immagine desiderata, senza passare attraverso l'intera sequenza.

Il cerchio associato con l'immagine visualizzata al momento diventa trasparente con bordo bianco.

Questo carosello è solo CSS, quindi tutti gli effetti di transizione, le icone e la navigazione sono ottenuti senza jQuery o Javascript. È inoltre pienamente reattivo e su schermi più piccoli, come quello di uno smartphone, l'interfaccia si semplifica, ad esempio rinunciando alle didascalie e ingrandendo le frecce di navigazione. Su schermi di dimensioni medie, come quello di un tablet, lo slider passa a grandezza massima.

In sintesi, si tratta di un design leggero, reattivo e perfetto per un sito web che vuole darsi un carattere dolce e femminile.