News Ticker Typing And Fading Animation With JavaScript - JqueryTicker.js

News Ticker Typing And Fading Animation
News Ticker Typing And Fading Animation

JqueryTicker.js is a lightweight jQuery plug-in that converts HTML listings into SEO-friendly news ticker text and fading animation. This JavaScript is useful for those of you who want to display the latest news and latest blog posts in a professional manner.


  • Displays items in random order.
  • Pause/Finish on hover.
  • Blinking cursor while typing.
  • Configurable fading animation.
  • Supports any HTML content.

How to use it:

1. Include jQuery library and the Ticker.js plugin on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.ticker.js"></script>

2. Create an HTML list for the news ticker.

<div class="ticker">
  <strong>Breaking News:</strong>
    <li>Breaking News #1</li>
    <li>Breaking News #2</li>
    <li><a href="#">Breaking News 3</a></li>

3. Call the function on the top container.


4. Apply CSS styles to the news ticker.

.ticker {
  /* CSS styles here */

.ticker div {
  /* CSS styles here */

5. Available options to customize the news ticker.


    // randomize the items
    random: false,

    // transition delay
    itemSpeed: 3000,

    // blinking speed
    cursorSpeed: 50,

    // pause on hover
    pauseOnHover: true,

    // finish on hover
    finishOnHover: true,

    // customize cursor
    cursorOne: '_',
    cursorTwo: '-',

    // config the fading animation
    fade: true,
    fadeInSpeed: 600,
    fadeOutSpeed: 300,

Live Demo

See the Pen News Ticker Typing And Fading Animation - jQueryTicker.js by Plugin JS (@pluginjs) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post