Learn how to Create a Retro Animated Flip-Down Clock
In this tutorial, we will create an animated flip down clock inspired by the 70′s. Using the Mootools framework, I tried to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website, so let’s get started!
Tutorial Details
- Program: Mootools
- Difficulty: Easy
- Estimated Completion Time: ~ 1 hour

Step 1: The Main Concept
The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes. Here is the basic scheme.

Step 2: Photoshop
First, we must create our images.
Select the “Rounded Ractangle Tool” (U), set the radius to 10px and the color to #0a0a0a and create a 126px by 126px ractangle, you can change the dimension according to your needs, just keep them an even number. Resterize the shape by going to Layer > Rasterize > Shape or Right Click > Rasterize Layer. Now we want to create that "gap" between the two parts and make the upper background a little bit lighter. Place a guide line at the horizontal half of our pad, then select the hole pad (Ctrl + Click on the layer icon) and with the Rectangular Marquee Tool (M) select the upper half in intersect mode (hold Shift + Alt). Now we just have to fill the selection with #121212 using the Paint Bucket Tool (G). Next trace a 2px, black line using our guide line as help, on a separate layer.

Now we have to add the digits. Using the Type Tool (T) make a new layer with the digits and place it under the line we’ve created earlier.

Just add a little overlay on the numbers to make them look a bit more realistic. Create a new layer above the digits layer, select the lower part of the pad and fill with #b8b8b8, then fill the upper part with #d7d7d7. Now set the blending mode to “Multiply”.

Ok. Now that we have our completed pad, we have to split it up. The main idea is to split the right digit from the left one, so instead of having 60 images for the minutes and seconds groups, you end up with 20 images that we will use for both groups. So basicly we have to split our pad into 4 images with the same dimensions. I used the Crop Tool (C) for this job.

After you crop the pad, change the digit and save each time as a separate .png so you end up with all the files you need ( numbers from 0 – 9 ). Repeat this step for all parts of the pad. Note that for the hours pad, you don’t separate the digits, you have just the upper and lower part. In the end here is our folder structure ("Double" for minutes and seconds, "Single" for hours):

Step 3: HTML Markup
Now that we have our files ready we can start coding. First of all, we need two containers for our images, one for the "upperPart" of our clock and one for the "lowerPart".
<div id="upperPart"> </div> <div id="lowerPart"> </div>
Next we add the images. Here is a scheme with the id’s I’ve used:

