Per il progetto del nuovo sito di IENA Studios abbiamo inserito in home page una serie di lavori in evidenza con un’immagine rappresentativa. Per identificare meglio il lavoro al passaggio del mouse sull’immagine appare, scorrendo dal basso verso l’alto, un blocco semitrasparente con il tipo di lavoro e il cliente per il quale è stato realizzato.

La procedura per realizzare questo tipo di effetto non è molto difficile ma comprende conoscenze di HTML per i contenuti, CSS (soprattutto) per l’impaginazione e qualche righa di jQuery col quale fare l’effetto.

Come si comporta lo script

Innanzitutto dobbiamo impaginare il contenuto, senza pensare a jQuery e all’effetto ma al concetto di come si dovrebbe vedere, completa di tutti i suoi elementi, la pagina. Si tratta di tanti elementi, affiancati, che comprendono altri elementi anche quelli uguali.

Per capirci meglio:

<div class="work">

    <a href="link.html"><img src="url/image.jpg" /></a>

    <div class="info">
        <h4><a href="link.html">Titolo dell'imamgine</a></h4>
        <h3><a href="link.html">Nome del cliente</a></h3>
    </div> <!-- end desc -->

</div> <!-- end work -->

Tutti i blocchi che vedete sono stati formati in questo modo. Sono caratterizzati tutti dalla stessa classe work e all’interno presentano tutti, oltre l’immagine, un blocco info che comprende i testi di titolo e cliente. Nella pagina ce ne sono diversi e tutti fanno la stessa cosa!

Ricordo a titolo informativo che in HTML le class posso essere usate per più elementi nella pagina mentre gli id per un solo elemento nella pagina.

Questa è quindi la base da cui partire, ora il resto lo fanno i CSS:

.work{
    width:300px;
    height:200px;
    margin:10px;
    background:#333;
    float:left;
    position:relative;
}

.work a{
    display:block;
    color:inherit;
    text-decoration:none;
}

.work a:hover{
    text-decoration:none;
}

.info{
    background:url(../images/bg.png);
    position:absolute;
    bottom:0;
    width:280px;
    padding:10px;
    font-size:30px;
    text-transform:uppercase;
    text-align:right;
}

.info h3{
    color:#fff;
}

.info h4{
    color:#bdbdbd;
}

All’atto pratico cosa è importante? Il blocco work ha posizione relativa così che il blocco info che ha posizione assoluta si può posizionare nella parte bassa di work. Lo sfondo di info è una immagine PNG nera semitrasparente (per esempio nero, opacità 80%) così che si vede lo sfondo (cioè l’immagine all’intero di work).

Adesso abbiamo almeno impaginato gli elementi. Quello che si deve fare ora è: fare sparire (azione hide) il blocco info, fare in modo che si alzi (azione slideDown) quando si passa sul blocco work, fare in modo che si abbassi (azione slideUp) quando si esce dal blocco work.

Ovviamente lo facciamo in jQuery. Ricordate ovviamente di importare sia la libreria (che scaricate dal sito ufficiale) che l’eventuale file col vostro script (io l’ho chiamato slideupWorks.js):

<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="script/slideupWorks.js"></script>

Questo è lo script che creerà l’effetto:

$(document).ready(function(){

    // nascondi descrizione al caricamento
    $('.info').hide();

    //mostra descrizione quando metti il mouse
    $('.work').mouseover(function(){
        $('.info', this).slideDown('slow');    
    });

    //nascondi la descrizione quando togli il mouse
    $('.work').mouseleave(function(){
        $('.info', this).slideUp('slow');    
    });

});

La cosa già dovrebbe funzionare così e, visto che abbiamo usato delle classi, possiamo replicare anche i blocchi work e info anche più volte nella pagina.

Cerchiamo di capire sommariamente il JavaScript. Il codice viene caricato con la pagina, in primo luogo nasconde con la funzione hide() tutti gli elementi della classe info. Successivamente viene indicato con la funzione mouseover() che al passaggio del mouse sopra il blocco work viene applicato l’effetto slideDown() al blocco info all’interno di questo (this) blocco work sul quale siamo passati col mouse. Con la funzione mouseleave() quando il mouse si toglie da sopra il blocco viene applicato l’effetto slideUp() al blocco info che quindi scompare di nuovo.