Fw

Wordpress Creative Developer

Tutorial jQuery – Creare Una Navigazione Animata Magica

  • Tutorial Jquery
  • -

Appuntamento con i tutorial su jQuery, dove oggi andiamo a vedere Panel Magic un super plugin, che ti permetterà di realizzare una navigazione nel sito orizzontale, verticale e diagonale, raramente si è vista una navigazione del genere in un sito web.

Guarda subito la demo per capire di cosa si tratta.

Tutorial jQuery - Navigazione Animata

Non ti basta? Vai a vedere il sito di Samuele Bersani, dove non è stato usato panel magic, ma qualcosa di molto simile. Bello vero?

Il plugin è compatibile con tutti i browser, compreso Internet Explorer 6! Andiamo a vedere come utilizzarlo al meglio.

Passo 1. Inizializzazione

Il primo passo, come per qualsiasi script, è quello di inserire le righe di codice necessarie per l’inizializzazione.

    

Passo 2. Inseriamo le “pagine”

Ora, tra i tag body, dobbiamo inserire il codice necessario per i diversi pannelli, ognuno dei quali sarà un div.

About Contenuto div

Service Contenuto div

Contact Contenuto div

E così via per tutti i div che vorrai inserire.

Inoltre dovrai inserire il div “griglia”.

sitemap

Passo 3. Un po’ di stile

Per quanto lo riguarda lo stile, non bisogna fare grandi cose, a parte definire le dimensioni dei diversi panel, agendo sul selettore .content, ad esempio in questo modo.

.content {
	 background:#FFF;
	 border:5px solid #BFBFBF;
	 padding:10px;
	 width:900px;
	 height:450px;
	 overflow:auto;
	 margin:0 auto 0 auto;
}

Passo 4. Applichiamo lo script

Infine applichiamo lo script, mettendo prima della fine del tag body queste righe di codice.

  

Guarda l’esempio
Scarica il sorgente

