Thank you for checking out jQuery Rolling Counter! Hope you enjoy it!
This plugin is a simple tool that allows you to make odometer-like counter which spins and stops on desired digit.
First you need to include jQuery library. Let's do it via Google CDN.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Then include plugin file
<script type="text/javascript" src="../src/jrollingcounter-0.0.1.js"></script>
The next step is HTML/CSS to make your counter look and feel.
In this example we use this markup:
<div class="counter" id="example1">
<div class="bg"></div>
<img src="digit.png"/>
</div>
The CSS used is as follows:
.counter {
width: 71px;
height: 96px;
overflow: hidden;
}
.counter .bg {
background: url('bg.png') no-repeat;
width: 71px;
height: 96px;
position: absolute;
z-index: 100;
}
The markup above gives this:
As you can see, the concept is to animate the long image through the "window" made up by styled div. It's a spin illusion :)
What we really do is simply animate the margin to make illusion of spinning digits. Of course that's not the only feature plugin does.
When you are ready to start your counter, you can simply call:
<script type="text/javascript">
$('#example1').spinCounter();
</script>
Let's see at the complete example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Rolling Counter example</>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../src/jrollingcounter-0.0.1.js"></script>
<script type="text/javascript">
//Attach onclick handler to a link
$('#runExample').live('click', function(){
$('#example1').spinCounter();
return false;
});
</script>
<style type="text/css">
.counter {
width: 71px;
height: 96px;
overflow: hidden;
}
.counter .bg {
background: url('bg.png') no-repeat;
width: 71px;
height: 96px;
position: absolute;
z-index: 100;
}
</style>
</head>
<body>
<div class="counter" id="example1">
<div class="bg"></div>
<img src="digit.png"/>
</div>
<a id="runExample" href="#">Start spinning<a>
</body>
</html>
Essentially the call to plugin can be made according to the following specification:
.spinCounter([options],[complete])
The parameters are:
The example call is as following:
$('#example2').spinCounter({
minDigitSpinDelay: 100,
maxDigitSpinDelay: 1000,
spinTime: 4000,
stopDigit: 8,
startDigit:5
});
Try it yourself
There's no much sense of one digit spinning around. Usually you need to display sum number in odometer form.
It's easy with jQuery Rolling Counter!
Simply put several instances of counter and tune them up!
The next example shows how to set the number 192837
$('#example3d1').spinCounter({spinTime: 4000, stopDigit: 1});
$('#example3d2').spinCounter({spinTime: 4200, stopDigit: 9});
$('#example3d3').spinCounter({spinTime: 4400, stopDigit: 2});
$('#example3d4').spinCounter({spinTime: 4600, stopDigit: 8});
$('#example3d5').spinCounter({spinTime: 4800, stopDigit: 3});
$('#example3d6').spinCounter({spinTime: 5000, stopDigit: 7});
Try it yourself
You can download this project in either ZIP or TAR formats.
You can also clone the project with Git by running:
$ git clone git://github.com/zysoft/jrollingcounter