jQuery liScroll – scroll text plugin

This plugin is an adaptation of a news ticker. You can adapt it to scroll random text, not only news feeds.

1. Include the dependencies in the head of the html document

<link rel="stylesheet" type="text/css" media="screen" href="/css/li-scroller.css" />
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.li-scroller.1.0.js"></script>

2. The markup

<ul id="ticker01">
  <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
  <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
  <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
</ul>

The markup doesn’t need to have the span and a element, you can include whatever text you want.

3. Fire the plugin

$(function(){
  $("ul#ticker01").liScroll();
});

The plugin has only one option, so if you want the list to scroll faster or slower, you should modify the travelocity param.

$(function(){
  $("ul#ticker01").liScroll({travelocity: 0.15});
});

Demo & Download

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s