<div id="upperPart">
<img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png" />
<img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png" />
<img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png" />
</div>
<div id="lowerPart">
<img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png"/>
<img id="minutesDownLeft" src="Double/Down/Left/0.png" /><img id="minutesDownRight" src="Double/Down/Right/0.png" />
<img id="secondsDownLeft" src="Double/Down/Left/0.png" /><img id="secondsDownRight" src="Double/Down/Right/0.png" />
</div>
I had to use a transparent spacer image that is 1px wide and the same hight as the other images in order to keep the containers from shrinking when the pads flip. Also, there must not be any space between the images from the same group (e.g. "minutesUpLeft" and "minutesUpRight").
Ok. These will be the front pads of our clock that will flip down, now we have to set up the back ones, so when the front pads flip, the new digits can be seen on the them. We will wrap what we’ve done so far in a div and just duplicate it above itself, adding to each image id the word "Back" and changing to the appropriate source file.
<div id="back">
<div id="upperPartBack">
<img src="spacer.png" /><img id="hoursUpBack" src="Single/Up/AM/0.png" />
<img id="minutesUpLeftBack" src="Double/Up/Left/0.png" /><img id="minutesUpRightBack" src="Double/Up/Right/0.png" />
<img id="secondsUpLeftBack" src="Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="Double/Up/Right/0.png" />
</div>
<div id="lowerPartBack">
<img src="spacer.png" /><img id="hoursDownBack" src="Single/Down/AM/0.png" />
<img id="minutesDownLeftBack" src="Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="Double/Down/Right/0.png" />
<img id="secondsDownLeftBack" src="Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="Double/Down/Right/0.png" />
</div>
</div>
<div id="front">
<div id="upperPart">
<img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png" />
<img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png" />
<img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png" />
</div>
<div id="lowerPart">
<img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png" />
<img id="minutesDownLeft" src="Double/Down/Left/0.png" /><img id="minutesDownRight" src="Double/Down/Right/0.png" />
<img id="secondsDownLeft" src="Double/Down/Left/0.png" /><img id="secondsDownRight" src="Double/Down/Right/0.png" />
</div>
</div>
Here is the complete .html file with reference to the stylesheet and the javascript file "animate.js" in which we will create the animation.
<html> <head> <title>Create an Animated Flip Down Clock</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="wrapper"> <div id="back"> <div id="upperPartBack"> <img src="spacer.png" /><img id="hoursUpBack" src="Single/Up/AM/0.png" /> <img id="minutesUpLeftBack" src="Double/Up/Left/0.png" /><img id="minutesUpRightBack" src="Double/Up/Right/0.png" /> <img id="secondsUpLeftBack" src="Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="Double/Up/Right/0.png" /> </div> <div id="lowerPartBack"> <img src="spacer.png" /><img id="hoursDownBack" src="Single/Down/AM/0.png" /> <img id="minutesDownLeftBack" src="Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="Double/Down/Right/0.png" /> <img id="secondsDownLeftBack" src="Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="Double/Down/Right/0.png" /> </div> </div> <div id="front"> <div id="upperPart"> <img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png" /> <img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png"/> <img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png"/> </div> <div id="lowerPart"> <img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png"/> <img id="minutesDownLeft" src="Double/Down/Left/0.png"/><img id="minutesDownRight" src="Double/Down/Right/0.png" /> <img id="secondsDownLeft" src="Double/Down/Left/0.png" /><img id="secondsDownRight" src="Double/Down/Right/0.png" /> </div> </div> </div> </body> <script src="mootools.js" type="text/javascript"></script> <script src="animate.js" type="text/javascript"></script> </html>
Step 4: CSS
The main thing we have to do now is to overlap the “front” and “back” divs. First we position the main wrapper where we need it and then give the same absolute position to both containers.
#wrapper{
position:absolute;
top: 100px;
left:400px;
}
#front, #back{
position:absolute;
top:0px;
}
Now we need to vertically align the upper part to the bottom and the lower part to the top, so that the pads would look like they’re anchored to the middle of the clock. I added the height and visibility properties for the front parts because we need them for the animation later on.
#upperPart, #upperPartBack{
vertical-align:bottom;
}
#lowerPart, #lowerPartBack{
vertical-align:top;
}
#upperPart img{
position:relative;
height:63px;
vertical-align:bottom;
visibility:visible;
}
#lowerPart img{
position:relative;
height:63px;
vertical-align:top;
visibility:visible;
}
#lowerPartBack img{
position:relative;
vertical-align:top;
}
#upperPartBack img{
position:relative;
vertical-align:bottom;
}
Finally all we have to do is to constrain the width of the pads because we want to play around only with their height. By default, if you change one of them, the hole image will be scaled.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
width:126px;
}
#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
width:63px;
}
Here it is all put together:
body{
background:#000;
}
#wrapper{
position:absolute;
top: 100px;
left:400px;
}
#front, #back{
position:absolute;
top:0px;
}
#upperPart, #upperPartBack{
vertical-align:bottom;
}
#lowerPart, #lowerPartBack{
vertical-align:top;
}
#upperPart img{
position:relative;
height:63px;
vertical-align:bottom;
visibility:visible;
}
#lowerPart img{
position:relative;
height:63px;
vertical-align:top;
visibility:visible;
}
#lowerPartBack img{
position:relative;
vertical-align:top;
}
#upperPartBack img{
position:relative;
vertical-align:bottom;
}
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
width:126px;
}
#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
width:63px;
}
Step 5: Creating the Animation
First of all we need some variables to store the time that is shown on the pads. Note: h = hours, m1 = the left minute digit, m2 = the right minute digit, s1 = the left second digit, s2 = the right second digit.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current= -1;
Now we create a function that will run every second and update our clock. First we get the current time and determine the time of day, AM or PM.
function retroClock(){
now = new Date();
h = now.getHours();
m1 = now.getMinutes() / 10;
m2 = now.getMinutes() % 10;
s1 = now.getSeconds() / 10;
s2 = now.getSeconds() % 10;
if(h < 12)
ap = "AM";
else{
if( h == 12 )
ap = "PM";
else{
ap = "PM";
h -= 12; }
}
Then we compare it to the time shown on the pads and change which group is different. It uses a function called “flip” that I will describe in a minute.
if( h != h_current){
flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
h_current = h;
}
if( m2 != m2_current){
flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
m2_current = m2;
flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
m1_current = m1;
}
if (s2 != s2_current){
flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
s2_current = s2;
flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
s1_current = s1;
}
}//end retroClock
Now, the flip function. It has a few parameters: upperId, lowerId = the ids of the upper and lower pads that will flip; changeNumber = the new value that will be shown; pathUpper, pathLower = the paths to the source files for the new value. The animation is composed of the following steps:
The front upper pad takes the value of the back one and it’s made visible, overlaing it, while the lower one is also made visible but it’s height is changed to 0px.
function flip (upperId, lowerId, changeNumber, pathUpper, pathLower)
{
var upperBackId = upperId+"Back";
$(upperId).src = $(upperBackId).src;
$(upperId).setStyle("height", "63px");
$(upperId).setStyle("visibility", "visible");
$(lowerId).setStyle("height", "0px");
$(lowerId).setStyle("visibility", "visible");
Now we change the back upper and front lower pad to the new value.
$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png"; $(lowerId).src = pathLower+parseInt(changeNumber)+".png";
Having this setup we can start the actual animation. As I mentioned earlier it consists of reducing the height of the front upper part to 0%, 0px, and increasing the height of the front lower part to 100%, 63px in this case. After the animation is complete, the back lower pad takes the new value and the front pads are make hidden.
var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipUpper.addEvents({
'complete': function(){
var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipLower.addEvents({
'complete': function(){
lowerBackId = lowerId+"Back";
$(lowerBackId).src = $(lowerId).src;
$(lowerId).setStyle("visibility", "hidden");
$(upperId).setStyle("visibility", "hidden");
} });
flipLower.start('height', 64);
}
});
flipUpper.start('height', 0);
}//end flip
The final thing to do is to make our main function run every second.
setInterval('retroClock()', 1000);;
Here it is all put together.
var h_current = -1;
var m1_current = -1;
var m2_current = -1;
var s1_current = -1;
var s2_current= -1;
function flip (upperId, lowerId, changeNumber, pathUpper, pathLower)
{
var upperBackId = upperId+"Back";
$(upperId).src = $(upperBackId).src;
$(upperId).setStyle("height", "63px");
$(upperId).setStyle("visibility", "visible");
$(lowerId).setStyle("height", "0px");
$(lowerId).setStyle("visibility", "visible");
$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";
$(lowerId).src = pathLower+parseInt(changeNumber)+".png";
var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipUpper.addEvents({
'complete': function(){
var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipLower.addEvents({
'complete': function(){
lowerBackId = lowerId+"Back";
$(lowerBackId).src = $(lowerId).src;
$(lowerId).setStyle("visibility", "hidden");
$(upperId).setStyle("visibility", "hidden");
} });
flipLower.start('height', 64);
}
});
flipUpper.start('height', 0);
}//end flip
function retroClock(){
now = new Date();
h = now.getHours();
m1 = now.getMinutes() / 10;
m2 = now.getMinutes() % 10;
s1 = now.getSeconds() / 10;
s2 = now.getSeconds() % 10;
if(h < 12)
ap = "AM";
else{
if( h == 12 )
ap = "PM";
else{
ap = "PM";
h -= 12; }
}
if( h != h_current){
flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
h_current = h;
}
if( m2 != m2_current){
flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
m2_current = m2;
flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
m1_current = m1;
}
if (s2 != s2_current){
flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
s2_current = s2;
flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
s1_current = s1;
}
}//end retroClock
setInterval('retroClock()', 1000);
Finished

