Codice Javascript per testo scorrevole

Semplice scorrimento orizzontale

Elementi scorrevoli costituiti da una sola riga di testo sono fatti scorrere orizzontalmente in un contenitore a larghezza fissa.

usa tag HTML per formattare il testo

Anche i link sono ammessi ovviamente :)

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.cssesaminato 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.