Dopo aver visto qualche mese fa come realizzare una navigazione verticale animata, oggi vediamo un tutorial per realizzarne una orizzontale.
Guarda subito l’esempio per capire quello che andremo a realizzare.
Questo effetto è molto gradevole e stupisce in positivo l’utente, che si aspetta la solita navigazione tradizionale.
Vediamo quali sono i passi per ottenere l’effetto che hai appena visto.
Passo preliminare – Scarica lo script
Insieme allo script, troverai un esempio realizzato dagli autori dello script, che è diverso da quello che ti propongo.
Scarica lo script
Passo 1 – Inizializzazione dello script
Passo 2 – Codice HTML
Ora vediamo il codice html necessario per creare le pagine.
Il primo passo è creare il menu di navigazione, dove ogni link punterà al div corrispondente.
Poi bisogna creare i vari div, che saranno le “pagine” del sito, che ad esempio potranno essere fatti in questo modo con un’immagine, un video e dei link per tornare alla home, per andare indietro o avanti di un div.
Lebron James
TEXT
Passo 3 – Div intermedi (opzionale)
Poi, si può aggiungere un div di transizione tra le varie “pagine”, dove basterà aggiungere un div vuoto, tra i div inseririti nel punto precedente.
Quindi se hai 4 pagine, dovrai aggiungere 3 div intermedi, anch’essi con classe container.
Passo 4 – Gli stili
Ora vediamo quali sono gli stili necessari.
Body
Per il body le caratteristiche che devi dare sono la larghezza (width) e l’overflow, in modo da non visualizzare le barre di scorrimento (non funziona in internet explorer). La larghezza dipende da quanto farai larghi i vari div. Nell’esempio ci sono 7 div, ognuno con 2000pixel di larghezza, quindi il body dovrà essere necessariamente largo più di 14000 pixel.
body {
width: 15000px;
overflow: hidden;
}
Container
Qui è fondamentale dare una larghezza e un’altezza al div, che come abbiamo detto in precedenza sarà di 2000pixel. La larghezza è stata scelta sulla base della massima risoluzione che un monitor possa avere, quindi di 1920x1080pixel. Tu non dovrai per forza mettere 2000 pixel, dipende dall’effetto che vuoi ottenere.
.container {
float: left;
width: 2000px;
height:1000px;
}
Passo 5 – Personalizzazione
Come ultimo passo puoi personalizzare l’effetto di animazione, nel file thw.js, dove potrai aumentare la velocità di transizione, modificando il parametro speed.
Ti è piaciuto il tutorial? per qualsiasi curiosità o problema chiedi pure nei commenti!
Ana on 
luigi on 
alessio.... on 
gffh on 
Pietro on 
fedeweb on 
icosensei on 
17 febbraio 2010 at 10:44
Ottimo fede! Utilizzarò una cosa del genere quando farò il mio sito web personale!!!!!
28 febbraio 2010 at 15:22
Grandissimo, l’ho usato anche su un sito che sto sviluppando ma in explorer nn va… E’ colpa del fatto che sia implementato in joomla??
1 marzo 2010 at 20:56
Ciao Michael e benvenuto nel blog.
Prova a mettere il link al sito che stai sviluppando, così posso aiutarti meglio.
11 marzo 2010 at 18:07
Mi è stato veramente utilissimo! Grazie
13 marzo 2010 at 10:34
Ciao David e benvenuto nel blog
Mi fa piacere! hai per caso realizzato un progetto utilizzando questa tecnica?
13 marzo 2010 at 12:39
Ciao Fede,
vorrei utilizzare il tuo esempio per un sito, ma bisogna richiedere delle licenze per l’utilizzo?se si cosa dovrei fare?
grazie
16 marzo 2010 at 15:16
Ciao frank, puoi utilizzarlo liberamente, senza problemi
14 febbraio 2011 at 15:06
Ciao Fede, ho una domanda. Come sfondo del sito vorrei inserire un immagine che continua a destra senza interrompersi al passaggio tra i links(es. un disegno largo quanto tutte le pagine insieme). Per ottenere questo effetto fluido dello sfondo dovrei: inserire un immagine nel body,larga quanto il body o inserire più immagini tagliate e usare ognuna come sfondo dei div contenenti le pagine?
Grazie.
25 settembre 2011 at 23:11
Ho provato ad aggiungere al menù un quarto collegamento ma non funziona, come posso fare ad aggiungere più voci al menù e più pagine.
Grazie
26 settembre 2011 at 12:42
Ciao Andrea come hai proceduto per l’aggiunta di una quarta pagina?
Ricordati di aumentare la larghezza del body