Fw

Wordpress Creative Developer

Tutorial Jquery: Come Realizzare Una Navigazione Animata

  • Tutorial Jquery
  • -

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.

01jquerynavigation

02jquerynavigation

03jquerynavigation

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.

About

Profile

Contact

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.

Scarica il sorgente

Guarda il tutorial

Fonte: 9Lessons

16 Commenti

  1. […] | Vai ai commenti | Lascia un commento Dopo aver visto qualche mese fa come realizzare una navigazione verticale animata, oggi vediamo un tutorial per realizzarne una […]

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

  3. Ciao e grazie per i complimenti!!

    Quali difficoltà hai incontrato per scaricare jquery?

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

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

  6. 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….

  7. Però una cosa non ho capito: cosa non funziona esattamente? Non vengono applicati gli stili?

  8. Non fa l’effetto scorrimento…. quindi non credo sia un problema legato ai css cm pensavo io..

  9. Mmmm così su due piedi non saprei come aiutarti, dovrei vedere il codice.

  10. Ciaoooo…
    alla fine ci sono riuscita.. appena terminato pubblico tutto!!!!
    Grazieeee

  11. Ciao! Bravissima!!! Appena pubblichi segnalami il link che sono curioso di vedere cosa hai realizzato! 😉

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

    • 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à.

  13. Molto bello! Grazie.

  14. […] plugin lo trovo particolarmente indicato per siti a una pagina con navigazione verticale animata, come puoi vedere in questi quattro […]

Scrivi un commento

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