Tuesday, 11 April 2017

CODEF Flip Clock

Hi Folks!

After some playing around over the last couple of nights, here is something I've put together, just because I wanted to! 

It's a "Flip Clock" made using CODEF and a custom .JS lib I have made (called flip_clock.js).



Obviously there are plenty of ways out there if you Google to do this, but if you check out the code, and the notes below, this is a nice easy way of having a flip clock with only one line of code!

http://codef.namwollem.co.uk/TEST/flipclock.html

The link above is the location of a TEST page, where you can see the flip clock in action.

You can either link your page to my site, or download it, along with two dependencies (two .PNG files) - which need to be kept in the same location of the .JS file.

http://codef.namwollem.co.uk/JS/CODEF/flip_clock.js
http://codef.namwollem.co.uk/JS/CODEF/flip_clock.png
http://codef.namwollem.co.uk/JS/CODEF/flip_clock_bl.png

The way to call the clock is very simple.

flip_clock(destination canvas,colour,Xposition,Yposition,scale);

In the line above destination canvas refers to the canvas you wish to have the clock drawn upon.
Colour can be either 'white' or 'black'.
Xposition and Yposition determines the location upon the destination canvas the clock will be drawn.
Scale (default=1) is the size of the clock. (Default is approx. 580 pixels by 130 pixels).
The scale command can be ignore, and the default will be called.

See example below:

flip_clock(mycanvas,'white',50,120);

Hope you like!


No comments:

Post a Comment