Dopo aver visto una finestra con news a comparsa, implementeremo ora una barra orizzontale contenente news scorrevoli da destra verso sinistra (un cosiddetto news ticker) .
In questo caso è preferibile che il testo di ogni news sia composto esclusivamente dal titolo, il quale rimandi poi, tramite link, al testo completo.
In fondo all’articolo è possibile provare e scaricare il codice completo.
Per realizzare il box e l’effetto desiderato utilizzeremo jQuery e il plugin denominato liScroll che trasforma qualsiasi elenco in un news ticker a scorrimento.
A tal proposito vediamo il codice html:
02 | <li><span>News 1</span> |
03 | <a href="#">Quel ramo del lago di Como ...</a> |
05 | <li><span>News 2</span> |
06 | <a href="#">Si racconta che il principe di ...</a> |
08 | <li><span>News 3</span> |
09 | <a href="#">Lucia entrò nella stanza ...</a> |
11 | <li><span>News 4</span> |
12 | <a href="#">Il sole non era ancor tutto ...</a> |
14 | <li><span>News 5</span> |
15 | <a href="#">Da i Promessi Sposi ...</a> |
Grazie alle potenzialità di questo plugin il codice html si riduce ad un semplice elenco non ordinato. La regola generale è che: ogni voce dell’elenco è una news.
Per far si che sia possibile animare il news ticker è necessario assegnare un id all’elemento <ul>.
Prima di poter animare le news dobbiamo richiamare jQuery e il plugin. All’interno dell’head scriveremo:
1 | <script type='text/javascript' src='jquery-1.4.3.min.js'></script> |
2 | <script type='text/javascript' src='jquery.li-scroller.1.0.js'></script> |
Il codice Javascript per dare il via allo scorrere delle news è il seguente (si ricorda che va definito dopo il codice html dell’elenco o richiamato al completo caricamento della pagina):
1 | <script type='text/javascript'> |
2 | $("ul#news").liScroll({travelocity: 0.06}); |
Il metodo da invocare sull’elenco è liScroll a cui è possibile passare come parametro un valore che esprima la velocità di scorrimento del testo.
Il codice completo fornisce infine un file css modificabile per ottenere lo stile desiderato.
Cliccando qui è possibile vedere in azione il codice.
Cliccando qui è possibile scaricare il codice.
Sito ufficiale del plugin liScroll: http://www.gcmingati.net/
