Demo Fx.Ticker

Usage examples of Fx.Ticker.

by goutte

HTML

<script src="https://raw.github.com/Goutte/Fx.NumberTicker/master/Source/Fx.NumberTicker.js"></script>
<h2>Normal</h2>
<div id="counter1">0</div>

<h2>Quadratic Out</h2>
<div id="counter2">0</div>

<h2>Transformation function</h2>
<div id="counter3">00000</div>

<h2>Shorthand usage</h2>
<div id="counter4">0</div>

CSS

div {
    font-size: 50px;
}

JavaScript

// NORMAL
var ticker1 = new Fx.NumberTicker('counter1');
ticker1.start(100);


// QUAD OUT (any Fx option will work)
var ticker2 = new Fx.NumberTicker('counter2', {
    duration: 5000,
    transition: 'quad:out'
});
ticker2.start(100);


// WITH TRANSFORMATION FUNCTION
var ticker3 = new Fx.NumberTicker('counter3', {
    duration: 10101,
    transformer: function(i) {
        // Prefix with zeroes so we have a 5 digits number
        return (Array(5).join('0') + i).slice(-5);
    }
});
ticker3.start(1010);


// SHORTHAND VERSION, with (optional) options
$('counter4').numberTicker(100, {
    duration: 5000
});