jOdometer:
jOdometer is a counter that works like an odometer: moving the numbers up like a wheel
Usually we will need a "position: relative" and an "overflow: hidden" in the container element.
Sample Configuration:
$('.counter').jOdometer({increment: 3.17, counterStart:'0087.15', counterEnd:'0159.50', numbersImage: '/images/numbers.png', spaceNumbers: 2, offsetRight:5});
Config Options:
counterStart: Number we are starting with. To get a specific number of digits/decimals it have to be a string (e.g. '0005.50') // Default: '0000.00'
counterEnd: The counter stop when reach this number. If it is the same as counterStart the odometer is static. False to don't stop never. // Default: false
delayTime: Delay between each number change // Default: 1000
increment: Number increment after each delayTime // Default: 0.01
speed: Speed for the change number animation // Default: 500
easing: Easing for the change number animation. Other than 'swing' or 'linear' must be provided by plugin // Default: 'swing'
numbersImage: Image used for the numbers. You can use .psd provided // Default: '/images/numbers.png'
heightNumber: The height that each number needs // Default: 31
widthNumber: Width of the numbers' image // Default: 14
offsetRight: Distance to the right // Default: 0
spaceNumbers: Separation between the numbers' columns // Default: 0
widthDot: Decimal dot's special width // Default: 10
We can override the defaults with:
$.fn.jOdometer.defaults.spaceNumbers = 1;
jOdometer samples: