immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Effetto newsticker con jQuery

di MaiNick | 17 dic 2009 | jQuery, Webdesign | 2 Commenti

Con questo piccolo articolo voglio illustrare un modo per visualizzare le notizie recenti con liScroll, un plugin per jQuery che trasforma qualsiasi elenco non ordinato ul in un news ticker a scorrimento.

Con il termine “newsticker” si vuole intendere un box in cui si possono leggere le ultime notizie con effetto scorrimento tipico dei siti di informazione giornalistica

Utilizzo

Tutto ciò che serve per costruire il vostro box news ticker è una lista non ordinata che come attributo ha un id univoco:

<ul id="newsticker01">
  <li><span>16/12/2009</span><a href="http://www.mainickweb.com/crea-tooltip-su-link-e-immagini-in-modo-semplice-con-jquery/">Crea tooltip su link e immagini in modo semplice con jQuery</a></li>
  <li><span>15/12/2009</span><a href="http://www.mainickweb.com/jquery-captify-plugin-aggiungere-didascalie-alle-immagini/">jQuery Captify Plugin: Aggiungere didascalie alle immagini</a></li>
  <li><span>07/12/2009</span><a href="http://www.mainickweb.com/effetto-growl-con-jquery/">Effetto Growl con jQuery</a></li>
  <li><span>07/12/2009</span><a href="http://www.mainickweb.com/sfondo-a-tutto-schermo-con-jquery/">Sfondo a tutto schermo con jQuery</a></li>
  <li><span>09/10/2009</span><a href="http://www.mainickweb.com/crea-una-classifica-mp3-musicale-con-jquery/">Crea una classifica mp3 musicale con jQuery</a></li>
</ul>

Per realizzare l’effetto bisogna collegare alla vostra pagina web, come sempre, la libreria jQuery, il plugin liScroll e il seguente semplice codice javascript:

$(function(){
  $('ul#newsticker01').liScroll();
});

Opzioni

L’unica opzione personalizzabile di questo plugin jQuery è la velocità:

$(function(){
    $('ul#newsticker01').liScroll({travelocity: 0.15});
});

modificando il valore del parametro travelocity.

Sul pagina dedicata a liScroll plugin jQuery sono disponibili demo e script.

Tags: , , ,

2 Commenti

  1. doc scrive:

    ciao,
    c’e’ anche una versione verticale?

    • MaiNick scrive:

      Si può modificando lo script in modo che non effettui un’animazione orizzontale ma verticale, e ovviamente modificare lo stile css.
      Se invece vuoi una soluzione più semplice posso consigliarti quest’altro plugin jQuery Totem.

Trackbacks

Lascia un Commento

^ Torna su