Fw

Wordpress Creative Developer

Tutorial jQuery – Fade Hover Menu con Immagini

  • Tutorial Jquery
  • -

Appuntamento con i tutorial jQuery, dove si vanno a vedere delle tecniche per migliorare la user experience dell’utente.

Per il tutorial di oggi ho preso spunto dalla richiesta di un lettore, dove mi ha segnalato questo sito chiedendomi come realizzare gli effetti presenti nella testata del sito.

Tutorial jQuery - Slide Show Hover

Vediamo meglio le caratteristiche di questo slide:

  • immagine random a ogni caricamento dell’home page;
  • slideshow di foto iniziale;
  • cambio di immagini con effetto fade al passaggio del mouse sopra le voci del menu.

In questo tutorial ti propongo un mio esempio, ispirandomi a Parigi dove andrò tra 20 giorni con la mia dolce metà :D.

Ecco i passi per ottenere l’effetto.

Passo preliminare

Prepara le foto tutte delle stesse dimensioni, nel mio caso 956 x 357 px.

Passo 1. Codice HTML

Ecco il codice HTML necessario, commentato.

Codice HTML

Passo 2. Codice CSS

Vengono messe solo le regole CSS strettamente necessarie.

Codice CSS

Passo 3. Applichiamo jQuery

Prima della chiusura del body, inserisci le righe codice necessarie per richiamare la libreria jQuery e lo script per lo slide (slideshow.js).

Vediamo qui in particolare il codice per lo slide, che è stato scritto dagli sviluppatori del sito PRG a cui mi sono ispirato, di cui ho commentato le parti principali.

Scarica il sorgente

Guarda il tutorial

4 Commenti

  1. Ciao, a me basterebbe l’effetto fade automatico, senza mouseover, e partendo sempre dalla stessa immagine.
    Cosa devo modificare?
    Grazie

  2. Ciao Renzo e benvenuto nel blog 😉

    Questo tutorial dovrebbe fare al tuo caso.

  3. ciao fede,
    mi chiamo andrea e non posso fare a meno di complimentarmi con te per il sito, un vero e proprio pozzo dei desideri.-)
    sono uno scrittore e ho imparato html e css da me per realizzare il mio sito (questo per dire che sono ancora a livello di una capra riguardo web design.-)

    in particolare, ho usato questo tutorial per cambiare l’immagine in trasparenza sul background in relazione dell’hover sul menu.

    per fare questo ho modificato il codice qui proposto e sono iniziati alcuni di problemi (sto usando un eufemismo.-) a seconda del browser, la pagina incriminata è quella della versione italiana:

    internet explorer: non c’è verso di farlo funzionare. appare la prima immagina e quella resta nonostante l’hover sul menu.

    mozilla firefox: nel complesso funziona, ma l’immagine associata alla voce del menu su cui si effettua l’hover viene caricata prima in “basso” e quindi spostata nella posizione definitiva

    chrome: all’apertura della pagina, l’immagine lampeggia a lungo, quasi un minuto, poi tutto funziona come su mozilla.

    La capra (cioè io) non è ancora molto pratico di jquery (sono ancora allo stadio copia/incolla e prega!) e quando deve adattare i vari plug in inevitabilmente fa danni…puoi darmi una mano?

    ti ringrazio dal profondo del codice sorgente.-)

    andrea

  4. Complimenti, però cosa dovrei andare a modificare nel caso volessi la stessa cosa ma in verticale? cioè un “menu” a sinistra e le immagini su una colonna a destra?

Scrivi un commento

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