Create an Animated Flip Down Clock

Learn how to Create a Retro Animated Flip-Down Clock

on Oct 21st 2009 with 128 comments

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!


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a web designer and developer based in Romania. My interest in this domain started a couple of years ago and since then I'm constantly trying to improve my skills and make my work better.  

Plus Premium
 
 
Add Comment

Discussion 128 Comments

Comment Page 1 of 21 2
  1. Scott says:
    October 21, 2009 at 12:23 pm

    This exists as a pretty cool screen saver which can be found here: http://www.9031.com/downloads/screensavers.html.

    This is a pretty cool tutorial, thanks. Although I am not sure if you should be worried about copyright infringement or not. Either way I learned a lot.

    Reply
  2. Philo says:
    October 21, 2009 at 12:26 pm

    Amazing Result! :)
    You don’t expect that something like that is possible using javascript.

    Reply
  3. Alexander says:
    October 21, 2009 at 12:27 pm

    #1
    A Demo or full Sourcecode Download would be very nice.

    Reply
  4. Toms Ošiņš says:
    October 21, 2009 at 12:29 pm

    Very nice. I’ll try to implement this in one of my future projects. Cookie for the tut.

    Reply
  5. ryan says:
    October 21, 2009 at 12:31 pm

    is it just me or is this lame.

    Reply
    • Noah Hendrix says:
      October 21, 2009 at 1:00 pm

      I think it is pretty cool. I can see it used to count down to a product launch of some kind. What is actually pretty cool about this is that it is done without using flash something not even thought possible a few years ago. So to answer your question yes it is just you.

      Reply
      • Laneth says:
        October 21, 2009 at 2:18 pm

        Haha, burned!

        Actually, I agree Noah – this is awesome. Funny thing is, with a little creativity, one could take the lessons learned here (both graphically and code-wise) and apply it to anything that suits their personal tastes. And the time it takes to post a comment here is time wasted teaching yourself something new, so I’m glad that my comment actually contributed instead of complained.

    • John says:
      October 21, 2009 at 3:31 pm

      it’s just you.

      Reply
    • Siriquelle says:
      October 21, 2009 at 4:03 pm

      Yeah, I think this is cool too. Would make a good attition to a comming soon page where it was counting down to a specific time, it’s not about the clock its about how you can use what you learn while following the tutorial. Get it? :D

      Reply
    • Ian says:
      October 21, 2009 at 5:44 pm

      In the past I’ve been quite critical of a number of the tutorials posted on nettuts+, especially ones dealing with javascript libraries since I think there is a bit too much of a focus put on them. That said I thought this was a good tutorial and the final product looks great. I’m not sure if I’ll ever have a use for it but I’m sure plenty of other people will.

      Reply
      • Nori Silverrage says:
        October 22, 2009 at 6:28 am

        Well I for one really enjoy all the tutorials they post on here, and I think that ones that utilize javascript libraries make sense because they are easy to use and allow people that may not otherwise use javascript to use it. Plus it makes doing things very easy for people that know javascript.

    • michael langer says:
      October 21, 2009 at 11:34 pm

      We are developing something like this for a new auction widget for our site stuffbuff so there is a use for you.

      Reply
  6. Ethan says:
    October 21, 2009 at 12:58 pm

    This is cool. I will definitely use this technique! Nice article.

    Reply
  7. Chris Pierre says:
    October 21, 2009 at 1:27 pm

    Interesting Technique of Javascript! . I agree with Noah I can visualize using this effect for a countdown on a product release.

    Reply
  8. Kwaa says:
    October 21, 2009 at 1:32 pm

    Very nice and very “out of the box” to do this using Javascript.

    Well done, mate.

    Reply
  9. Moksha Solutions says:
    October 21, 2009 at 1:49 pm

    really wonderful tutorial. thanks for sharing and its really sometime new.

    Reply
  10. Iain - CodeJoust says:
    October 21, 2009 at 2:00 pm

    Next up. Using canvas for this effect without images.
    I’m usually pretty image-agnostic when doing effects like this… but the 3-d flip effect might be a little tricky to achieve with canvas.

    Reply
  11. Luis Craik says:
    October 21, 2009 at 2:03 pm

    GREAT!! I was looking for it since… loooonng time ago!… thanks!!!!!!!!!! Love this site!

    Reply
  12. Rav says:
    October 21, 2009 at 2:04 pm

    I think it is bad idea to split number images. The best idea will be to create one image with all parts. That becouse now images are loaded if they need to appear. If they will be in one image that will be great (load only one on start, without ugly delay).

    Reply
  13. Luis Craik says:
    October 21, 2009 at 2:21 pm

    By the way, how can I use it as a countdown? Ideas or sample? Thanks Jeffrey Way & Tuts+

    Reply
  14. Luis Craik says:
    October 21, 2009 at 2:23 pm

    …and you Alexandru Pitea ;D

    Reply
  15. JHAY says:
    October 21, 2009 at 2:51 pm

    This is cool! Thanks

    Reply
  16. Sorin Istudor says:
    October 21, 2009 at 3:15 pm

    Proud to be romanian :), thanks for the article.

    Reply
  17. Piero says:
    October 21, 2009 at 3:46 pm

    Man, you’re good :)

    Reply
  18. ValSalva says:
    October 21, 2009 at 4:01 pm

    That’s a nice neutral digit font that looks authentic to a 70′s era digital clock. I didn’t see any mention of the font used. Anyone have any idea?

    Reply
  19. esranull says:
    October 21, 2009 at 4:33 pm

    very nice thanks

    Reply
  20. TeamTutorials says:
    October 21, 2009 at 4:49 pm

    Pretty awesome. I’m interested if you think this could be done with css instead of images.

    Reply
  21. underpk says:
    October 21, 2009 at 6:01 pm

    nice! love the clean design and would be useful for product launch page.

    Reply
  22. Ramon says:
    October 21, 2009 at 10:28 pm

    How to make it count backwards, from actual date-time?

    Reply
  23. Rob says:
    October 21, 2009 at 10:48 pm

    it would be awsome a jquery version of this

    Reply
  24. Padfoot says:
    October 21, 2009 at 11:19 pm

    Brilliant Tut!

    Reply
  25. michael says:
    October 21, 2009 at 11:35 pm

    We are developing something like this for a new auction widget for http://stuffbuff.com (coming soon). This is perfect timing.

    Thanks

    Reply
  26. Dimitree says:
    October 22, 2009 at 12:35 am

    Great! Just wondering… can this also be done with JQuery?

    Reply
  27. Aziz Light says:
    October 22, 2009 at 1:27 am

    That is simply awesome! One of the best tutorials I’ve seen on Nettuts since a long time. Thanks a lot!

    Is it possible to reproduce the same thing using jQuery?

    Reply
  28. Stephen Webb says:
    October 22, 2009 at 2:04 am

    The effect this creates is powerful and probably useful in a number of applications, however I can’t help thinking that it involves a lot of programming for something that is relatively simple and I’m sure could be achieved easier in Flash.

    I can see the implementations of the code though, and the concept of using this to count down to things such as product launches could be a nice addition to any website.

    I would be interested to see further examples of applications such as these in the future. Such widgets can help make a site sometimes, and anything that gains visitor interest is a big bonus to any site.

    Reply
  29. bowbow says:
    October 22, 2009 at 2:10 am

    really2 cool…

    Reply
  30. Aqib Mushtaq says:
    October 22, 2009 at 4:00 am

    Only thing I can say is WOW!

    Reply
  31. Nori Silverrage says:
    October 22, 2009 at 6:23 am

    Very nice. Just a suggestion though, if you compress the PNGs using PNGauntlet you can save 23KBs of space… :)

    Reply
  32. Badita Florin says:
    October 22, 2009 at 7:10 am

    Really nice, this shows the real aplications for Javascript, not the old-crashing yahoo games. Flash is so over-rated

    Bafta si la cat mai multe proiecte Alexandru Pitea.

    If you drop by in Bucharest, give me a call and will talk 0766.309.001

    Reply
  33. Alex Hobbs says:
    October 22, 2009 at 7:44 am

    Very nice, reminds me of Apple’s countup to 1 billion app flip thing :)

    Reply
  34. rmaksim says:
    October 22, 2009 at 8:10 am

    some time ago made a similar watch, only on jQuery

    http://iyoremo.com/jquery-sexy-clock/

    Reply
  35. rmaksim says:
    October 22, 2009 at 8:13 am

    some time ago made a similar clock, only on jQuery

    http://iyoremo.com/jquery-sexy-clock/

    Reply
  36. Mike Davis says:
    October 22, 2009 at 8:24 am

    Not too be too picky but since others are planning on using this….

    The bottom images for the second and minute digits are not lining up to the top half. They look to be a pixel off. It looks like this is from the images.

    Reply
  37. Ronny says:
    October 22, 2009 at 8:37 am

    Nice! There’s only one (little) thing though:

    A normal clock would only update the second’s last digit every second, and the second’s first digit every 10 seconds. The same for hour and minutes.

    Is there an easy fix for this?

    Reply
    • Tomek says:
      October 23, 2009 at 2:25 am

      I was wondering did somebody post thiss little issiue here. Ronny’s damn right, and solving this problem would definitly make the clock more realistic.

      But it’s amazing anyway!

      Reply
  38. schiwe says:
    October 22, 2009 at 9:01 am

    mike is correct!
    it is floated one pixel to the right…

    Reply
  39. sandrups says:
    October 22, 2009 at 11:00 am

    excelente tutorial, me gusto la creatividad de ustedes muchachos, sale de lo cotidiano de la red.

    Reply
  40. UrbanCool says:
    October 22, 2009 at 11:47 am

    you guys freak me out!!! me & a colleague were just discussing how to do something like this the other day, well… maybe a fortnight ago on a holding page for a website launch…

    FREAKY!

    But this is exactly how we wanted it…. you guys ROCK!!

    Reply
  41. Alexander says:
    October 22, 2009 at 2:02 pm

    its seems that the pixel is from the “ten-minutes”-image after this image the others are 1 px right.

    Reply
  42. keyMaker says:
    October 23, 2009 at 6:32 am

    Yep there is a glitch. 1px :/

    Reply
  43. Hooman says:
    October 23, 2009 at 12:43 pm

    exactly what most of us needed to know about, thanks envato, you enlighten the world of web design/development.

    Reply
  44. ip says:
    October 24, 2009 at 8:06 am

    Where to upload Folder Images ???

    Reply
  45. Maxime says:
    October 25, 2009 at 6:20 am

    Can you use this in a design that I will sell?

    Reply
  46. Alexsandro says:
    October 25, 2009 at 12:11 pm

    Lovely, but I don’t know a functional how can I use that!

    Reply
  47. Chema Mateos says:
    October 25, 2009 at 2:15 pm

    I put an application of this in:

    http://www.chemamateos.com/dominios/index.html

    And reduce the size of images, to make an small clock

    Reply
  48. Paw Hellegaard says:
    October 27, 2009 at 12:53 am

    Thanks for sharing this, it was just a clock like this i was looking for, and here is the source.. damn thanks!

    Reply
  49. Jonathan says:
    October 27, 2009 at 6:29 am

    A nice application. But not really useful :-)

    Reply
  50. g3niuz says:
    October 27, 2009 at 11:51 am

    wow…
    great this could be useful ;D

    Reply
Comment Page 1 of 21 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.