Header “animato” per tutti

25 Gennaio 2016 Teresa 1 commento

un header animato

Quanti di voi hanno notato la nuova moda delle intestazioni(header) che si rimpiccioliscono quando si scorre una pagina web? Di sicuro in molti, viste le richieste di aiuto che mi sono arrivate per realizzare lo stesso effetto sui vostri siti web!!!

Bene, tenere fermo l’header in testa alle pagina durante lo scroll, permette di avere sempre sott’occhio il menu di navigazione e il logo del sito. Molte volte però, per rappresentare al meglio il nostro marchio oppure per mettere in mostra il bellissimo logo creato con tanta cura, assegnamo delle dimensioni generose all’intestazione, rischiando di occupare buona parte della pagina una volta bloccato in alto l’header. E’ proprio in questo caso, quindi, che nasce l’esigenza di rimpicciolire l’intestazione in modo dinamico non appena l’utente inizia a scorrere la pagina!

Mettiamoci subito all’opera quindi e vediamo come ottenere l’effetto sopra descritto, con una piacevole animazione, in modo semplice e con poche righe di codice.

Aprite un nuovo file ed incollate dentro il codice seguente. Salvate e date al file il nome index.html. Questo file, rappresenta la struttura della nostra pagina web sul quale andremo ad applicare le modifiche per personalizzare l’header. La pagina è costituita da un header (<header id=”header”>), un corpo (<section id=”content”>) e un footer (<footer>). Nell’header, c’è il logo del sito ed il menù di navigazione (<nav>). Nel corpo, inseriamo un pò di testo per poter scorrere la pagina e testare lo script.

<html>
    <head>
	<title>Esempio Header Animato</title>
    </head>
    <body>
    	<header id="header">
        <h1>LOGO</h1>
			<nav>
	  			<a href="#">Home</a>
	  			<a href="#">Chi siamo</a>
	  			<a href="#">News</a>
	  			<a href="#">Contatti</a>
			</nav>
        </header>
	<section id="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>
	<footer><a href="http://www.mammachebrava.com">Vai su MammaCheBrava!</a></footer>
    </body>
</html>

Aprite con il vostro browser preferito il file index.html appena creato… vi dovreste trovare di fronte ad una pagina tipo quella nell’immagine seguente:

header collassabile

Ora aggiungiamo un pò di “style” e per farlo, potremmo utilizzare un foglio stile esterno, ma per semplicità includeremo tutto in un unico file. Andiamo quindi a modificate index.html inserendo il codice seguente subito dopo la riga <title>Esempio Header Animato</title>

<style>
   body {margin:0; padding:0; font-size:16px;}
   #header { height: 130px; width: 90%; padding:0 5%; background-color: #EDD; color: #F00;}
   #header nav {height:100%; margin-top:5em; float: right;}
   #header nav a {font-size:1.5em; color: #982121; font-family: arial; text-decoration:none; padding:0 10px;}
   #header h1 {width: 30%; display: inline-block; font-size:3em;}
   #content { min-height: 1000px; width: 80%; padding:10px 10%; background-color: #FFF; color: #963; font-size: 2em; line-height: 2em}
   footer { height: 100px; width: 80%; padding:20px 10%; background-color: #333; color: #AAA; font-size:1.5em; text-align:center; }
   footer a {color: #AAA;}
</style>

Con queste poche righe, abbiamo eliminato il bordo intorno alla pagina, impostato i colori per lo sfondo dei vari elementi(header, content e footer), modificato colori e grandezze dei caratteri e posizionato il menu (nav) alla destra del logo.

header collapsible

A questo punto, bisogna bloccare l’header, per far si che resti fisso in alto e non scorra insieme alla pagina. Andiamo a modificare la riga:

   #header { height: 130px; width: 90%; padding:0 5%; background-color: #EDD; color: #F00;}

aggiungendo le seguenti proprietà:

position: fixed per ancorare e quindi rendere fissa la posizione del blocco header anche in caso di scroll;
z-index:999 per indicare che l’header deve essere sovrapposto a tutti gli altri elementi della pagina;
opacity:0.9 questa proprietà serve solo a dare un pò di trasparenza all’header e lasciare intravedere la pagina che ci scorre sotto.

Ecco la precedente riga con le nuove proprietà:

   #header { height: 130px; width: 90%; padding:0 5%; background-color: #EDD; color: #F00; position: fixed; z-index: 999; opacity:.9;}

Se provassimo ora a visualizzare la pagina, vedremmo che parte del corpo, è finito sotto l’header. Per ovviare a questo, bisogna aumentare il padding-top di content da 10px come impostato in precedenza a 10px + l’altezza dell’header (130px)

  #content { min-height: 1000px; width: 80%; padding:140px 10% 10px 10%; background-color: #FFF; color: #963; font-size: 2em; line-height: 2em}

Con poche modifiche al foglio stile è stato possibile rendere fisso l’header, ora passiamo al suo ridimensionamento che richiede un po’ più di impegno…. ma giusto un po’, non vi spaventate 😀

Torniamo quindi al file index.html, scorriamo fino a trovare la riga <body> e subito dopo questa, aggiungiamo lo script seguente:

<script>
  function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
                    riduci = 80,
                    header = document.getElementById("header");            	
        	    if (distanceY > riduci) {
        		header.className="smaller";         		
	    	    } else if (header.className=="smaller") header.className="";    	        		        
    });
  }
  window.onload = init();
