In un articolo precedente abbiamo realizzato un semplice slider di contenuti utilizzando JavaScript per i controlli e le transizioni CSS3 per le animazioni.
Partendo dagli stessi pressuposti, in questo articolo vedremo Sequence.js, un plugin jQuery capace di sfruttare appieno i CSS3 e le API di jQuery per realizzare slider di grande effetto.
L'obiettivo principale è quello di liberare gli sviluppatori ed i designer dai limiti degli effetti preimpostati di molti slider, demandando le animazioni ai fogli di stile e limitando il codice JavaScript alla gestione dei controlli e della sequenzialità dei frame da animare.
Sequence.js con jquery e CSS3
Il primo passo per utilizzare Sequence.js è scaricare il plugin ed inserirlo nel head del documento:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sequence.jquery.js"></script>La versione attuale del plugin (0.1b) comprende già Modernizr 2.0.6 per rilevare il livello di supporto ai CSS3.
Sequence.js è stato pensato per funzionare pienamente nei browser che supportano JavaScript e
le transizioni CSS.
Per i browser più datati, il comportamento di default è un cross-fading fra i vari frame, in modo da garantire un effetto gradevole agli occhi degli utenti.
Il funzionamento di base prevede l'alternarsi di tre stati del singolo frame identificati da classi CSS, alle quali corrisponderanno nel foglio di stile le regole di presentazione:
| Campo | Descrizione |
|---|---|
nessuna classe |
lo stato iniziale del frame |
animate-in |
lo stato dell'animazione in ingresso del frame fino al suo completamento |
animate-out |
lo stato dell'animazione in uscita |
A questo punto è necessario definire i vari frame dello slider secondo uno specifico markup di base:
<div id="sequence">
<ul>
<li>
<!-- contenuto del frame 1 -->
<div class="frame">
<p>Frame 1</p>
</div>
</li>
<li>
<!-- contenuto del frame 2 -->
<div class="frame">
<p>Frame 2</p>
</div>
</li>
<li>
<!-- contenuto del frame 3 -->
<div class="frame">
<p>Frame 3</p>
</div>
</li>
</ul>
</div>La struttura di base prevede un contenitore ed una lista puntata, ogni elemento della lista sarà un frame dello slider.
Proseguiamo col realizzare un tema per lo slider, consistente in alcune regole CSS di base per il contenitore ed altre classi che definiscano i tre stati dei frame.
Un tema di esempio potrebbe essere il seguente:
/* regole di base */
#sequence {
border: black solid 3px;
height: 370px;
margin: 40px auto;
overflow: hidden;
position: relative;
width: 450px;
}
#sequence ul,
#sequence li {
margin: 0;
padding: 0;
list-style-type: none;
}
#sequence li > *{
position: absolute;
}
/* stile dei frame contenitori*/
.frame {
background: #ccc;
color: #333;
height: 350px;
padding: 10px;
top: 0;
width: 430px;
/* stato iniziale */
left: -450px;
opacity: 0;
filter: alpha(opacity=00); /* IE6-IE8 */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* stato intermedio */
.frame.animate-in {
left: 0;
opacity: 1;
filter: alpha(opacity=100); /* IE6-IE8 */
}
/* stato finale */
.frame.animate-out {
left: 450px;
opacity: 0;
filter: alpha(opacity=00); /* IE6-IE8 */
}Non resta che abilitare lo slider via JavaScript:
$().ready(function($){
$("#sequence").sequence({
autoPlay: true, //scorrimento automatico
autoPlayDelay: 3000 //tempo fra un'animazione e l'altra in ms
});
});Come potrete verificare dall'esempio, lo scorrimento fra i frame non è continuo. Ciò può essere utilizzato per impostare effetti di dissolvenza in entrata ed uscita di sicuro effetto, inoltre lo script blocca automaticamente lo scorrimento
quando il mouse è sopra ad un frame.
Altre considerazioni riguardanti il supporto di quei browser in cui JavaScript è disabilitato: in questo caso l'utente non può usufruire dell'animazione fra i frame, ma è comunque possibile visualizzare il primo aggiungendo manualmente la classe 'animate-in' ai suoi elementi figli:
<li>
<div class="frame animate-in">
<p>Frame 1</p>
</div>
</li>
<li>
<!-- ... -->
</li>Con JavaScript abilitato, Sequence.js rimuove automaticamente quella classe in fase di inizializzazione.
Animazioni complesse con SequenceJS
Una caratteristica interessante di Sequence.js, è quella di associare le classi dei vari stati ad ogni figlio diretto contenuto nella lista puntata, permettendo un controllo completo ed indipendente delle varie parti che compongono un frame.
Possiamo, ad esempio, aggiungere un ulteriore campo di testo a comparsa dall'alto (esempio):
.claim {
color: #FFF;
font-size: 2em;
top: -200px;
left: 20px;
opacity: 0;
filter: alpha(opacity=00); /* IE6-IE8 */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.claim.animate-in {
top: 150px;
opacity: 1;
filter: alpha(opacity=100); /* IE6-IE8 */
}
.claim.animate-out {
top: 450px;
opacity: 0;
filter: alpha(opacity=00); /* IE6-IE8 */
}Attraverso le opzioni di Sequence.js è possibile abilitare i controlli di navigazione fra un frame e l'altro. In questo caso è necessario tenere conto che la sequenza degli stati usata dal plugin sarà invertita alla pressione del tasto 'indietro':
<div id="sequence">
<ul>
<!-- frame -->
</ul>
<a href="#" class="btn prev">indietro</a>
<a href="#" class="btn next">avanti</a>
</div>
<script>
$().ready(function($){
$("#sequence").sequence({
nextButton : '.next',
prevButton : '.prev',
autoPlay: false
});
});
</script>Nel codice sopra '.next' e '.prev' identificano gli elementi usati come controlli per lo slider e devono essere posizionati all'interno
del contenitore. Ecco l'esempio funzionante.
Grazie ai metodi e alle proprietà offerte da Sequence.js è inoltre possibile gestire con facilità un navigatore con l'indicazione del frame corrente.
Nel nostro caso basterà aggiungere il markup necessario:
<div id="sequence">
<!-- ... -->
<div class="sequence-navigator">
<a href="#" data-frame="1" class="active">1</a>
<a href="#" data-frame="2">2</a>
<a href="#" data-frame="3">3</a>
</div>
</div>Successivamente sfruttare le API di Sequence.js per abilitare il navigatore (esempio):
$().ready(function($){
var $sequence = $("#sequence").sequence({
nextButton : '.next',
prevButton : '.prev',
autoPlay: false
});
var $navigation = $sequence.find('.sequence-navigator a');
//ottiene l'instanza di Sequence.js
var sequence = $sequence.data('sequence');
//assegna un handler al click sulla navigazione
$sequence.delegate('.sequence-navigator a', 'click', function (event) {
var $this = $(this);
event.preventDefault();
if(!sequence.active) {
//solo se non c'è un'animazione in corso
//rimuove la classe attiva
$this.siblings().removeClass("active");
//e imposta l'elemento corrente come attivo
$this.addClass('active');
//seleziona un frame specifico
sequence.goTo( $this.data('frame') );
}
});
//gestisce il frame attivo nella navigazione
//quando vengono cliccati i controlli
$sequence.delegate('.btn', 'click', function(event) {
event.preventDefault();
$navigation.removeClass("active");
$navigation.eq(sequence.nextFrameID-1).addClass("active");
});
});Poiché il plugin è ancora in fase beta, le API potrebbero cambiare rispetto a quanto descritto in questo articolo. Per rimanere aggiornati, approfondire la conoscenza delle API e verificare le potenzialità di Sequence.js, possiamo far riferimento al sito ufficiale.
Link Utili
- Sequence.js - sito ufficiale
- Documentazione
