 |
| 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.
Features:
- 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>
<ul>
<li>Breaking News #1</li>
<li>Breaking News #2</li>
<li><a href="#">Breaking News 3</a></li>
</ul>
</div>
3. Call the function on the top container.
$(function(){
$('.ticker').ticker();
});
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.
$(function(){
$('.ticker').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 :
- jquery-ticker-master.zip
- Size :
- 7.36KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT