Oggi vediamo un tutorial su javascript, dove imparerai a realizzare una navigazione animata nei siti web, tecnica utilizzata sempre più spesso, soprattutto per i portfolio di web designers o fotografi.
Per capire meglio quello che andremo a fare, vediamo prima qualche esempio dell’effetto che vogliamo ottenere.
Come vedi in tutti questi esempi la navigazione non avviene nel modo tradizionale, ma si “sale” o si “scende” nel sito.
Basta veramente pochissimo per ottenere questo effetto; andiamo a vedere come fare.
Passo preliminare
Scarica l’ultima versione di jquery e tra i tag head inserisci questo codice.
Passo 1 – Codice Javascript.
Sempre tra i tag head, dovrai inserire il codice javascript necessario per ottenere l’animazione.
Le 2 cose da commentare in questo codice riguardano la prima parte, dove nella 3° riga viene associata la funzione LinkAnimate() ai tag HTML a con class=”link”.
Inoltre si può modificare la velocità della navigazione, agendo sulla variabile speed, cambiando il suo valore.
Passo 2- HTML
Ora dovrai inserire il codice HTML relativo alle diverse pagine che faranno parte del sito.
Il codice HTML è molto semplice, dove in questo caso abbiamo 4 div, uno per il menu (div id=”menu”) e gli altri 3 div che riguardano le 3 “pagine”.
Passo 3 – CSS
Infine dovrai associare gli stili alle varie parti della pagina, e noi andiamo a vedere quelle più importanti, cioè quelle riguardanti il menu e i box relativi alle pagine.
#menu { margin-top:30px; position:fixed; margin-left:450px; font-size:18px;}
.box { height:700px; }
Le 2 cose da osservare sono la proprietà position:fixed per quanto riguarda il menu, dato che dovrà sempre restare fisso durante la navigazione tra le varie pagine.
Inoltre è necessario assegnare un’altezza ai div, impostata sui 700px, ma questo valore può anche variare.
Fonte: 9Lessons
Ana on 
luigi on 
alessio.... on 
gffh on 
Pietro on 
fedeweb on 
icosensei on 
16 giugno 2010 at 23:41
Ciao Federico, che bello! Ecco questo sarebbe proprio quello che cercavo ..nella mia confusione mentale.. si andrebbe al caso mio x cio che ho in mente di fare, peccato che non riesco nemmeno a scricare la versione di jquery, pensa te..come siam messi male mhmmm che tragedia sono. Meglio se mi do all ittica, oppure vado a bogoni, sai cosa sono? Le lumache, come apprendimento son lente come me …quindi. Ciao caro, grazie di tutto. Great..you are. And also.. te lo devo dire scusami, sei davvero carino sai! A too nice boy “Pure.. . ehehe Ciao vha. Chissà, forse a presto. Bacioni
17 giugno 2010 at 10:42
Ciao e grazie per i complimenti!!
Quali difficoltà hai incontrato per scaricare jquery?
14 gennaio 2011 at 15:42
Ciao Fede,
complimenti per il blog e per tutti i tutorial che pubblichi (sono sempre stati di grande aiuto)…
Sto realizzando un sito e questo effetto mi piace molto, ho un piccolo problemino:
- ho scaricato il sorgente per poi riadattarlo alle mie esigenze… io ho la mia pagina html con i vari div ecc e ho creato un foglio css in base alle mie esigenze ma copiando e incollando i css presenti nella demo non mi funziona… deve essere un problema di sintassi, sto ovviamente sbagliando qualcosa perchè il tuo funziona xfettamente… utilizzo dreamweaver se può essere utile saperlo…
Help… spero di essermi spiegata al meglio-…. grazie millissime
16 gennaio 2011 at 12:42
Ciao Mikysan e benvenuta nel blog
Premetto che l’esempio non è mio. Hai associato il foglio di stile alla pagina html? I nomi degli stili corrispondono tra la pagina HTML e il foglio di stile CSS?
17 gennaio 2011 at 08:29
Ciao Fede,
si il foglio di stile è associato e i nomi sono gli stessi….
non riesco proprio a trovare l’errore o almeno a capire cosa nn lo fa funzionare… sembrava superfacile da fare….
18 gennaio 2011 at 23:11
Però una cosa non ho capito: cosa non funziona esattamente? Non vengono applicati gli stili?
20 gennaio 2011 at 15:44
Non fa l’effetto scorrimento…. quindi non credo sia un problema legato ai css cm pensavo io..
24 gennaio 2011 at 00:03
Mmmm così su due piedi non saprei come aiutarti, dovrei vedere il codice.
22 febbraio 2011 at 17:17
Ciaoooo…
alla fine ci sono riuscita.. appena terminato pubblico tutto!!!!
Grazieeee
22 febbraio 2011 at 22:05
Ciao! Bravissima!!! Appena pubblichi segnalami il link che sono curioso di vedere cosa hai realizzato!
24 novembre 2011 at 10:11
ciao Fede con il tuo tutorial ho realizzato la mia pagina con navigazione animata verticale.
Solo una piccola curiosità: a me il browser visualizza la barra di scorrimento cosi che un untente può anche semplicemente scorrere verso il basso per vedere gli altri div, mentre invece io vorrei che non ci fosse (come nel sito http://www.dreamerlines.lv/) che hai segnalato tu.
Cosi l’utente deve per forza premere i link per fare scorrere i div…. puoi aiutarmi? Grazie
25 novembre 2011 at 13:51
Ciao Andrea e benvenuto nel blog
Puoi “togliere” la scrollar mettendo la proprietà overflow:hidden al tag html anche se non é consigliato in termini di usabilità.
25 novembre 2011 at 22:27
Ok perfetto… grazie! (al tag body intendevi vero?)
24 novembre 2011 at 10:19
Molto bello! Grazie.
Trackbacks & Pingbacks