Tutorial jQuery – Fade Hover Menu con Immagini
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.
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.
Passo 2. Codice CSS
Vengono messe solo le regole CSS strettamente necessarie.
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.
4 Commenti
Ciao, a me basterebbe l’effetto fade automatico, senza mouseover, e partendo sempre dalla stessa immagine.
Cosa devo modificare?
Grazie
Ciao Renzo e benvenuto nel blog 😉
Questo tutorial dovrebbe fare al tuo caso.
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
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?