Apple-Style Counter

When I saw the 10 billion song counter on Apple's website yesterday, I immediately right-clicked on it to see if it was flash. No big surprise to see that it wasn't, this being Apple, and when I saw it was done using JavaScript I knew how I'd be wasting the next few hours.

My first instinct was to use Chrome's developer tools to inspect the page and check out the JavaScript for the counter to get some clues as to how to go about re-creating it. After a few seconds of looking at Apple's minified code, I knew I'd get no help there. After grabbing the digits and comma graphic they used, I set out to avoid the work I was supposed to be doing to create a counter from scratch using these two images and jQuery.

I'll give a brief overview of the steps taken to reproduce the counter, but for those that want to cut to the chase, here it is. The code is commented enough so that anyone interested can view the source and see what's going on.

Note: This counter did not actually track the number of iTunes downloads, but is an example of how to create a similar counter for your own purposes.

Be sure to read all the way down for more demos.

Basics

Looking at the image closely, we can see that each frame is 103px in height, with five frames of animation between digits, leaving 618px of space between each digit. So, digit zero would have a background position of '0 0', one would be '0 -608px', two would be '0 -1236px', etc. My plan was to use an unordered list to hold the digits and use jQuery to animate the background position of each list item.

 1<ul>
 2  <li id="d9"></li>
 3  <li class="seperator"></li>
 4  <li id="d8"></li>
 5  <li id="d7"></li>
 6  <li id="d6"></li>
 7  <li class="seperator"></li>
 8  <li id="d5"></li>
 9  <li id="d4"></li>
10  <li id="d3"></li>
11  <li class="seperator"></li>
12  <li id="d2"></li>
13  <li id="d1"></li>
14  <li id="d0"></li>
15</ul>

And the CSS:

 1*{
 2  margin:0;
 3  padding:0;
 4}
 5ul{
 6  list-style-type:none;
 7  width:566px;
 8  margin:50px auto;
 9}
10li{
11  float:left;
12  background:url(filmstrip.png) 0 0 no-repeat;
13  width:53px;
14  height:103px;
15}
16li.seperator{
17  background:url(comma.png) 2px 75px no-repeat;
18  width:12px;
19}

That's it for HTML and CSS, the rest is JavaScript.

Making it work

It took no time to get a simple counter running, but the hairy part was triggering a five-frame animation for each digit that needed to change. Because I wanted to mimic the functionality of the counter on Apple's site, it needed to look like it was counting at a very fast increment, with variable animation speeds depending on the digit.

After incrementing the value, the first step is to see which digits need to be animated:

1function digitCheck(x,y){
2  var digitsOld = splitToArray(x),
3  digitsNew = splitToArray(y);
4  for (var i = 0, c = digitsNew.length; i < c; i++){
5    if (digitsNew[i] != digitsOld[i]){
6      animateDigit(i, digitsOld[i], digitsNew[i]);
7    }
8  }
9}

This takes inputs x (pre-increment value) and y (post-increment value), and sends them to a helper function I wrote called splitToArray, which breaks each value into an array of individual digits. It then compares each digit, and if there is a change, passes the info on to animateDigit.

Inside animateDigit, the most difficult part was getting the animations for each digit cued up correctly. Inside the loop that controls the animation, I needed to slide the background position down five times with a specific delay, and my first solution was using setTimeout, and the statement:

1setTimeout(doAnimate, timeOut, n, pos);

This worked great in Chrome and FF, and I thought I was done... until I checked it in IE. I had forgotten you can't pass parameters to functions with setTimeout in this way, so you need to use a closure:

1setTimeout(function(){doAnimate(n,pos)}, timeOut);

Simple enough, I thought, but that made the animation choke up in every browser. No good.

I slept on it, then this morning thought about using jQuery's new delay method added in version 1.4. Boom! I was able to do away with the doAnimate function all together, and kill it all with one pass:

1$('#d' + n).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0);

I now had cross-browser harmony, and had once again spent time away from paying projects to build something I have absolutely no use for :)

Customizing

When making this demo, I chose to use the same Apple graphics so when it was finished, I could look at the two side-by-side and see if I got the functionality correct. This post is just me sharing my learning process with you, so if in the future you ever have the need for a count down/up graphic, maybe this will help. The impression shouldn't be "how to rip-off Apple's look", but rather "how to have the same functionality in my own projects."

Customizing this to your own graphics is very easy. All you need is a consistent spacing between your animation frames, and be able to add. Most of the customization happens at the beginning of the JavaScript:

1// Array to hold each digit's starting background-position Y value
2var initialPos = [0, -480, -960, -1440, -1920, -2400, -2880, -3360, -3840, -4320];
3// Amination frames
4var animationFrames = 5;
5// Frame shift
6var frameShift = 80;

The initialPos array holds the starting Y value of each digit, in increments of 480 (80px per frame x 6 frames per digit). animationFrames says there are 5 animation frames between digits, and frameShift is the frame height. Those are the only changes needed to make it function properly (besides updating the CSS), and further animation tweaking can be done in the function animateDigit.

Update 1

Here is another example demonstrating how to make a clock using the same animation technique.

Update 2

My original demo was based on counting to 10 billion, so had a strict number of digits. I realize that is not the most practical application, so I made a dynamic counter example where the JavaScript takes care of HTML for each digit, as well as commas when necessary. You can set whatever number you want via the URL query string (set n = number), or view the page by itself to just generate a random number. View the source to see different ways of setting a start number for the counter to use.

Update 3

Example with zero-filled numbers.

Update 4

As per many requests, and the help of a visitor who made three new digit graphics, I have yet another example of this animation technique in action. This time it is not counting up, but rather down—to any date in the future, in "days : hours : minutes : seconds" format. It handles all HTML and formatting itself, all you need to do is plug in a date. It uses the @font-face font kit BD Cartoon Shout from Font Squirrel.

View countdown demo.

Warning: Don't use the countdown script in a live site, because the jQuery animation technique used will not work properly in Chrome, see bug here.

Update: November 15, 2010

I've rewritten entire script and added lots of new functionality. View revisited counter.

Update: February 7, 2011

This script will not work properly with jQuery 1.5, and will no longer be maintained. Think of this post as a first draft of me trying to get the animation working; the code is outdated. If you want to use this type of counter please use the newer version of the script.