Fw

Wordpress Creative Developer

Tutorial Javascript – Realizzare una navigazione orizzontale animata

  • Tutorial Jquery
  • -

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.

tutorial-jquery-navigazione-animata

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

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!

Scarica l’esempio

Guarda il tutorial

13 Commenti

  1. Ottimo fede! Utilizzarò una cosa del genere quando farò il mio sito web personale!!!!!

  2. 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??

  3. Ciao Michael e benvenuto nel blog. 😉
    Prova a mettere il link al sito che stai sviluppando, così posso aiutarti meglio.

  4. Mi è stato veramente utilissimo! Grazie 🙂

  5. Ciao David e benvenuto nel blog 😉
    Mi fa piacere! hai per caso realizzato un progetto utilizzando questa tecnica?

  6. Ciao Fede,
    vorrei utilizzare il tuo esempio per un sito, ma bisogna richiedere delle licenze per l’utilizzo?se si cosa dovrei fare?
    grazie

  7. Ciao frank, puoi utilizzarlo liberamente, senza problemi 😉

  8. […] tecnica molto usata è la realizzazione di siti a una pagina, sfruttando jquery per realizzare delle navigazioni animate tra le varie […]

  9. 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.

  10. 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

    • Ciao Andrea come hai proceduto per l’aggiunta di una quarta pagina?

      Ricordati di aumentare la larghezza del body 😉

  11. Grazie mille Federico! Ottimo articolo! 😀

  12. Ciao, nell’ultimo aggiornamento di safari non funziona più questo script! Sai dirmi cose si potrebbe risolvere il problema?

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *