Encoding flip flash style animation in jQuery jQuery style?

Question

I'm struggling to create a simple animation based on those old clocks with flipping numbers. I added the image below, copied from the free PSD found on Premium Pixels:

The biggest problem I am facing is creating a flipping animation using jQuery in HTML / CSS / JavaScript . The only tutorial I found is from this online article + article , which actually uses images. It splits the upper and lower half of the clock into two different sets of images and replaces them for every second passing by ...

This method is not realistic on the website because it does not provide real context for readers. I would prefer that the numbers be hard-coded in HTML and perform the animation flipping exclusively through jQuery - preferably without images, except for backgrounds. Or, to put it another way, the numbers are encoded in HTML, but the clock itself is a series of rogdex-style bg images.

I hope I explained it well enough. I struggled with this for several days, and I honestly have no idea how to approach this script. Maybe by breaking the top and bottom halves into different divs, then change the internal numbers for every second that passes? I'm pretty wealthy in jQuery, but I'm weak on animation.

Thanks in advance for your support!

Answer 1

I think that I will try to do something where the text will be duplicated above and below. Then use images and css to display only each half respectively.

The next step is to create the illusion that the text flips with the image. I'm not sure how you want to do this. I think this is a matter of calibration and speed. The size of the text in relation to the image and the speed with which it flips on top.

The final part of the animation has the upper half, ready for the next number and the lower half of the queue at the end.

I have no real code to help, but I hope this concept is something that will work.

Answer 2

Try jQuery image rotate method .