Have you been searching the net for a flexibly customizable clock widget for a long while? Congrats! You have finally ended up on the exact page you have been struggling for. Welcome to Animated Clock github repository, where you can find a few pretty useful files included to get your dream entirely fulfilled.
- docs:
- init:
- animated-clock.js (initial code)
Unobtrusively designed and bestowed with a great mechanism for customizable animation at the same time, this smart widget can be swiftly integrated into your website html code. What you need is just a pinch of tags, a chunk of styles and a chop of functions from above.
Custom Styles section is supposed to inspire you to try different colors and some extra styles to personalize your widget appearance.
Custom Params section, on the other hand, allows you to create your own sequence of transitions including any number of transition units as it is shown down below:
let animatedClock = {
transitions: [
{
timings: {
delay: 0,
duration: 3000,
},
extraRotationValues: {
hValue: -1,
mValue: 1,
sValue: 0,
},
},
{
timings: {
delay: 2000,
duration: 1000,
},
extraRotationValues: {
hValue: 1,
mValue: -1,
},
},
{
timings: {
duration: 1000,
},
extraRotationValues: {
hValue: -1,
mValue: 2,
},
},
],
}Have a glance at the result or open the project on codepen.io.
Generally friendly with most browsers as long as rotate, transform, transition, animation and mix-blend-mode css properties are supported. Does not work in IE (oddly enough).
Note that it is not really the best way using css animation for moving hands in terms of time accuracy, but it does seem pretty decent as a particular way of embellishing your website.
PapaProger, first release on 12.02.2023. Copyright © 2023 Sergey Shlyakhtin. All rights reserved.