Esistono molti plugins che permettono di realizzare dei “news ticker”, ovvero script che permettono di vedere le ultime news scorrere.
Oggi vediamo però come realizzare la nostra versione semplificata utilizzando solamente 4 righe di codice.
L’idea di base è molto semplice, prendiamo il primo elemento di una lista, lo facciamo sparire e, in callback, lo riaggiungiamo alla fine della lista.
Il codice HTML da utilizzare
<ul id="ticker" class="ticker">
<li><a href="#">Lorem ipsum dolor sit amet</a>, luctus et ultrices consectetur adipiscing elit. Praesent condimentum sagittis risus ac viverra. Integer vestibulum volutpat...</li>
<li>Faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam at ligula purus. Fusce ligula massa, commodo eu aliquam non, pharetra ut nisl.... </li>
<li>Proin mollis eros quis massa dictum sodales. Suspendisse elementum, dui sed tincidunt ultricies, dolor ipsum dictum felis, id consequat ligula risus...</li>
<li><a href="#">Sed</a> liquam eget blandit elit. Aenean luctus et ultrices arcu augue, fringilla a eleifend in, bibendum sed augue. Aliquam consectetur arcu at arcu...</li>
</ul>Come possiamo vedere non c’è nulla di strano, solo un semplice elenco puntato dal quale andremo a nascondere il primo elemento…
Il CSS e due regole, il resto è creatività!
Affinchè lo nostro script funzioni correttamente sarà bene prendere alcune accortezze. Il mio consiglio spassionato è quello di impostare un’altezza fissa agli elementi di lista ed al contenitore, all'<ul> quindi, per evitare che l’altezza del blocco in cui è inserito il nostro widget vari continuamente creando uno sgradevole effetto visivo. Nel mio caso, tralasciando la non-creatività :), mi sono limitato ad impostare quanto appena esposto:
#ticker {
overflow: hidden;
font-size:13px;
margin:0;
padding:0;
height:243px;
}
#ticker li {
list-style:none;
padding:0;
margin:0;
height: 60px;
background:#333;
color:#fff;
padding:10px;
border-bottom:1px solid #CCC;
}
#ticker li a {
color:#F90;
}La dichiarazione overflow:hidden viene messa solo a scopo precauzionale nel caso in cui ci si dimenticasse si troncare il testo alla lunghezza desiderata. In questo modo non straborderà fuori dal contenitore ma verrà nascosto.
Azioniamo il tutto con jQuery
Bastano infine 4 righe per far partire l’animazione desiderata… vediamo che cosa scrivere:
function ticker(){
$('#ticker li:first').slideUp(
function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ ticker () }, 3000);La funzione ticker() viene lanciata grazie al setInterval() che ci dice di ripetere le azioni ogni 3000 ms (3 secondi). Lo script dice invece semplicemente di effettuare lo slideUp() del primo elemento della lista, di appenderlo in coda a #ticker e quindi di fare lo slideDown().
Ed il trucco è presto svelato 🙂
