Negli ultimi anni stiamo assistendo ad un cambiamento tecnico per molte animazioni sul web. Qualche anno fa quando mi capitava di notare qualche animazione particolare su un sito internet non potevo fare a meno di considerare, con dispiacere, che la modalità di creazione era sempre Flash.
Ora, invece, quando su un sito internet mi capita di vedere una animazione particolare clicco con il pulsante destro del mouse su di essa e… sorpresa! l’animazione è gestita da Javascript.
Tutto ciò non può che rallegrare noi programmatori web.
Ora vorrei mostrarvi come abbiamo creato uno slideshow di immagini simile a quello della home page di Artera.it utilizzando il noto framework javascript Mootools.
In questa prima parte vedremo di realizzare una brevissima analisi di come dovrà funzionare lo slideshow e di realizzare la struttura XHTML/CSS e nella seconda parte (che verrà pubblicata tra qualche giorno) vedremo come sviluppare la classe Javascript per la rotazione delle immagini.
1) Analisi funzionamento slideshow
Lo slideshow è composto da N immagini. Inizialmente l’utente vede solo la prima immagine. A intervalli regolari di X secondi l’immagine visualizzata dovrà scomparire, azzerando la sua opacità. Contemporaneamente dovrà apparire l’immagine successiva, modificando la sua opacità.
Inoltre, sotto allo slideshow di immagini sono presenti due freccette, la prima rivolta verso sinistra e la seconda rivolta verso destra. Cliccando sulla prima freccetta l’animazione deve tornare indietro di 1 immagine, cliccando sulla seconda freccetta, invece, l’animazione deve procedere visualizzando l’immagine successiva. Ovviamente, dopo aver utilizzato una delle due freccette, lo scorrimento periodico ad intervalli regolari di X secondi passando all’immagine successiva, deve rimanere tale. Esso deve essere bloccato solamente mentre vengono effettuate le operazioni di click sulle freccette.
2) Struttura XHTML/CSS
Il box contenente lo slideshow deve essere composto da:
- Titolo
- Spazio per rotazione delle immagini
- Frecce direzionali
Ecco il codice XHTML del box:
[html]
<div class="slideshow-wrapper">
<a class="h3 titolo-servizi cufon" href="#">Lo slideshow artera</a>
<div>
<a rel="gallery-home" href="/images/image1.jpg"></a>
<a rel="gallery-home" href="/images/image2.jpg"></a>
<a rel="gallery-home" href="/images/image3.jpg"></a>
</div>
<div class="gt-arrows">
<a id="left-arrow" class="hide" href="void(0);">Precedente</a>
<a id="right-arrow" class="hide" href="void(0);">Successiva</a>
</div>
</div>
[/html]
Il codice è strutturato nelle tre parte elencate: titolo, parte centrale per la gestione delle immagini e freccette. Per quanto riguarda la visualizzazione delle immagini abbiamo deciso di utilizzare degli <a>, posizionando l’immagine come background-image in modo da poterla posizionare centrata sia in verticale che in orizzontale (vedi il codice CSS sotto) e da poterne visualizzare l’ingrandimento in caso sia presente. Per le freccette, invece, abbiamo semplice creato un wrapper contenente 2 <a> identificati da un ID univoco che andremo a gestire dal Javascript.
Sicuramente hai notato che per la stampa della lista di immagini abbiamo utilizzato il template engine smarty che tramite un foreach stampa il contenuto di un array chiamato $images. Possiamo definire l’array in questione nel codice PHP che gestisce la pagina:
[php]
$images=array(‘box_hosting.png’,’box_housing.png’,’box_marketing.png’,’box_pec.png’);
$smarty->assign(‘images’,$images);
[/php]
Infine pubblichiamo il codice CSS per la visualizzazione del box:
[css]
.hide{ display:none; }
.slideshow-wrapper{
width:330px;
margin:20px auto;
border:1px solid #cccccc;
padding:20px;
}
a.h3.titolo-servizi{
display:block;
color:#333333;
margin-bottom:2px;
font-size:30px;
text-transform:uppercase;
text-decoration:none;
}
a.sottotitolo-servizi{
display:block;
color:#969696;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
margin-bottom:18px;
padding-left:2px;
text-decoration:none;
}
#slideshow{
width:330px;
height:150px;
overflow:hidden;
position:relative;
}
a.img-slide{
position:absolute;
top:0;
left:0;
display:block;
width:330px;
height:150px;
background-repeat:no-repeat;
background-position:center center;
}
a.img-slide.hide{
display:none;
}
a#left-arrow, a#right-arrow{
float:left;
display:inline;
width:15px;
height:15px;
background-image:url(/images/index-move-left.png);
margin-right:3px;
}
a#right-arrow{
background-image:url(/images/index-move-right.png);
}
[/css]
In definitiva, il prodotto grafico è illustrato dalle seguenti immagini:
La prima immagine lascia spazio alla seconda:
e così via…
Non perdere la prossima puntata!
