A jQuery plugin to infinitely animate/scroll an horizontal strip of text or inline elements. It pauses the animation onmouseover and releases it onmouseout. It also provides the option to change the speed of the animation and wether or not you want to have a preceding label element binded with a mouseover event to reverse the animation vector.
Demo 1 . default options
Tip! Place the mouse over the animated string and then move it away.
Demo 2 . speed change
Tip! The speed of the animation is changed from the default setting.
Demo 3 . reverse element active
Tip! Place the mouse over the label named "Newsfeed".
Demo 4 . force loop
Tip! Option set to force loop when the aggregated width of the items is smaller than the width of the frame.
Demo 5 . start paused + calling Play / Pause
Tip! Option to initialize in a paused state. Use buttons below to call the play and pause methods.
How to use
1. Add the CSS file to the HEAD section of your HTML.
<link type="text/css" rel="stylesheet" href="jquery.jConveyorTicker.min.css" />
2. Add the JS file to the end of the BODY section of your HTML and after jQuery.
<script src="jquery.jConveyorTicker.min.js"></script>
3. Place the HTML code.
<div class="js-conveyor-1">
<ul>
<li>
<span>I am an <u>innocent</u> text string just passing by</span>
</li>
<li>
<a href="https://duckduckgo.com/">
<span>I am a <b>hyperlink</b></span>
</a>
</li>
<li>
<span>Mauris interdum elit non sapien <em>imperdiet</em></span>
</li>
<li>
<span>Cras lorem augue facilisis a commodo</span>
</li>
</ul>
</div>
4. Trigger the use of the jquery.jConveyorTicker function by selecting the markup element.
<script>
$(function() {
$('.js-conveyor-1').jConveyorTicker();
});
</script>
Options
Here is an example of all the usable options.
<script>
$(function() {
$('.js-conveyor-1').jConveyorTicker({
anim_duration: 200, // Specify the time (in milliseconds) the animation takes to move 10 pixels
reverse_elm: false // Enable the use of the reverse animation trigger HTML element
force_loop: false // Force the initialization even if the items are too small in total width
start_paused: false // Initialize in a paused state
});
});
</script>
When the option "reverse_elm" is set to true, you will have to add the preceding element class named "jctkr-label".
<div class="jctkr-label"> <strong>Newsfeed</strong> </div> <div class="js-conveyor-1"> ... ... </div>
On demand call for the play and paused states, as well as reset methods.
<script>
$(function() {
window.jsConveyor1 = $('.js-conveyor-1').jConveyorTicker();
... ...
jsConveyor1.playAnim(); // Play the ticker's scrolling
jsConveyor1.pauseAnim(); // Pause the ticker's scrolling
... ...
jsConveyor1.init(); // On demand reinitialization after changes to the elements
// (e.g. responsive 'font-size' or list contents)
... ...
jsConveyor1.destroy(); // Resets the element to its original state
... ...
});
</script>
Notes
This plugin as a limited capacity to calculate the measurements of the text elements if a non-system based font is used, due to latency issues that you may find on your development environment while loading the font.
For better results use absolute "font-size" CSS styles (e.g. 'px') on the ticker's text items, or call the ticker's init method whenever there is a responsive change on the font-size of those elements, so the plugin can be reapplied.
Final thoughts
Hope this plugin helps you create fluid ticker animations. Any questions or comments can be sent to dev--at--uxd--dot--pt