Cross-fading Text Ticker With jQuery And JSON - ticker.js
File Size: | 3.19 KB |
---|---|
Views Total: | 2916 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Ticker.js is a small jQuery news ticker plugin which fades through a group of text content with links stored in JSON objects.
See also:
How to use it:
1. Build the HTML structure for the news ticker.
<div class="flex-ticker" style="display:none;"> <div class="flex-ticker__text"></div> </div>
2. Prepare your JSON data as follows:
var newsTickerJSON = { "one": { "headline": "Breaking New 1 ...", "url": "https://www.jqueryscript.net" }, "two": { "headline": "Breaking New 2 ...", "url": "https://www.jqueryscript.net" }, "three": { "headline": "Breaking New 3 ...", "url": "https://www.jqueryscript.net" }, // more data here }
3. Include the main JavaScript file ticker.js
after loading jQuery library.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/ticker.js"></script>
4. Apply your own CSS styles to the news ticker.
.flex-ticker { background: rgba(255,255,255,0.1); border-radius: 5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 10px; width: 100%; }
This awesome jQuery plugin is developed by jamiehall87. For more Advanced Usages, please check the demo page or visit the official website.