Galleria di immagini in stile di schedario "Rolodex"

Oggi vediamo come posiamo fare una galleria di immagini in quel popolare stile di schedario. Schedario Rolodex per lungo tempo(dal anni 50 fino la metà degli anni '80del secolo scorso) è stato un attributo molto popolare sulla scrivania di lavoro. Una costruzione confortevole basata sulle schede disposti in una batteria forniscono un rapido accesso alle informazioni.

 Come realizzare una galeria di immagini.

Invece di utilizzare l'elemento ruota usiamo elemento range di HTML5 per spostarsi tra l'immagini. Dal momento che l'elemento non è supportato in Firefox faciamo una sostituzione. JavaScript (in forma di jQuery) viene utilizzato per associare l’elemento di controllo alle immagini, ma tutto il codice contiene poche righe. Il contenuto della galleria è una serie d'immagini della stessa dimensione in elementi<figure>con una descrizione negli elementi<figcaption>:.

<div id=imgdex>
    <figure>
        <img src="/assets/img/arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress">
        <figcaption>Bedouin</figcaption>
    </figure>
    <figure>
        <img src="/assets/img/blue-green-eyes.jpg" alt="Photograph of a man's blue-green-eyes">
        <figcaption>Blue-green</figcaption>
    </figure>
    <figure>
        <img src="/assets/img/fake-eyelashes.jpg" alt="Photograph of dramatic fake eyelashes in closeup">
        <figcaption>Dramatic Fake</figcaption>
    </figure>
        <figure class=rolodex>
        <img src="/assets/img/snow-queen.jpg" alt="Photograph of a girl in heavy snow">
        <figcaption>Snow</figcaption>
    </figure>
</div>

Codice CSS :

div#imgdex{
    position:relative;
    perspective:4000px;
    width:70%;
    margin: 0 auto;
    transform-style:preserve-3d;
    font-family:Calibri;
}
div#imgdex figure{
    position:absolute;
    top:0;
    left:120px;
    transform-origin:left bottom;
    transform:rotateX(-92.1deg);
    transition:1s transform ease-in-out;
    width:70%;
}
div#imgdex figure img{
    max-width:100%;
}
div#imgdex figure figcaption{
    position:absolute;
    bottom:0;
    font-size:1.2rem;
    left:-8rem;
    opacity:0;
    transition:1s opacity ease-in-out;
}
div#imgdex figure:last-of-type{
    transform:rotateX(5deg);
    box-shadow:0px 0px 200px rgba(0,0,0,0.5);
}

Dimostrazione della galeria

Photograph of a woman's face under a Bedouin headress
Bedouin
Photograph of a man's blue-green-eyes
Blue-green
Photograph of dramatic fake eyelashes in closeup
Dramatic Fake
Photograph of a girl in heavy snow
Snow

Sposta il puntatore per vedere l'effetto d'animazione

 

Il div imposta il piano prospettico per la manipolazione delle immagini.La maggior parte degli elementi di figura vengono ruotati in avanti dai loro bordi inferiori da essere quasi"piatti". L'ultimo elemento- quello presso il "retro"della pila-viene portato in posizione verticale, si sporse un po 'indietro, è dotato di unbox-shadow. Quest'ultimo non si muove,ma gli altri si.

Barra di controllo della galleria

Sotto i nostri div che contengono varie immagini, c'e ellemento range del tag input per poter spostarsi da una immagine ad altra  :

 

<input type="range" min="1" onchange="updateImage(this.value);" value="4" id="ranger"/>

 Codice java script della animazione

L'elemento ha un valore minimo di 1(nella galleria dovrebbe essere almeno un'immagine).Quando si sposta il cursore, l'elemento fa scatare la funzione upDateImage e passa ad essa il suo valore attuale.

function updateImage(val) {
$('#imgdex figure:nth-child('+val+')').css('-webkit-transform','rotateX('+val+'deg)');
      $('#imgdex figure:nth-child('+val+')').css('transform','rotateX('+val+'deg)');
      $('#imgdex figure:nth-child('+val+') figcaption').css('opacity','1');
      $('#imgdex figure:not(:nth-child('+val+')) figcaption').css('opacity','0');
      $('#imgdex figure:nth-child('+(val-1)+')').css('-webkit-transform','rotateX(-92.'+(count - val)+'deg)');
      $('#imgdex figure:nth-child('+(val-1)+')').css('transform','rotateX(-92.'+(count - val)+'deg)');
}

Quasi ci siamo

Il nostro prossimo lavoro è di fornire all'elemento range un limite superiore,corrispondente al numero totale di elementi  figura e impostare il valore predefinito della gamma a quello stesso numero.Vediamo questo script :

<script>
var count = $('#imgdex figure').length;
$('#ranger').attr('max', count);
$('#ranger').attr('value', count);<
</script>

Ultimi ritochi

Infine, abbiamo bisogno di rotare immagini in base alla posizione del cursore.

 function updateImage(val) {
$('#imgdex figure:nth-child('+val+')').css('-webkit-transform','rotateX('+val+'deg)');
      $('#imgdex figure:nth-child('+val+')').css('transform','rotateX('+val+'deg)');
      $('#imgdex figure:nth-child('+val+') figcaption').css('opacity','1');
      $('#imgdex figure:not(:nth-child('+val+')) figcaption').css('opacity','0');
      $('#imgdex figure:nth-child('+(val-1)+')').css('-webkit-transform','rotateX(-92.'+(count - val)+'deg)');
      $('#imgdex figure:nth-child('+(val-1)+')').css('transform','rotateX(-92.'+(count - val)+'deg)');
}

Codice è piuttosto confuso. È importante ricordare che la val indica sempe l'ordine di immagini. Ad esempio, un valore di 4 indica l'ultima immagine nell'esempio.

Se il puntatore di scorrimento viene spostato in posizione 3, l'immagine numero 3 viene ruotata per un valore di 3 posizioni dell'angolo. Le immagini sono ruotate con un piccolo spread per creare l'illusione del volume.

Una volta che l'immagine viene ruotata corrispondente scritta figcaption diventa visibile modificando le proprietà di opacità e altre scritte vengono nascoste.

Letto 18588 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso