jQuery News Ticker with Responsive Design

The eocNewsticker is a simple and lightweight jQuery news ticker plugin with responsive & clean design. The plugin generates horizontal breaking news bar that scroll right to left. It can be used to animate links of latest news / posts of your website.

The plugin can be fully customized with CSS and with its available options. Moreover, you can control scrolling speed etc.

Plugin Overview

Plugin: eocNewsticker
Author: Dieter Schmitt
Licence: MIT Licence
Published: July 22, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.2.4 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 4 KB

How to Use jQuery Responsive News Ticker

1. Load the jQuery and eocNewsticker‘s CSS and JavaScript file into your HTML document to create news ticker.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- News Ticker CSS -->
<link rel="stylesheet" href="css/eocnewsticker.css">

<!-- News Ticker Js -->
<script src="js/eocnewsticker.js"></script>

2. After that, create a div element with a unique id that contains your news/posts links or simple text.

<div id="myNews">The quick brown fox jumps over the lazy dog</div>

3. Finally, initialize the plugin in jQuery document ready function to active news ticker.

$(document).ready(function() {
  $("#myNews").eocNewsticker();
});

Advance Configuration Options for jQuery News Ticker Plugin

The following are some advance configuration options to create / customize “eocNewsticker”.

Option Description, Default, Type
speed

This option define the moving/scrolling speed (per 1000px) in seconds of news ticker. Default: 20, Type: Number.

$("#myNews").eocNewsticker({
   speed: 20,
});
timeout

It define the waiting time after that news ticker should start scrolling. Default: 2, Type: Number.

$("#myNews").eocNewsticker({
    timeout: 2,
});
divider

This is useful to seprate text/links of posts/news. Default: ‘+++’, Type: String.

$("#myNews").eocNewsticker({
   divider: "|",
});