A HTML5 analog clock experiment, using jQuery and Raphael js.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
gfx Initial import of designed graphics Jun 1, 2010
htdocs Added github link to page Jun 1, 2010
resources Initial import of used resources Jun 1, 2010
src Initial import of clock javascript Jun 1, 2010
README.rst Added really short and simple README.rst Jun 1, 2010


ineedmoretime.org - A HTML5 analog clock experiment

The files in this repository represent the full source of the website http://ineedmoretime.org.

This page has been created to experiment in creating a nice looking analog clock only using HTML5 features.

The Raphael Javascript library as well as jQuery is used to realize the clock with all its nice animation effects.


If you want to use this clock in your own environment you need to load jQuery as well as Raphael js. Finally the file src/clock.js needs to be evaluated. After it has been loaded a Clock object is ready for use. Simple instantiate such an object providing a CSS selector to a container element to position the clock in, followed by an optional options object. For possible objects look into the source code of the clock itself. The names are pretty self-explanatory.

The method moveBack can be used to rewind the clock x hours. This method has mainly been implemented to play a little with the animation capabilities of Raphael.

A simple usage example could look something like this:

var clock = new Clock( "#clock-container" );

Reasons for publishing

I published this source code hoping that somebody might find this stuff useful in some way. I wrote this stuff just for fun and to experiment with some HTML5 features, as well as to play with Raphael js.