jQuery: effetto salto sulle icone

Gli effetti jQuery sulle icone sono molteplici, ma l'effetto salto è sicuramente uno dei più richiesti. Nell'esempio che segue vedremo come implementare un effetto salto sulle icone di vari social network. All'effetto di base, ottenuto tramite il metodo animate(), aggiungeremo un ulteriore effetto di rimbalzo ottenuto tramite il plugin Easing.

Per prima cosa iniziamo con la marcatura dell'esempio:


<ul id="social">
	<li><a href="#" id="facebook">Facebook</a></li>
	<li><a href="#" id="linkedin">Linkedin</a></li>
	<li><a href="#" id="twitter">Twitter</a></li>
	<li><a href="#" id="youtube">YouTube</a></li>
</ul>

Quindi andiamo ad aggiungere i nostri stili CSS, tenendo presente che una parte delle icone non deve essere visibile. Usiamo quindi il posizionamento relativo sui link e aggiungiamo la dichiarazione overflow: hidden alla lista per evitare che il contenuto in eccesso venga mostrato:


#social {
	width: 276px;
	height: 64px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	overflow: hidden;
	position: relative;
}

#social li {
	width: 64px;
	height: 64px;
	float: left;
	margin-right: 5px;
}

#social a {
	display: block;
	width: 100%;
	height: 100%;
	float: left;
	text-indent: -1000em;
	background-repeat: no-repeat;
	background-position: 0 0;
	position: relative;
	top: 30px;
}



#facebook {
	background-image: url(facebook.png);
}
#linkedin {
	background-image: url(linkedin.png);
}

#twitter {
	background-image: url(twitter.png);
}

#youtube {
	background-image: url(youtube.png);
}

Abbiamo usato la proprietà top su ciascun link in modo da spostare le icone verso il basso e nascondere parte del loro contenuto. Con jQuery andremo ad usare l'evento hover() per gestire sia l'entrata che l'uscita del mouse sull'area delle icone. Dato che andremo a creare un'animazione su ciascun stato, dobbiamo essere sicuri che venga eseguita una sola animazione per volta, senza strascichi. Per questo motivo usiamo il metodo stop() con entrambi i parametri impostati su true:


$(function() {

   $('li', '#social').each(function() {
   
     var $li = $(this);
     var $a = $('a', $li);
     
     $a.hover(function() {
     
       $a.stop(true, true).
       animate({
         top: 16
       }, 'slow', 'easeOutBounce');
     
     
     }, function() {
     
       $a.stop(true, true).
       animate({
         top: 30
       }, 'slow', 'easeOutBounce');
     
     });
   
   
   });

});

Il metodo animate() modifica la proprietà top di ciascun link e aggiunge un effetto di bouncing (rimbalzo) usando il valore easeOutBounce fornito dal plugin Easing.

Potete osservare l'effetto finale in questa pagina.

Torna su