Odometer-style Counter using jQuery
A couple months back I had to implement an odometer-style counter for the new StepOut landing page. I found a few implementations here and there, but I didn’t really like any of them so I decided to roll my own. It’s not the most elegant code I’ve ever written, but it seems to work fairly well and is nice and succinct.
So how does it work?
Each digit in the counter is represented with the following HTML:
<span class="digit">
<span title="3">3</span>
<hr />
</span>
We store the value of each digit and replace the value of the inner span with a list of numbers 0-9 (well, really 1-9, padded with 0s). We then change the position of that span so that the original number is visible. During each ‘tick’, we animate the top property of the span so that the next digit becomes visible, and wrap around once we hit 0.
The process ended up being fairly straightforward, so I hope the code will be at least somewhat legible.
I haven’t done much to generalize the code, so a bit of coaxing might be required to get it to work in your environment. I do have a working jsFiddle set up though. That said, all of this is provided without warranty. I mostly hope that this can serve as an interesting reference or starting point for someone else in the future.
