Minimalist jQuery News Ticker Plugin - Newsticker

File Size: 23.7 KB
Views Total: 18491
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="newsticker-item">
      Breaking News 2
    <li class="newsticker-item">
      Breaking News 3

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

<script src="//"></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;
  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() {
    height: 30,
    speed: 800,
    interval: 3000,
    move: null




  • refactor with css transform for better performance


  • update


  • bugfix


  • refactor


  • fix customized height issue


  • JS refactor.


  • 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.