Nella puntata precedente vi abbiamo mostrato come creare una vetrina multimediale con MooRD, oggi vi spiegheremo come creare una pagina simpatica e con animazioni accattivanti per esporre una classifica di cd, libri, articoli, fotografie o altro.
Il codice html che andremo a realizzare richiede poche competenze di fogli di stile. Abbiamo scelto di dividere un quadrato in 16 porzioni e di inserire le nostre immagini dentro ad ognuna di esse. Per far questo basta imparare ad utilizzare l'attributo float degli stylesheet. Abbiamo deciso infatti di rappresentare ogni riquadro con un elemento di classe uguale a "cd" e di identificare il quarto di ogni riga con la classe "cdr". Vedremo in seguito nel nostro foglio di stile come queste due classi differiscano appunto per la parola float.
<div id="img1" class="cd">
<img src="img/1.jpg"
width="100"
height="100"
border="0"
alt="">
</div>
<div id="img2" class="cd">
<img src="img/2.jpg"
width="100"
height="100"
border="0"
alt="">
</div>
<div id="img3" class="cd">
<img src="img/3.jpg"
width="100"
height="100"
border="0"
alt="">
</div>
<div id="img4" class="cdr">
<img src="img/4.jpg"
width="100"
height="100"
border="0"
alt="">
</div>
Accanto al riquadro che espone i nostri cd in lizza per la classifica, abbiamo scelto di mettere un riquadro piu' grande con uno sfondo e che dovrà contenere i risultati creati dinamicamente dal nostro javascript.
<div id="pos" style="width:200px;float:left">
<div id="pos0" class="parade"></div>
<div id="pos1" class="parade"></div>
<div id="pos2" class="parade"></div>
<div id="pos3" class="parade"></div>
<div id="pos4" class="parade"></div>
</div>
L'elemento che si chiama pos0 conterrà il risultato numero uno della classifica; nell'elemento pos1, inseriremo il successivo; e cosi' via. Ogni elemento è contraddistinto da un tag div. I div sono molto utilizzati nei fogli html di ultima generazione e possiamo immaginarli come riquadri. Ogni div assume le caratteristiche che gli vengono dettate dagli attributi di stile id, class e style. I nostri elementi, per esempio, hanno tutti un class di nome parade; questo class viene descritto nel foglio css che andremo ora ad esaminare.
Come avevamo anticipato, vediamo l'attributo float uguale a left nell'elemento che identifica la classe cd. Ogni elemento di una pagina html puo' essere descritto nei fogli di stile tramite il tag che deve rappresentare o tramite gli attributi class o id. Se dobbiamo descrivere un id utilizzeremo la dicitura cancelletto (#) id, se dobbiamo descrivere una classe utilizzeremo la dicitura punto e il nome della classe.
.cd{
float:left;
position:relative;
color:#FFFFFF;
margin:0px auto;
}
Rispetto agli altri CODE-IT che abbiamo realizzato, questa volta abbiamo scritto qualche riga di codice javascript leggermente piu' complessa. Ma non c'è nulla da temere, perché il nostro programma è comunque comprensibile grazie a Mootools e MooRD.
Tramite l'operatore rappresentato da due simboli dollaro, che si chiama selector, riusciamo a includere in una variabile che chiamiamo cds tutti gli elementi con tag uguale a div e classe uguale a cd. In questa maniera riusciremo poi a utilizzare la parola each per assegnare una funzione ad ogni elemento della collezione contenuta in cds.
var cds = $$('div.cd')
var shakeBomBom = new Hash();
cds.each(function(cd){
shakeBomBom.include(cd.id, new Fx.Shake(cd.id, {duration:200}));
cd.addEvent('mouseover', function(event) {
shakeBomBom.get(cd.id).start();
});
});
Abbiamo creato poi delle variabili che contengono una serie di effetti speciali creati da MooRD. Abbiamo scelto di associare un effetto di scroll a ognuno degli elementi della classifica e un effetto gradiente alla prima posizione della classifica.
var pos0 = new Fx.Gradient('pos0', {duration: 1000});
var pos1 = new Fx.ScrollOut('pos1', scrollOpts);
var pos2 = new Fx.ScrollOut('pos2', scrollOpts)
var pos3 = new Fx.ScrollOut('pos3', scrollOpts);
var pos4 = new Fx.ScrollOut('pos4', scrollOpts);
Associamo cosi' un effetto di scroll a ognuno degli elementi della classifica e un effetto gradiente alla prima posizione della classifica.
var pos0 = new Fx.Gradient('pos0', {duration: 1000});
var pos1 = new Fx.ScrollOut('pos1', scrollOpts);
var pos2 = new Fx.ScrollOut('pos2', scrollOpts)
var pos3 = new Fx.ScrollOut('pos3', scrollOpts);
var pos4 = new Fx.ScrollOut('pos4', scrollOpts);
Per creare le cinque posizioni random tra i nostri sedici cd utilizziamo una funzione molto utile che ci viene fornita da MooTools, tale funzione si chiama random e viene rappresentata da un simbolo $ e dalla parola random. Per selezionare quindi un numero a caso tra uno e sedici, scriveremo dollaro random e tra parentesi i numeri limite uno e sedici.
var num0=$random(1,16);
var num1=$random(1,16);
var num2=$random(1,16);
var num3=$random(1,16);
var num4=$random(1,16);
Infine concateniamo le nostre funzioni in modo da avere un effetto che scrollerà la nostra classifica automaticamente quando viene caricata la nostra pagina. La funzione che utilizzeremo per concatenare tra loro diversi effetti, è un'altra utile funzione di MooTools, che si chiama chain. All'inizio del nostro file javascript abbiamo inizializzato un oggetto Chain associandolo alla variabile myChain.
var myChain = new Chain();
Ora possiamo usare questa variabile e concatenare tra di loro i nostri effetti mettendo una funzione come argomento di ogni metodo chain.
myChain.chain(
function(){
pos4.start('left');
shakeBomBom.get('img'+num3).start();
},
function(){ pos4.wrapper.fade(0); },
function(){
pos3.start('up');
shakeBomBom.get('img'+num2).start();
},
function(){ pos3.wrapper.fade(0); },
function(){
pos2.start('right');
shakeBomBom.get('img'+num1).start();
},
function(){ pos2.wrapper.fade(0); },
function(){
pos1.start('up');
shakeBomBom.get('img'+num0).start();
},
function(){ pos1.wrapper.fade(0); },
function(){
var hitParade = function(){
pos0.start([
'#fffff',
'#7eba9e',
'#8eaeaf',
'#9a6f1b',
'#df7aad',
'#eeaba8',
'#2121a8',
'#eeff2a'])};
hitParade();
hitParade.periodical(2000);
new Fx.Shake('img'+num0,
{duration:200,
mode: 'horizontal'}).start();
},
function(){ clearInterval(callCh); }
);
Per scatenare il primo dei nostri eventi utilizziamo la funzione javascript setInterval che, per come l'abbiamo scritta, chiama il primo argomento callChain ogni 2 secondi.
var callCh = window.setInterval("myChain.callChain()", 2000);
Grazie a questo file javascript, abbiamo imparato a utilizzare funzioni per automatizzare gli eventi; abbiamo visto come usare gli stylesheet per porre i nostri elementi uno a fianco all'altro e abbiamo letto il codice che MooRD e MooTools ci aiutano a scrivere in modo molto semplificato.
