The original Colour Clock is a brilliant idea by Jack Hughes representing time as a hexadecimal value.
I rebuilt The Colour Clock using jQuery/CSS3.
The original Colour Clock is a brilliant idea by Jack Hughes representing time as a hexadecimal value.
I rebuilt The Colour Clock using jQuery/CSS3.
good adaptation of an excellent good idea. really wonderful work. congratulations !
Thanks very much!
I would you purpose an improvement for avoid jump color transition, at each second or each minutes.
I simply add a parity test on the bluenum & greennum declaration like this :
[code]
if(currentHours%2) {
greennum = (Math.round(255 * ((currentMinutes) / maxnummins)));
} else {
greennum = (Math.round( 255 - ( 255 * ((currentMinutes) / maxnummins))));
}
if(currentMinutes%2) {
bluenum = (Math.round(255 * ((rounded) / maxnumsecs)));
} else {
bluenum = (Math.round(255 - ( 255 * ((rounded) / maxnumsecs))));
}
[/code]
It seems work fine …
That is an interesting idea. I can totally see how that would avoid the color jump with the minutes and seconds ticking backwards every other hour and minute respectively. My concern is that it would start to conflict with the “clock” aspect as the hex value would actually be decremental every other minute.
It is an interesting thought though. I wonder if there is a way to ease color jump while maintaining the “clock” aspect using continually incremental hex values.
you could be inspirated by this work [link]http://motyar.info/blog/2010/07/animate-color-using-jquery.html[/link]
[...] Jack Hughes representing time as a hexadecimal value.I rebuilt The Colour Clock using jQuery/CSS3. Read More Demo9. CountDown jQuery pluginThis is an Easy to use animated countdown JavaScript. It is jQuery [...]
[...] Read More Demo [...]
[...] Read More Demo [...]
[...] Source Demo [...]
[...] 5. Colour Clock – jQuery/CSS3 Rebuild The original Colour Clock is a brilliant idea by Jack Hughes representing time as a hexadecimal value.I rebuilt The Colour Clock using jQuery/CSS3. SourceDemo [...]
[...] Read More Demo [...]
[...] SourceDemo [...]