Oggi volevo proporvi questo metodo di simulazione di un effetto hover, trovato su tympanus qualche tempo fa.
Trovo questo effetto molto gradevole e sicuramente tornerà utile a chi vorrà utilizzarlo per il proprio portfolio.
Analizziamolo meglio:
Fondamentalmente abbiamo un immagine divisa in due parti.
Dove la parte di sinistra è l’originale, mentre la parte di destra è quella che simulerà l’effetto hover.
Grazie a jQuery e al Css con la proprietà background-position, possiamo ricreare questo piacevole effetto.
Vediamo come:
Codice Html:
Quello che dobbiamo fare è semplicemente assegnare la classe “pht” al div che conterrà la nostra immagine.
1 2 3 4 5 | <div class="content"> <div class="photo1 pht"><p style="display:none;"></p></div> <div class="photo2 pht"><p style="display:none;"></p></div> <div class="photo3 pht"><p style="display:none;"></p></div> </div> |
Codice jQuery:
JQuery ci serve per “animare” la transizione, in questo caso con il parametro “fast“.
Molto bello a mio parere anche l’effetto che si ottiene con “slow“, a voi la libertà di sperimentare!
1 2 3 4 5 6 7 8 9 10 11 12 | $(function() { $('.pht').hover( function() { var $this = $(this); $this.find('p').stop(true,true).fadeIn('fast'); }, function() { var $this = $(this); $this.find('p').stop(true,true).fadeOut('fast'); } ); }); |
Codice Css:
Molto semplicemente noi abbiamo delle immagini 600×452, e semplicemente all’inizio mostriamo i primi 300px, quando ci spostiamo sull’immagine con il puntatore, attraverso il css andiamo a mostrare i successivi 300px.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .photo1, .photo2, .photo3{ width:300px; height:452px; background-repeat:no-repeat; background-position:0px 0px; float:left; margin:5px; border:1px solid #333; } .photo1{ background-image:url(../images/1.png); } .photo2{ background-image:url(../images/2.png); } .photo3{ background-image:url(../images/3.png); } .photo1 p, .photo2 p, .photo3 p{ background-position:-300px 0px; /*IL TRUCCO E' QUI !*/ display:block; width:100%; height:452px; background-repeat:no-repeat; } .photo1 p{ background-image:url(../images/1.png); } .photo2 p{ background-image:url(../images/2.png); } .photo3 p{ background-image:url(../images/3.png); } |
Scarica un esempio da qui.
Semplice no?
Unica pecca è che dovremo lavorare a priori con Photoshop per prepararci tutte le immagini, ma sicuramente la pazienza verrà ripagata! Non credi?
Non dimenticare di condividere l’articolo con i tuoi amici!
[adsense]
1 Pingback