37 Commenti

  1. …mmm effettino molto interessante, anche se non so quanto usabile possa essere, ottimo per un portfolio.

  2. Ciao, bellissimo il new panel! Ora vedró se usarlo o…ma, spettacolare, e tu sei sempre bravissimo. The best! Buona giornata 😉 ()

  3. …effettivamente ha ragione Ennio, é poco fattibile, hmm difficile da adattare, bisognerebbe costruire un sito attorno al panel e nn viceversa non so se mi spiego, e poii va comunque a gusti, ma forse con qualche modifica…. cosi com é mhmmm 😛 XD Bacii.8 -)8

  4. @ennio
    Si ottima osservazione. Hai ragione riguardo all’usabilità. Può creare problemi nella navigazione e può disorientare l’utente.
    Come dici tu è molto adatto per un portfolio

    @Nadia
    Grazie Nadia! si certo bisogna modificarlo per renderlo più bello esteticamente. Se hai difficoltà nell’utilizzo scrivimi pure! ciao!

  5. ottima risposta ad una buona osservazione, non la mia ovvio. ok . stavo giusto crendo un panel ma nn certo cosi .. complicato e bello intendo. no anche con altri temi.. nn mi piace, troppo “freddo.

    ciao

    buone vacanze se.. 🙁

  6. Cmq grazie della risposta.

    Sai é bellissimo il tuo sito visto
    da mobile windows ()

  7. … un panel a menu intendo, un po particolare, gioca tanto la grafica

    e, hmm se mi riesce Federico .. ^-^ whau!

    se solo nn fossi cosi… lasciam perdere.

    ti faccio sapere presto *) mwA

  8. Ciao, prima di tutto complimenti per il Blog.
    Sarebbe interessate realizzare una mappa del sito in questo modo. Ovvero fare in modo che si apra la pagina a cui si riferisce il panel semmai dopo che si è ingrandita.
    Credo che sia una cosa fattibile… non dovrebbe essere complicato modificare lo script e aggiungere un pò di programmazione.

  9. Ciao Ugo e benvenuto nel blog 😉

    Vediamo se sono riuscito a capire cosa intendi..tu vorresti avere tutti i panel che rappresentano le pagine del tuo sito, e cliccando su un panel andare alla pagina corrispondente, e non al div giusto?

    Confermami se ho capito bene e poi ci ragiono su..

  10. Ciao, grazie per la risposta prima di tutto.
    Si cmq hai capito perfettamente cosa intendevo.
    Alla fine diverrebbe una vera e propria mappa del sito, ma vista in maniera diversa dal solito.

  11. Che due genii! Bravi. Complimenti. Quale onore.

    Devo essere sincera io non avevo capito cosa intendeva lei, Ugo,
    perdonatemi.
    Bel nome, nome importante. Ha dei bellissimi siti complimenti.

    Anche se avevo pensato anch io a qualcosa di simile modestamente.
    Magari lo sapessi fare, col progetto che ho in mente sarebbe l’ideale,
    poter aprire magicamente delle pagine cliccando su delle icone o
    immagini che ingrandendosi (es: 4 in una pagina) al passaggio del
    mouse, si possono richiamare da qualunque lato del sito.

    Scusate se mi spiego male sono ancora alle prime armi. Tu lo sai bene Federico.

    C’è gia qualcosa di simile ma non cosi, vero?
    Per ora mi accontento del mio menu panel a scomparsa ma nn mi …hmm nn mi piace. nn va bene.

    Si puo’ fare? Chiedo, ad entrambi se posso. Grazie.

  12. Ciao Nadia,
    non c’è bisogno del lei… sono ancora giovane 🙂
    Si potrebbe fare con un pò di lavoro.
    Se tu conosci un linguaggio di programmazione… e hai un server tuo sarebbe ideale :-). Ma sono casi rari.
    In teoria potresti crearti le schermate delle varie pagine e fare una jpg.
    Poi si deve modificare il codice… che crea lo script per inserire il link sull’immagine.

    Io ancora non ho visto il codice a dire la verità… xkè al momento sono impegnato un poco :-).

  13. Beh come pensavo è semplicissimo abbozzare una cosa molto semplice di quello che sarebbe bello realizzare.

    basta impostare le dimensioni del div che si apre, e poi all’interno inserire una img delle stesse dimensioni. e al tag img far precedere il tag <a href
    E si ha un 'effetto molto simile.
    Il bello sarebbe poter fare via programmazione uno stamp al volo e creare le img. in modo da avere una mappa con preview della pagina in tempo reale.
    Ma si dovrebbe avere accesso al server per farlo.

  14. Ciao Ugo, non é una questione di etá ma di rispetto,
    sono abituata cosi, chiunque abbia davanti.

    Si qualcosina so, sto studiando, sempre ma, 🙁 ,
    ho capito, non ho un server mio ma si puo’ fare anche
    secondo me, bisogna provare a parole ê difficile , e nn si conclude nulla.
    Se avessi le voste, “tue capacitá sarebbe molto piu facile
    eheh mhmm magari. Comunque ci proviamo dai 😉
    Grazie Ugo, sei molto gentile.

  15. ..opps , pardonne non avevo letto l ultimo msg!
    É certo con un link director che aprire una pag ingrandendola all istante, si ma intendevo appunto questo, creare una mappa con preview in tempo reale, questo nn e’ semplice, almeno x me.

    Grazie ancora Ugo, ciao 😉

  16. Ciao, eccoti il link ai file modificati.
    Volendo se conosci un linguaggio tipo asp o asp.net, php puoi al posto delle immagini inserire il codice vero e proprio. Semmai per pulizia di codice conviene usare gli include.

    http://www.setteweb.it/panel-magic.rar

    Domani lo levo però 🙂

  17. Beh x questo vedo un pò… ma ho bisogno di un pò di tempo, poi se anche altri sanno come fare… 🙂

  18. Alla fine penso che le cose piu “semplici” siano le migliori,
    ma é pur vero che l uomo ha delle capacità incredibili, una fantasia e ambizioni che davvero é un peccato non sfruttare.
    Fortuna ci sono persone come te e Federico che mi spronano a mettermi in gioco.
    in the end.

    Grazie davvero Ugo, troppo gentile ,()

  19. scusa arrivo tardi .. ho un mal di testa… eheh
    ma tu mi vuou morta! lo togli? e come fai ? Chi 6? eheh
    O mio Dio Ugo io non so fare molto, include? No conosco solo giusto le basi ma di php, asp etc no, come devo fare per inserire il codice al posto.. ? E il bello che cercavo proprio di capire questo ieri.
    Ok vado a vedere di capirci qualcosa. Qui sul lago si muore dal caldo sai, magari dopi ok eheh 😉

    thank you so much Grazie gentilissimo Ugo,
    ciao, buona serata ()

  20. Ugo 6 un genio! Forse a te non sembra ma tu con due frasi hai
    fatto piu di mille parole o manuali, hai messo in luce delle cose fondamentali della programmazione, per primo mi hai fatto capire quanto ignorante sia in materia, grazie, ehehe
    ma anche dato un grande aiuto, ora penso di sapere cosa e dove cercare,
    che non è poco. Davvero grazie.

    Spero a presto, baci =)) ()

  21. Ma non ci credooo…..
    Ciao Federico, scusa dei mille messaggi ma devo ringraziare ancora questo gentile signore,
    ehm ragazzo?! Ma è tuo il link! Lo script l hai fatto tu!? Scusa non l’avevo aperto, ma non l’hai fatto per apposta x me, vero?

    O si? Bhè comunque grazie, non ho parole, ci sono ancora dei signori al mondo mi fa piacere, CHE BRAVO.
    Ora capisco perchè lo toglievi . Eh il caldo….. ehehe

    ok vado, passo e chiudo..() ciao

  22. di nulla. Noto che ti piacciono i beatles.
    Ciao

  23. Ciao Ugo,
    si molto . Ho dei siti sul wap dedicati 2them. Ma ora son kiusi, é la prima volta che chiudo x cosi tanto tempo in 6anni.

    Ho visitato meglio i tuoi siti, volevo lasciare un msg ma avevo paura di disturbare, sono bellissimi e ml professionali, complimenti.

  24. @Ugo
    Grazie Ugo per l’aiuto! In effetti non era così difficile da realizzare. Grazie per la collaborazione 😉

    @Nadia
    Quando hai qualcosa di pronto metti il link che sono curioso di vedere che combini! 😉

  25. Senz’altro lo faró con ml piacere, give time plz
    é troppo caldo ora, vorrei fare un lavoro fatto bene..se possibile

    Grazie Federico caro, sei sempre cosi gentile 😉

  26. Whau!l..Ora si! Hai sistemto, ke carino.. graziee () Mi sembra anche piu’ bello, se possibile. So was allora era vero…. non un calesse o un colpo di sole 😉 eheh j joke cherie u know . You know it? sii . Presto metto il link.

  27. Noo , é tornato hmmm bhé nn fartene un problema x caritá, anke se é tt a tuo vantaggio ricordalo. sai avrei tanto voluto che qualcuno mi avesse fatto notare i miei “errori” (nn é il tuo caso) in passato ma mai nessuno l ha fatto e mi dispiace. io io nn credo piu molto nell … lasciam perder . ciao

  28. no c é qualcosa che nn va nell impostazione predif.ke hai impostato x il mobile, nn puoi essere perfetto caspita! xro sei daccordo ke il mobile sará il futuro? Ci puoi scommettere, vedi apple, quindi okkio di riguardo ai phones, nn x me io ho 3 pc davanti a me ma uso il mobile vedi, nn ho il maximo ma presto, presto ad es. il jquery sara incorporato di serie in tt i cell e simil vedrai, ma lo sai . Cancella pure questi ultimi msgs dopo letti grazie, nn interessano a nessuno e nn van bene ok. un bacio . Comunque sei un programmatore Fantastico! lo so io xke

  29. Ciao bellissimo tutorial !!!! mi piacerebbe realizzare un sito coi ma se volessi cambiare sitemap e inserire un men come devo fare ???

    grazie !!!!!

  30. […] Condividi In questo blog sono stati proposti più volte tutorial per realizzare delle navigazioni animate in […]

  31. Ciao sono nuovo, stavo provando a creare un sito con Panel Magic. Partendo dal presupposto che sono alle prime armi mi chiedevo se fosse possibile togliere l’effetto bounce, e se si come.

    Grazie mille dell’attenzione

    Simone

  32. Ciao Simone e benvenuto nel blog 😉

    A quale effetto bounce ti riferisci?

  33. a quello dell’animazione di spostamento tra div. all’arrivo sul div avviene un effetto bounce, io vorrei riuscire a toglierlo in modo che arrivi direttamente sul div senza “fronzoli”. e se posso abusare della tua cortesia anche abbassare la velocità della suddetta animazione.
    grazie ancora e complimenti per il blog che è stato grande fonte di ispirazione.

  34. scusa ho appena riguardato l’esempio. e su quello non c’è effetto bounce. appena ho 2 minuti uploado la prova così magari riesci a suggerirmi meglio.

  35. http://www.sfog.it/prova/panels3.html questo è il link della prova. comunque è tutto molto provvisorio. e non ho toccato i file .js. perchè a me fa l’effetto bounce?

  36. ho risolto. non avevo notato il codice nella pagina html.
    grazie mille della disponibilità

  37. Ottimo! bravo 😉

Scrivi un commento

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