Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Vediamo come costruire passo passo un header che si scolorisce e rimpicciolisce quando scrolliamo:

Innazio tutto ecco l’esempio:
http://demo.studio-88.it/haderopacity.html

Per prima cosa andiamo a definire le regole del foglio di stile per:

body{
        margin:0;
        padding:0;
        background-color:#FFF;
        color:#006;

}
#header{
        background-color:#000;
        position:fixed;
        top:0;
        left:50%;
        width:950px;
        margin-left:-475px;
        height:100px
}

#header h1{
        color:#FFF;
        margin:0;
        padding:0;
        font-size:3.5em;
        font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
        padding-bottom:25px;
        line-height:1;
        font-weight:normal;
}
.container{
        margin:0;
        padding:0;
        background-color:#fff
        border:1px solid #000;
        position:relative;
        padding-top:700px;
        width:950px;
        margin:0 auto;
}


Dato che quando l’header sale vogliamo lasciar sotto un bordino di 25px, nella regola #header h1 abbiamo inserito:

padding-bottom:25px;

In modo che tale bordino non venga occupato da testo o altre informazioni.

L’effetto “scomparsa” sullo scroll è molto semplice da ottenere con jQuery, basta questo semplice codice:

$(window).scroll(function(){
        $(‘#header’)
                .fadeTo(‘slow’, 0.5)
                .animate({‘top’:‘-75px’},‘slow’);                                        
});

In pratica quando viene riconosciuto lo scroll della finestra viene eseguito prima un fadeTo() sull’header (diminuzione dell’opacità dal 100% al 50%), dopo questa operazione viene animato l’header in modo che la proprietà top venga diminituta a -75px.
Essendo tale valore negative e considerando che l’altezza dell’header è di 100px, il risultato che otteniamo è che saranno visualizzati sulla schermo solamente gli utlimi 25px.
Se avessimo voluto vedere solo gli ultimi 10px (ad esempio) avremmo dovuto scrivere:

$(window).scroll(function(){
        $(‘#header’)
                .fadeTo(‘slow’, 0.5)
                .animate({‘top’:‘-90px’},‘slow’);                                        
});

A questo punto aggiungiamo un’altra funzione che ci consente di ripristinare la situazione iniziale dell’header.

$(‘#header’).click(function(){
        $(‘#header’)
                .animate({‘top’:‘0px’},‘fast’)
                .fadeTo(‘fast’, 1.0);                                                                            
});

In totale 6 righe di codice! ci si può stare.

Tag: , , ,  

Twitter