JavaScript Flip Counter

javascript animation counter flip
TeddyWilliams898 picture TeddyWilliams898 · Apr 14, 2009 · Viewed 29.9k times · Source

I would like to include a flip counter on my site, similar to what Apple was using for their 1 billion app countdown.

enter image description here

Can anyone get their JavaScript to work standalone?

If anyone can provide working code, that would be great.

Answer

Steve Harrison picture Steve Harrison · Apr 14, 2009

They're using a combination of CSS and JavaScript. The flip animation is powered by a CSS Sprite-like technique.

First of all, they have a very tall image called filmstrip.png that contains every flip "state" for each number (0 to 9; have a look at a scaled-down detail and you'll see what I mean).

Then, in the HTML, each digit is made up of three nested elements:

  • The first is a container element, which has its width and height set to the dimensions of a single flip "state", and its overflow set to hidden. This element is positioned relatively.

  • The second element is positioned absolutely (and because the first element is positioned relatively, this second element is positioned absolutely relative to the first element).

  • The third element has its background-image set to filmstrip.png, and its width and height set to the dimensions of this image.

The JavaScript then seems to rapidly change the top property of the second element, causing different parts of filmstrip.png to be exposed one after another, thus resulting in a flip animation.

Steve

Related questions

How do I correctly use setInterval and clearInterval to switch between two different functions?

For practice I am trying to display a number that increments from 0 - 9, then decrements from 9 - 0, and infinitely repeats.The code that I have so far seems to be close, but upon the second iteration the setInterval calls of …

Read More
CSS Animation onClick

How can I get a CSS Animation to play with a JavaScript onClick? I currently have: .classname { -webkit-animation-name: cssAnimation; -webkit-animation-duration:3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes cssAnimation { from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px); } to { -webkit-transform: rotate(0…

Read More
How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations. I need to do something like this... $('#first').animate({ width: 200 }, 200); $('#second').animate({ width: 600 }, 200); but to run …

Read More