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: | January 20, 2024 |
| 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: "|",
});
|
Similar Code Snippets:
HTML Tabs Example with Code
Full Screen Width and Height Sections Using CSS
CSS3 Buttons With Interactive Hover Effect
HTML Visitor Counter Source Code
HTML Code for Flipping Pages
CSS Split Card Hover Overlay Effect
Animated Infographics with HTML CSS & jQuery
Content Placeholder Animation Using CSS
Toggle Button in CSS With Stretchable Elastic Effect
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.