QScroller è una classe Mootools (disponibile per le versioni 1.11 e 1.2 del framework) che potete utilizzare nei vostri script per creare effetti di scorrimento di testi o immagini. Sono supportati sia lo scorrimento in direzione orizzontale che verticale e sono disponibili tutti gli effetti e le transizioni offerte da Mootools.
QScroller è la soluzione ideale per creare semplici slideshow, vetrine prodotti, pubblicare ultime notizie o altri messaggi che devono attrarre l'attenzione dei vostri visitator.
Il modo migliore per imparare ad utilizzare la classe è attraverso alcuni esempi pratici. Il sorgente completo di tutti gli esempi è incluso nel pacchetto, qui saranno commentate solo le parti più importanti.
Semplice scorrimento orizzontale
Elementi scorrevoli costituiti da una sola riga di testo sono fatti scorrere orizzontalmente in un contenitore a larghezza fissa.
HTML (head)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Mootools QScroller</title>
<link href="/qscroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/mootools.js"></script>
<script type="text/javascript" src="/qscroller.js"></script>
</head>
È richiesto un DocType XHTML valido.
- mootools.js contiene la libreria Mootools completa.
- qscroller.js contiene la classe QScroller.
- qscroller.css contiene le regole css che controllano lo stile degli elementi scorrevoli e del contenitore.
HTML (body)
<div id="qscroller1"></div>
<div class="hide">
<div class="qslide">
Semplice testo scorrevole. Metti quello che vuoi qui
</div>
<div class="qslide">
usa <strong>tag</strong> <em>HTML</em> per
<u>formattare</u> il testo
</div>
<div class="qslide">
Anche i <a href="#">link</a> sono ammessi
<i>ovviamente</i> :)
</div>
<div class="qslide">
Muovi il mouse sopra il box per fermare l'animazione
</div>
<div class="qslide">
Muovi il mouse fuori dal box per riprendere l'animazione
</div>
</div>
#qscroller1 è l'elemento DIV all'interno del quale avviene l'animazione. Gli elementi da scorrere (DIV di classe qslide) sono posizionati fuori della parte visibile dello schermo (vedi regole css relative alla classe hide qscroller.css esaminato di seguito).
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
duration: 3000,
delay: 1000,
auto:true,
onMouseEnter: function(){this.stop();},
onMouseLeave: function(){this.play();}
}
var scroller = new QScroller('qscroller1',opt);
scroller.load();
});
//-->
</script>
La classe QScroller è istanziata in un evento domready, perché dobbiamo essere sicuri che possa accedere ad elementi DOM, ed inizializzata con l'ID dell'elemento che funge da contenitore per l'animazione ed un oggetto con le seguenti opzioni di configurazione:
- duration (predefinito 3000) - durata in millisecondi dell'effetto di transizione. Più basso è il valore, più veloce è l'animazione.
- delay (predefinito 1000) - Il numero di millisecondi di pausa tra la fine dell'animazione di un elemento el'inizio di quella del successivo. Impostare questa opzione ha senso solo se auto è true.
- auto (predefinito false) - se true l'animazione inizia automaticamente.
- onMouseEnter - questo evento è attivato quando il puntatore del mouse entra nell'elemento che contenitore (cioè dove avviene l'animazione). In questo esempio mettiamo in pausa l'animazione.
- onMouseLeave - questo evento è attivato quando il puntatore del mouse esce dall'elemento conenitore. In questo esempio riprendiamo l'animazione.
scroller.load() carica il primo elemento da scorrere e se, come in questo esempio, auto è true dà inizio all'animazione.
CSS (in qscroller.css)
.hide {
visibility: hidden;
position: absolute;
top: -400px;
}
#qscroller1 {
width:350px;
height:21px;
border:1px solid #c0c0c0;
background:#f0f0f0;
}
.qslide {
background: #f0f0f0;
font-size: 10pt;
padding: 3px;
}Come si può notare l'altezza, la larghezza e lo stile del contenitore dell'animazione e degli elementi scorrevoli (slides) sono controllati attraverso css.
La classe hide è utilizzata per porre gli elementi scorrevoli fuori dall'area visibile dello schermo. È il codice della classe che ha il compito di leggere il contenuto di ogni elemento scorrevole, inserirlo all'interno del contenitore ed iniziare l'animazione.
Scorrimento orizzontale di testo e immagini
Una semplice vetrina prodotti con testo ed immagini. Lo scorrimento è controllato da link di navigazione.
Prodotto 1
Semplice esempio di vetrina prodotti. Usa le frecce in basso per scorrere.
Prodotto 2
La descrizione prodotto qui.
Prodotto 3
La descrizione prodotto qui.HTML (head)
Stesso del primo esempio.
HTML (body)
<div id="qscroller2" class="qscroller"></div>
<div class="qscroller2-nav">
<div>
<a id="go-prev" href="javascript:void(0)"><<</a>
<a id="go-next" href="javascript:void(0)">>></a>
</div>
</div>
Notare la barra di navigazione (classe qscroller2-nav). Gli ID (go-prev, go-next) dei link saranno passati alla classe.
<div class="hide">
<div class="qslide2">
<img src="/images/product1.jpg" alt="" />
<h1>Prodotto 1</h1>Semplice esempio di vetrina prodotti.
Usa le frecce in basso per scorrere.
</div>
<div class="qslide2">
<img src="/images/product2.jpg" alt="" />
<h1>Prodotto 2</h1>La descrizione prodotto qui.
</div>
<div class="qslide2">
<img src="/images/product3.jpg" alt="" />
<h1>Prodotto 3</h1>La descrizione prodotto qui.
</div>
</div>
Gli elementi scorrevoli (DIV di classe qslide2) sono inclusi in un tag DIV di classe hide per collocarli fuori dallo schermo esattamente come nel primo esempio.
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'qslide2',
duration: 1500,
buttons: {next:'go-next',prev:'go-prev'},
transition: Fx.Transitions.Quint.easeOut
}
var scroller = new QScroller('qscroller2',opt);
scroller.load();
});
//-->
</script>
Opzioni classe
- slides - classe dei tag DIV contenenti gli elementi da scorrere. Questa opzione ha come valore predefinito qslide, per questa ragione non è stata passata esplicitamente nel primo esempio.
- duration - vedere il primo esempio.
- buttons - ID dei link usati per scorrere da un elemento ad un altro.
- transition:effetto di transizione. Trovate una lista di possibili valori qui: sperimentate con differenti effetti di transizione. Valore predefinito Fx.Transitions.linear.
CSS (in qscroller.css)
#qscroller2 {
width:320px;
height:154px;
border:1px solid #c0c0c0;
background:#fff;
}
.qscroller2-nav {
font-size: 9pt;
width:320px;
height: 15px;
background:#f0f0f0;
border:1px solid #c0c0c0;
}
.qscroller2-nav a {
text-decoration: none;
}
.qscroller2-nav div {
float: right;
}
.qslide2 img {
float: left;
padding: 1px;
border: 1px solid #00ffff;
margin: 3px 15px 0 3px;
}
.qslide2 h1 {
margin:0 0 5px;
font-size: 110%;
color: #16387c;
} Come a questo punto ci si deve aspettare, l'aspetto della barra e dei link di navigazione così come degli elementi scorrevoli (classe qslide2) sono interamente controllati tramite css.
Scorrimento verticale di immagini
La classe QScroller può essere utilizzata per creare semplici slideshow. In questo esempio alcune immagini sono fatte scorrere verticalmente. Quando si muove il puntatore del mouse sopra l'immagine appare una barra di navigazione con pulsanti per scorrere avanti e indietro, avviare e mettere in pausa l'animazione.
HTML (head)
Stesso del primo esempio.
HTML (body)
<div id="qscroller3" class="qscroller">
<div id="qscroller3-nav">
<div>
<a id="go-prev2" href="javascript:void(0)">
<img src="/prev.gif" alt="previous" />
</a>
<a id="play" href="javascript:void(0)">
<img src="/play.gif" alt="play" />
</a>
<a id="stop" href="javascript:void(0)">
<img src="/stop.gif" alt="stop" />
</a>
<a id="go-next2" href="javascript:void(0)">
<img src="/next.gif" alt="next" />
</a>
</div>
</div>
</div>
<div class="hide">
<div class="qslide3">
<img src="/images/flower1.jpg" alt="" />
</div>
<div class="qslide3">
<img src="/images/flower2.jpg" alt="" />
</div>
<div class="qslide3">
<img src="/images/flower3.jpg" alt="" />
</div>
<div class="qslide3">
<img src="/images/flower4.jpg" alt="" />
</div>
</div>
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'qslide3',
duration: 2000,
delay: 1000,
auto:false,
direction: 'v',
transition:Fx.Transitions.Quart.easeIn,
buttons: {next:'go-next2',prev:'go-prev2',play:'play',stop:'stop'},
onMouseEnter: function(){
var el = $('qscroller3-nav');
el.effects({
duration:1000,
transition: Fx.Transitions.linear
}).start({
bottom:[-el.getStyle('height').toInt(),-1],
opacity:[0.8,0.8]
});
},
onMouseLeave: function(){
var el = $('qscroller3-nav');
el.effects({
duration:1000,
transition: Fx.Transitions.linear
}).start({
bottom:[-1,-el.getStyle('height').toInt()],
opacity:[0.8,0.8]
});
}
}
var scroller = new QScroller('qscroller3',opt);
scroller.load();
});
//-->
</script>
Opzioni classe
Sono tutte già spiegate negli esempi precedenti tranne direction: i possibili valori sono v per scorrimento verticale e h (predefinito) per scorrimento orizzontale.
Il codice nei gestori di evento (onMouseEnter, onMouseLeave) serve a far apparire e scomparire la barra con i pulsanti di navigazionequando il cursore del mouse entra o esce dall'elemento contenitore dell'animazione. Essendo più complesso degli esempi precedenti, la comprensione del codice richiede una certa familiarità con la libreria MooTools.
CSS (in qscroller.css)
#qscroller3 {
position: relative;
width:205px;
height:137px;
}
#qscroller3-nav {
position:absolute;
height: 18px;
visibility: hidden;
background: #f0f0f0;
z-index: 1;
width: 100%;
}
#qscroller3-nav a {
text-decoration: none;
}
#qscroller3-nav div {
float: right;
}
#qscroller3-nav img {
border: none;
padding: 3px 2px 0;
}
.qslide3 img {
border: 1px solid #fff;
}Notare che la visibilità della barra di navigazione (#qscroller-nav) è impostata come nascosta nel css perché viene resa visibile dallo script (nel gestore di evento onMouseEnter).