</script>

Nel dettaglio, questo script, intercetta l’evento ‘scroll’ del browser e associa dinamicamente la classe smaller all’elemento header quando si scorre la pagina. Allo stesso modo, quando si tornerà ad inizio pagina, la classe smaller verrà eliminata. Grazie a questo piccolo script quindi, per rimpicciolire l’header, basterà creare un foglio stile per l’elemento #header.smaller con le nuove dimensioni che i vari elementi dell’header dovranno assumere quando ridotti

Inseriamo quindi lo style per #header.smaller nel file index.html aggiungendo queste righe in coda agli altri elementi presenti tra i tag <style></style>

#header.smaller { height: 65px; }      
#header.smaller h1 { font-size:1.6em; }     
#header.smaller nav a { font-size:1.2em; }
#header.smaller nav { margin-top:2em;}

Bene, a questo punto, apriamo il file index.html con il browser, e proviamo a scorrere la pagina per vedere l’header ed il suo contenuto (logo e menù di navigazione) rimpicciolirsi.

Per rendere l’effetto più fluido e accattivante, assegneremo la proprietà ‘transition:’ ai vari elementi dell’header. Modifichiamo le righe del riquadro seguente:

   #header { height: 130px; width: 90%; padding:0 5%; background-color: #EDD; color: #F00;}
   #header nav {height:100%; margin-top:5em; float: right;}
   #header nav a {font-size:1.5em; color: #982121; font-family: arial; text-decoration:none; padding:0 10px;}
   #header h1 {width: 30%; display: inline-block; font-size:3em;}

in questo modo:

   #header { height: 130px; width: 90%; padding:0 5%; background-color: #EDD; color: #F00; -webkit-transition: height 0.2s; -moz-transition: height 0.2s; -ms-transition: height 0.2s; -o-transition: height 0.2s; transition: height 0.2s;}
   #header nav {height:100%; margin-top:5em; float: right; -webkit-transition: margin 0.2s; -moz-transition: margin 0.2s; -ms-transition:  margin 0.2s; -o-transition:  margin 0.2s; transition:  margin 0.2s;}
   #header nav a {font-size:1.5em; color: #982121; font-family: arial; text-decoration:none; padding:0 10px; -moz-transition:  font-size 0.2s; -ms-transition:  font-size 0.2s; -o-transition:  font-size 0.2s; transition:  font-size 0.2s}
   #header h1 {width: 30%; display: inline-block; font-size:3em; -webkit-transition: font-size 0.2s; -moz-transition:  font-size 0.2s; -ms-transition:  font-size 0.2s; -o-transition:  font-size 0.2s; transition:  font-size 0.2s;}

Qui trovate la pagina di esempio funzionante…

E con questo è tutto!!! Spero di esservi stata di aiuto e come sempre vi invito a scrivere nei commenti le vostre domande, i dubbi e soprattutto i vostri suggerimenti. Alla prossima!!! 😉

Info sull'autore

Teresa

Sono mamma, blogger per passione, laureata in terapista della neuro e psicomotricità dell'età evolutiva, da sempre nel settore della prevenzione e riabilitazione, svolgo il mio lavoro presso studi privati e centri di riabilitazione; collaboro con ludoteche per la presentazione di progetti educativi e ludici in età evolutiva

Commenti

Melania

Inviato il 31 Marzo 2016 alle 15:02

Ciao Teresa!!!!
Prima di tutto complimenti per il sito… E’ bellissimo… Sono una tua lettrice come, sperando, futura mamma e blogger 😉 🙂
Non so se ti può interessare e sperando ti faccia piacere… Ho nominato il tuo blog per il premio LIEBSTER AWARD ❤❤❤
Il link del premio http://www.pianetadelleidee.com/2016/03/liebster-award-di-pianeta-delle-idee.html
Baci.

Mel

Rispondi