We are finished! Hope you’ve enjoyed working on this little project, it has a somewhat complex concept, but in the end it is a really neat gadget for your websites. Please do not hesitate to send any suggestions you may have!
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.




RoyalSlider – Touch-Enable ... only $12.00 
Great, Thanks man !
nice nice nice nice nice nice nice nice nice nice
is it possible to view how it works – demo button or something missing?
found it :-)
cooooool.
I have changed it to a count down. It works fine with firefox.
http://whitecube.persiangig.com/countDown/index.html
it doesn’t work man
What time out period did you put?
It seems that it’s not working, however, you might have just put a short time out period.
Thanks,
Gabi
hey, may i know how do you made it to count down?
Awsome… Thanks alot
anyone has a working countdown flip-down clock? it will be nice if it is countingdown.
Working Countdown with this template: http://www.unet.univie.ac.at/~a0907851/countdown/
Nice work! But, how can I change the size of the images? If I adapt the css, my layers begin to move (lower and upper part, the back layers stay fix). Has anyone a workaround? I don’t see why they move.
In the CSS just change the width to which your desired size. And in the animate javascrpt file change the height to the same size:
#minutesUpLeft, #minutesUpRight, ….etc { width:64px; }
$(upperId).setStyle(“height”, “64px”);
flipLower.start(‘height’, 64);
Worked for me!
Apologies, but you will also need to change:
#hoursUp, #hoursDown, #hours… etc { width:125px;
To scale this to the right size you will need to do the following formula:
Take the width you set earlier, for example lets use 40px.
You then need to work out the percentage, so:
40 divided by 64 = 0.625 x 125 = 78.125
then round it to the nearest whole number, so your width for the hours would be 78px.
Hi Dan!
Unfortunately, this does not work in IE.
Functionality is ok on the other browsers but not on IE.
Thanks,
G.
very cool
太强大了~
Great work, looks ace. I’m trying to use this in a project but I would like to keep everything the one framework (jQuery).
I know I’m repeating the same question but does anyone know of a jQuery example of this technique?
jQuery thing (not my work):
http://od-eon.com/blogs/horia/animated-retro-clock/
hello,
did somebody change it do a 2digit hour like 23:12:55
I don´t know how to do this
thx for help
//For a countdown up to 99days 23hours 59minutes and 59seconds
// JavaScript Document
//initial time
var d1_current = -1;
var d2_current = -1;
var h1_current = -1;
var h2_current = -1;
var m1_current = -1;
var m2_current = -1;
var s1_current = -1;
var s2_current = -1;
function flip (upperId, lowerId, changeNumber, pathUpper, pathLower){
var upperBackId = upperId+”Back”;
$(upperId).src = $(upperBackId).src;
$(upperId).setStyle(“height”, “64px”);
$(upperId).setStyle(“visibility”, “visible”);
$(upperBackId).src = pathUpper+parseInt(changeNumber)+”.png”;
$(lowerId).src = pathLower+parseInt(changeNumber)+”.png”;
$(lowerId).setStyle(“height”, “0px”);
$(lowerId).setStyle(“visibility”, “visible”);
var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipUpper.addEvents({
‘complete’: function(){
var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipLower.addEvents({
‘complete’: function(){
lowerBackId = lowerId+”Back”;
$(lowerBackId).src = $(lowerId).src;
$(lowerId).setStyle(“visibility”, “hidden”);
$(upperId).setStyle(“visibility”, “hidden”);
} });
flipLower.start(‘height’, 64);
}
});
flipUpper.start(‘height’, 0);
}//flip
function retroClock(){
// get new time
futuredate = new Date(2010,2,4,10,0,0,0); //finishing time in this format (year, month, day, hours, minutes, seconds, ms)
now = new Date();
timeleft = futuredate.getTime() – now.getTime(); //time till sale in ms
daysleft = Math.floor(timeleft/86400000);
timeleft = Math.floor(timeleft%86400000)
hoursleft = Math.floor(timeleft/3600000);
timeleft = Math.floor(timeleft%3600000)
minutesleft = Math.floor(timeleft/60000);
timeleft = Math.floor(timeleft%60000);
secondsleft = Math.floor(timeleft/1000);
d1 = Math.floor(daysleft/10);
d2 = Math.floor(daysleft%10);
h1 = Math.floor(hoursleft/10);
h2 = Math.floor(hoursleft%10);
m1 = Math.floor(minutesleft/10);
m2 = Math.floor(minutesleft%10);
s1 = Math.floor(secondsleft/10);
s2 = Math.floor(secondsleft%10);
//change pads
if ( d2 != d2_current){
flip(‘daysUpRight’, ‘daysDownRight’, d2, ‘/Double/Up/Right/’, ‘/Double/Down/Right/’);
d2_current = d2;
flip(‘daysUpLeft’, ‘daysDownLeft’, d1, ‘/Double/Up/Left/’, ‘/Double/Down/Left/’);
d1_current = d1;
}
if ( h2 != h2_current){
flip(‘hoursUpRight’, ‘hoursDownRight’, h2, ‘/Double/Up/Right/’, ‘/Double/Down/Right/’);
h2_current = h2;
flip(‘hoursUpLeft’, ‘hoursDownLeft’, h1, ‘/Double/Up/Left/’, ‘/Double/Down/Left/’);
h1_current = h1;
}
if ( m2 != m2_current){
flip(‘minutesUpRight’, ‘minutesDownRight’, m2, ‘/Double/Up/Right/’, ‘/Double/Down/Right/’);
m2_current = m2;
flip(‘minutesUpLeft’, ‘minutesDownLeft’, m1, ‘/Double/Up/Left/’, ‘/Double/Down/Left/’);
m1_current = m1;
}
if (s2 != s2_current){
flip(‘secondsUpRight’, ‘secondsDownRight’, s2, ‘/Double/Up/Right/’, ‘/Double/Down/Right/’);
s2_current = s2;
flip(‘secondsUpLeft’, ‘secondsDownLeft’, s1, ‘/Double/Up/Left/’, ‘/Double/Down/Left/’);
s1_current = s1;
}
}
setInterval(‘retroClock()’, 1000);
This is very nice! Thanks.
Nice Work Buddy
how about a countdown version where a closing or launch date is specified, that would be very cool, and this is btw brilliant
I’ve just put one up on a website I’m working on: http://launch.smash.org.au/
The code is basically unchanged from the tutorial so it should be very easy to modify if you want to change the date it’s counting down to. Hope that helps!
hello,
nobody who did it in a 2digit hour like 23:12:55 and mootools?
can sombody provide a *.psd-file?
i’am not very familiare with photoshop
thx
how to create such a clock with actionscript
Thanks Alexandru! I used the tutorial as a base to construct a countdown timer with the same look and feel :) Couldn’t have done it without your hard work :)
Hi Micheal,
It looks wonderful. Could you share how to set the countdown timer like you have.
Much appreciated.
Thanks,
Sanje
Hi,
I’ve ported this beautiful example to jQuery. Read all about it here:
http://od-eon.com/blogs/horia/animated-retro-clock/
Thank you!
Would there be any reason why the clock would not work from the hours of 7:00 AM – 8:00 AM?
does work in asp.net?
great, i really like this clock! i added a link from my web directory
thanks
Hi,
Has anyone worked out a way to get rid of this 1px to right bug yet. Been trying to sort it out for ages and I can’t pinpoint where its coming from :-S
I think it’s caused by the spacer.png
The real reason is because the images being used were not knocked up properly, some of them are slightly displaced. This is a great flip clock tut. I changed all my images to suit my design, that’s when I noticed it was actually the images and how they were put together. Also, some are 63×64 and 125×64 when they should be 64×64 and 126×64 respectively. Try it, you’ll see!
The spacer is absolutely necessary to make the animation transition as smooth as possible. Without it, the image in the background is out by 1 pixel whilst the animation is in transition from top half of the numbers to the lower half of the numbers. Try it, you’ll see! (If you cant be bothered to go through the whole process, try using Firebug to delete the spacer.png element in the code in real time, you’ll still see!
Thanks for this tut Alex P.
Hi,
please do you know, how create watch with 24 hours? example: 21:20:53. Thx.
Does anyone think it is possible to redo this with CSS3?
I am having problems with flickering in Safari. Can anyone help?
PPKXwe I’m impressed! You’ve managed the almost impossible.
You should add image preloading – on slow internet connections when digit change to the one that wasn’t displayed before, for a few miliseconds (depend on connection) number is displayed with two difrerent halves e.g. the bottom part is 3 and the top 2.
hi can u made this on action script (not 3 but 2 or 1) we need it for mobile app urgent please
Wow very useful indeed very cool! I plan to use it on miy site but think that the flipping seconds are to much. How can I only display hours and minutes?
Really nice one mate! Any idea how to make it to flip from left to right? I have some little designs here which needs some flipping :) Any help will be really appreciated!
Sorry my english, somebody have problems with the position of the clock? i cant controlled this question and its fucking me crazy!
the second problem is the retro clock, i configured in a master page, y cant see in the content page and the think is that watch is allways visible.
again, so sorry my english, and i hope an answer cooming soon!
thanks!
This works great in the demo download code, but when I try to get it working on my website it continually comes up with:
$(upperId).setStyle is not a function
[Break on this error] $(upperId).setStyle(“height”, “17px”);
animate.js (line 27)
Any ideas? I am using Strict instead of transitional.
Thanks.
I figured out my problem with the error
$(upperId).setStyle is not a function
[Break on this error] $(upperId).setStyle(“height”, “17px”);
animate.js (line 27)
I am using jquery on the page and it is essential I do that.. so could you help me out so that this isn’t creating a conflict with my jquery? Is there a special way you can call it so it doesn’t give an error?
Thanks
Does anyone know how this can integrate with a countdown *schedule*?
For example, it should countdown to 10am, then at 10am, countdown to 12pm, then at 12:05pm, countdown to 1pm, etc.
@Kate You just need to add
jQuery.noConflict();
right after you load jQuery.js.
Hope it helps.
Any one know how you would count seconds and minutes for 5 minutes and then start over again from 0 minutes 1 seconds.?