Clocks Irs about tim. n tis atte well tke onthe chafenge of creating and animating a cock, using simple CSS animators as wel as JavaScript fo tigger them, ‘Tiss the cock well ceate using HTML, CSS, an SVG background and ate JavaScript Well use CSS animations or transtions fr any movement, and rely on JavaScript to set te inal ime and acing basic eS transforms, HTML ‘To getstarted well need some HTML. 189 8 “ean conte es dene My etal approach wast use vee elements foreach ofthe hands. then went back and wrapped each na container element While the simpler HTML worked a far a the basi CSS animations, well need containing clement when we want o postion the hands and animate hem aso. Clock face Wel begin wth abasic lock design has around fe, wih simple hours, minutes and seconds hands‘You can get he SVG background her. Ive also added a pseudo-element to adda sold black ce to the Center. The hands ofthe cock can then be placed behing this peeudo-element as needed. ‘We should now have someting Ike this. ‘eore accing the hands, we need to pace the containers. senses-comatvan, news-amaier,scods-cataier poten: stole: “This slacks each container an tp o he clock. Nex! we create the hands, Hour handEach hand is gen the poston propety of salute and placed inthe twelve ottock poston. Well begin vith the hour hand. ‘musing percentages to make seating the lacks easier. I's abit more work but makes easier to have them ‘the view or vik down for mabies. We also sel the sraetrnorgie propery tothe botlom af the hanc 80 thatit canbe rotated late. Minute hand “The minute hand i snr, butte and thinner. ines ( gn: a sere: st, peitiens shales wo: 18 ts 2 1 2y‘Second hand ‘The second hands thinner again, but also set futher down so that extends further than the center, To allow for this he trasferwrtgin 10 €0%, This leaves 20% of the hand extending past he center, Animation ‘A stopped clocks only going tobe right tice day. Lets acd some animatons to make the clock behave mere tke the ral hing, ‘Some locks jump along with each second, usually making a ticking sound. Some clocks pur along with the hands moving smoothly. Wel ty both. First, well make the hands move smooth.We can use one foie to el the hands o move around 360 degrees (the OF staring poston is ipo). lyfe rete ( 08 ¢ ‘rmafirm rtnen(tnieg); ‘This keytame tls the element to animate around 960 degrees, applied tothe element using the arincton propery Well use smn timing functon onthe hand to make the hands move smooth. ‘The tous hand is setto rotate once every 12 hours (48.200 seconds). The minute hand rotates once pet ur, and the second hand ance every minute. ut itogether and we now have movement! Ifyou are very sharp-ayes, you might be able to even make out the minute hand meng. would ake 2 ou eto complete a retatlon, and lve houts for he hour hand Yo complete is cru, “The second han takes 60 seconds, so easier to note ‘Adding steps \We can make the hands behave meve he normal dock by having he second hand move around he dock Ingo seperate movements. simple wayto achieve fi ssh the ses tring faneton. The ston proper fo each hand then becomes:sanes-comatren{ ‘srnatone rotate ae infinite steam); , et ‘nnstion retate 6s Ifa ster; ? ‘Botn the minute and seconds hand now move around in sty steps. The browser automaticaly calculates how far each of hese 60 steps move. The correct time Irs very wallhaving the ime ook good, bul how about being accurate? Wit ite JavaSaipl we can nave the tie be corect or our vistors, Here's he code. p starts ay clocks use the wees Local tne 1 From: cotrsmtien rotates ” ‘ction stteatCees0) § 1 Got the lea tne aig 35 or seca = ste geen): sr nines = Gate ett ser tears» tegen): 17 Cretan eect AO ey Pn 0° gle In eres a ‘ swede: (hues * 38) + (nts /2) » t seete:(niruae * 8) » « eed "sends eels: (secon * 6) y1 ag trgh sath of tera hanes 19208 tein gle for (va $= 65 3 Cats ath; 369 4 er elernts « dcnent.qunyselectral("" + h(a) for (ar = 05K «elmer erth He) lees. style thitfrafor = ‘rtet(s fang +ée)"s rete] cyle-traaforn = “eta ds]-nge dn) 1/ 141s 15 amit rn, gore te seconds psiton (Co caosate mie psiten ater) 16 (nde) Sod om “nlntae') lavetsk] arene seticriut ‘Gate secerd-agie, Nes} + 1s): > “This uncon converts the ime (hours, mutes an second) inta he carespenaing angle for each hand. than loops tough each hand and apples hat angle using he styleraefae property of rtat “This wal woxk on mos! browsers, except Saar or other browsers needing a prefix. To alow for this we aso se the stytesesettanstore propery ‘Tis then sets te clock to the curent system te. Aligning second and minute hands \We need to make sure thatthe minute hand moves when the second hand hits the twelve o'clock poston. \Whhen the clock ret drain on sereen there ls ess than one minute before the minute hand needs to move. ‘To allow fortis, we ean calculate how long und his frst minute ends and manly nudge the hand along ‘Since we're using JavaScript to make ts fst movement, we can continue rotating by Six degrees every minute using seertevat ‘Before we move the minute hand we need to communicate how farnt the curent minute we ae, You mayhave noticed these lines. 16 une hard me ‘nna { lanertsKI pretode sestttbte Cte seco ogle', Nnst3 + 1.2): ) “These extra ines check io see the hand isthe "minutes" hand, ands, sels a data tute with the current angle ofthe seconds hand tn this data atbute set, we can then use tis data to work out when to move the minute hana 1 sot 2 timo for the First moute and soem (les tan ate), ten rota ‘netin strats) ( er cetaners = doument. eyelets "snes cotare’); er scene = contre] etter scosngle"); 36 (secatgte > 0 ( ae clay = (8 Seenategte) / 6) + 81) * E88, sete inti’) ( verted (ota) jeetans ? ? feet mrtinttindscrtatnes) { or (uf = 65 cota lure So) { cocaine. Style seetrnsform = oat): contsirere[ tcl. trneforn = “rotstezse)"2 > secrervalcfctionD le et eter 1 (constant) ne m= edd) { concatrers angle = 2; pets ( eorarest age + 6: > ‘eotanerst syleethtransfore = rotates costes ae + 68)"s cectalera[t]. sole trrsfore = ‘roatz('s container Jenge #45)": , ey ‘Adding bounce ‘She we're now ushg JavaSaipt ta move the minute hand, we should remove the animation propety. Rates than simply emove I, we can replace I with a wanston. This san opportunlty io ada bit more characterto te animation, \wmen the JavaSrpt sets anew angle forthe hand, a CSS transition on the element wilt he browser to ‘animate this new poston, This means thatthe JavaScript ony deals wth he simple angle changes and he browser can take care of animating it.this code o animate the seconds hands containers sity times per minute. m v ‘ction msec) ser cectaners = docmest.eyelectasl{' seco cotatne’); setrerval fuetiond ( eee 6 (comirars}-agle mm nti) ( ceorarerstt og = 6: pete ( cemcanestt angle 65 > ‘ceotalea{.styl.sbtrancfore = ‘rotatat{‘scntteret] age de)"; cectaineai syle trnsfore = “rotated containers Jeng #4) y 2, 380 > \win both te seconds and minute hands handle by JavaScript, update the CSS to replace the isto properties with aaseons esi ‘comeition: teeta 3c bic teriar.42.08.58 48); , een ‘Wanslon resto 8.25 bic Reer42.06,55 Al ? “These transitions appiy othe esmsfere propery and use the cati-becter ting function. This ting function aves te hands some bounce. iOS 7 Style ima bg an ofthe simpy ofthe clock used in Apple's 105 7. They/ve since elongated te hands, but! prefer the shorter version.By slying te hands and adding a background image with he numbers, we can easy create is lok fans Hier. By changing afew styes and Tis designs sean evolution of he Swiss Ratvay Coc ‘adcing a new background image we can adapt our cock o his se ery Ityou came up uth ater designs, dole! me iow Using Moment,js (One of my frstideas when planning tis post was to recreate he hotel cooks scene, wth tree cocks showing diferent tme zones. The easlest way o aus for ferent ime zones is by using the amazing oment|s Timezone bray\ tol PS + »” b C4 » il