Minimalist jQuery News Ticker Plugin - Newsticker

A dead simple jQuery plugin which converts a list of html content into a vertical scrolling news ticker, featuring pause on hover and custom animations.

How to use it:

1. Create a list of html items for the news ticker.

<div class="newsticker">
  <ul class="newsticker-list">
    <li class="newsticker-item">
      Breaking News 1
    </li>
    <li class="newsticker-item">
      Breaking News 2
    </li>
    <li class="newsticker-item">
      Breaking News 3
    </li>
  </ul>
</div>

2. Add jQuery JavaScript library and the jQuery NewsTicker plugin's script to your webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/script.js"></script>

3. Add your own CSS styles to the news ticker.

.newsticker {
  background: #C0392B;
  border-radius: 5px;
  color: #fff;
  cursor: default;
  font-family: verdana;
  font-weight: bold;
  font-size: 13px;
  line-height: 15.6px;
  padding: 0 10px 0 10px;
  height: 30px;
  position: relative;
  overflow: hidden;
  max-width:400px;
  margin:30px auto;
}

.newsticker .newsticker-list {
  position: absolute;
  top: 7.2px;
}

.newsticker .newsticker-list .newsticker-item {
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
}

4. Override the default options to customize the news ticker.

$(function() {
  $('.newsticker').newsticker({
    height: 30,
    speed: 800,
    interval: 3000,
    move: null
  });
});

Changelog:

2018-07-23

• JS update

2018-07-22

• refactor with css transform for better performance

2017-06-23

• update

2016-11-20

• bugfix

2016-09-28

• refactor

2016-02-13

• fix customized height issue

2015-12-27

• JS refactor.

2015-12-20

• update js snippet with oo style

---

This awesome jQuery plugin is developed by cythilya. For more Advanced Usages, please check the demo page or visit the official website.