Ricreare l'aspetto e gli effetti del dock di un iPhone con jQuery e CSS non è una missione impossibile. Tutto quello che ci occorre sono delle icone (reperibili in rete) e il plugin Easing per creare l'effetto rimbalzo sulle icone del dock. La maggior parte del lavoro viene in effetti svolta dai CSS. Vediamo in dettaglio l'implementazione.
Cominciamo dalla marcatura:
<div id="dock">
<ul>
<li id="safari"><a href="#"><span>Safari</span></a></li>
<li id="mail"><a href="#"><span>Mail</span></a></li>
<li id="settings"><a href="#"><span>Settings</span></a></li>
<li id="phone"><a href="#"><span>Phone</span></a></li>
</ul>
</div>
Abbiamo assegnato un ID diverso a ciascuna voce di lista per poter assegnare una diversa immagine di sfondo a ciascuna voce, creando così le icone del nostro dock. Il nostro CSS segue di pari passo la marcatura scelta:
body {
padding: 2em 0;
margin: 0 auto;
width: 320px;
font: 62.5% Arial, sans-serif;
}
#dock {
width: 100%;
height: 91px;
background: url(dock.png) no-repeat;
}
#dock ul {
height: 100%;
width: 300px;
list-style: none;
margin: 0 auto;
padding: 0;
}
#dock li {
width: 59px;
height: 60px;
float: left;
margin-right: 15px;
position: relative;
left: 8px;
background-repeat: no-repeat;
text-align: center;
}
#dock li a {
float: left;
width: 100%;
height: 100%;
font-size: 1.2em;
text-decoration: none;
display: block;
text-align: center;
}
#dock li a span {
display: none;
background: #fff;
color: #000;
color: rgba(0, 0, 0, 0.5);
padding: 0.3em;
-moz-border-radius: 6px;
border-radius: 6px;
font-weight: bold;
position: relative;
top: 65px;
}
#dock #safari {
background-image: url(Safari.png);
left: 4px;
}
#dock #mail {
background-image: url(Mail.png);
}
#dock #settings {
background-image: url(Settings.png);
left: 12px;
}
#dock #phone {
background-image: url(Phone.png);
left: 15px;
}
L'elemento span all'interno di ciascun link verrà usato per creare l'effetto di un tooltip quando il mouse passa su ciascuna icona. Il nostro codice jQuery è relativamente semplice:
$(document).ready(function() {
$('li', '#dock').each(function() {
var $li = $(this);
$li.hover(function() {
$li.stop(true, true).animate({
top: '-5px'
}, 'slow', 'easeOutBounce');
$li.find('span').stop(true, true).fadeIn('slow');
}, function() {
$li.stop(true, true).animate({
top: 0
}, 'slow', 'easeOutBounce');
$li.find('span').stop(true, true).fadeOut('slow');
}
);
});
});
Dato che usiamo l'evento hover dobbiamo anche usare il metodo stop() per fare in modo che le animazioni si concludano sempre senza essere aggiunte alla coda di animazioni, creando così un fastidioso eco che potrebbe compromettere l'usabilità della nostra implementazione. L'effetto easeOutBounce ci viene offerto dal plugin Easing.
Potete visionare l'esempio finale in questa pagina.