Fw

Wordpress Creative Developer

Tutorial jQuery – Home Page Originale in 5 Minuti

  • Tutorial Jquery
  • -

Appuntamento con i tutorial su jQuery dove oggi parleremo di kwicks, un plugin che sfrutta la libreria jquery che si può adattare a diversi scopi.

In questo tutorial vedremo come realizzare una home page originale, diversa da quelle a cui siamo abituati. Guarda subito l’esempio per capire di cosa si tratta.

Home Page Originale in 5 minuti con mootools

Nell’esempio ho preso quattro super donne (per non dire altro :D), ma potresti benissimo mettere 4 immagini che rappresentano quattro sezioni importanti del sito, con ovviamente l’aggiunta del logo, il menu e il footer.

Voglio precisare che già esiste una documentazione con degli esempi nella pagina dell’autore del plugin, però dal mio punto di vista non ne fanno capire bene tutte le potenzialità.

Procediamo con il tutorial e per seguirlo al meglio ti consiglio di scaricare prima i sorgenti.

Passo 1. Inizializzazione dello script

Come prima cosa inizializziamo lo script inserendo tra i tag head le seguenti righe di codice.

  

Passo 2. Codice HTML

Il codice HTML è una semplice lista non ordinata, dove per ogni elemento viene inserita l’immagine opportuna, ognuna collegata alla pagina interna del sito corrispondente.

Passo 3. Un po’ di stile

Anche il CSS va modificato in minima parte, rispetto all’originale. In particolare basterà modificare le dimensioni degli elementi nella lista (.kwicks li).

.kwicks li{
    /* these are required, but the values are up to you (must be pixel) */
    width: 200px;/*deve essere inferiore alla larghezza effettiva*/
    height: 500px;

Passo 4. Applichiamo lo script

Infine basta applicare lo script, alla classe .kwicks, sempre tra i tag head.

L’effetto si può personalizzare, modificandone ad esempio la velocità, l’apertura degli elementi al clic e non al passaggio del mouse ecc. Tutte le personalizzazioni le trovi sempre nella pagina del plugin.

Guarda l’esempio

Scarica il sorgente

16 Commenti

  1. Sei sicuro che si basi su mootools? A me sembra tanto un plugin per jquery.
    Anche il sito a cui rimandi pare attestare la stessa cosa.

  2. Ciao eineki e benvenuto nel blog 😉
    Ti ringrazio molto per la segnalazione, hai ragione: questo plugin lo conoscevo già da un po’ di tempo ed era nato per mootools. Ero rimasto a quell’idea non accorgendomi, nella fretta, che ora si basa su jQuery. Grazie mille! 😉

  3. Ma questi tutorial presuppongono conoscenze di Xhtml Css e Jscript giusto?

  4. Ciao Carlo, diciamo che un minimo di conoscenza la devi avere, ma comunque i tutorial cerco di realizzarli anche per persone meno esperte.
    Poi l’invito è quello di scaricare i sorgenti e di provare a modificarli per capirne bene il funzionamento. 😉

  5. In questo blog puoi trovare solo belle signore 😉

  6. eh già! Hai sicuramente una certa dote nella scelta delle immagini 😀

  7. Grazie mille Fede, grazie al tuo tutorial (più precisamente a un commento all’interno dell’esempio, quello che dice di scrivere i css prima del js) ho trovato il motivo per cui il plug-in dava problemi sul mio sito!

  8. Ciao Anna! ho visto che lo hai applicato per il portfolio. Sai cosa? io proverei a farlo al clic del mouse e non al passaggio del mouse, che dici?

  9. Ciao Fede, seguo i tuoi tutorial da un po’, semplicemente fantastici.
    In riferimento a questo però ho un problema. Ho seguito le tue istruzioni passo passo e non mi funziona solo l’effetto del “mouseover()”. Lo sto facendo con due immagini e mi succede che quando mi metto sopra la prima immagine, questa non si espande. Stesso discorso se mi sposto il mouse sopra la seconda immagine. puoi aiutarmi?

  10. Ho risolto, era un problema di conflitti. Grazie mille ancora per gli splendidi tutorial.

  11. Ottimo! Il sito è già on line? sono curioso di vederlo! 😉

  12. Nulla di speciale, però mi piace il risulatato :-). Se vuoi vederlo il sito è:
    http://www.livedancing.it/gallery.htm
    Grazie mille per tutto, continua sempre così

  13. Ottima idea! ma secondo me se usi anche delle immagini l’effetto viene più di impatto 😉

  14. Dici l’immagine al posto della scritta? Visto che il sito si presenta in stile molto elegante e molto sobrio , un’immagine al posto della scritta mi ci stona un po’, non credi?

Scrivi un commento

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