Una delle caratteristiche che affascina e diverte di più gli utenti windows, quando vedono un Mac, sono le animazioni del dock, la barra posto in fondo allo schermo.

E’ possibile dare lo stesso effetto anche al nostro sito web, vediamo come …

Per prima cosa scarichiamo il codice javascript da questo sito. Creiamo poi, un elemento chiamato “dock” in questo modo <div id="dock"></div> e inseriamo il pezzettino di codice che richiama javascript

<script type=”text/javascript” src=”MacStyleDock.js”></script>

dove al posto di “MacStyleDocks.js” dobbiamo inserire l’indirizzo esatto dove è salvato il codice javascript sul nostro server, ad esempio “www.viscido.org/MacStyleDock.js”

quindi il codice sarà:

<script type=”text/javascript” src=”www.viscido.org/MacStyleDock.js”></script>

inoltre dovremmo inserire dei parametri per far funzionare al meglio l’effetto scala. Sul sito web vengono così spiegati:

node

The node at which to create the Mac-style dock.

imageDetails

An array each of whose elements are object with three properties:

name

the basename of the image

sizes

an array of pizel sizes available

extension

the image extension

onclick

the function to call when the image is clicked

Requested file names consist of the concatenation of the name property, one of the values of the size property, the string ‘-reflection’ for reflections, the string ‘-full’ for full versions (so captions can be added), and the extension property.

minimumSize

The minimum size of icons in the dock.

maximumSize

The maximum size of icons in the dock.

range

The range of expansion, measured in icons. This must be an integer.

 

 

 

In sostanza, in quesiti parametri, viene definito come si deve comportare l’icona al passaggio del mouse, quale icona deve apparire, quando deve essere grande, quanto deve essere piccola, cosa accade quando ci si clicka sopra ecc ecc..
Possiamo prendere i parametri fortini nell’esempio e usarli nella nostra pagina, eccoli qui:

<script type=”text/javascript” >
var dock = new MacStyleDock(
document.getElementById(’dock’),
[
{
name : 'mac-icon-0-',
extension : '.jpg',
sizes : [32, 64],
onclick : function(){
alert(’You clicked on the first icon’);
}
},
{
name : ‘mac-icon-1-’,
extension : ‘.jpg’,
sizes : [32, 64],
onclick : function(){
alert(’You clicked on the second icon’);
}
}
],
32,
64,
2);
</script>

Fatto questo dovremmo esser pronti, quindi salviamo la pagina e riapriamola con il browser per vedere se tutto funziona per ilmeglio.

Se qualcosa non dovesse funzionare, o se l’articolo non vi è chiaro, vi rimando a questa pagina dov’è possibile trovare delle faq che vi aiuteranno di certo.

Se questo post ti è piaciuto, iscriviti ai miei feed RSS !