Date: 04/28/2020
I loved this clock! 😍
I learned two new things here:
According to w3School, this property:
The transform-origin property allows you to change the position of transformed elements.
In this JS and Clock CSS, Wes used:
transform-origin: 100%;
This puts the bottom .hand
extremity on the right side, which gives us the impression that the clock hand is centered.
According to w3School again, this function:
The cubic-bezier() function defines a Cubic Bezier curve.
I'm not not a mathmatician then I'm not sure to write about it, but basically we pass coordenates as arguments:
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
- x1 = 0.1
- y1 = 2.7
- x2 = 0.58
- y2 = 1
The x1
and x2
determine where the curve start and where it finishes. And must be have the [0, 1] range.
On my poor math understanding, the y1 and y2 are control this curve. According the MDN, if we set y1 and y2 with more than [0, 1] range value may generate bouncing effects:
Cubic Bézier curves with the P1(y1) or P2(y2) ordinate outside the [0, 1] range may generate bouncing effects. We have some rules to right here:
This makes the analogical tic-tac clock effects.
I learned about how to manipulate dates!
Using the object Date()
, the JavaScript give to us many functions to manupulate the time and dates:
const now = new Date();
Here, we use the getSeconds()
, getMinutes()
and getHours()
:
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hour = now.getHours();
But I want to explore other function like getUTCHours()
to create an international clock, for example.
And I learned a new way to set values to CSS using template strings:
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
That's all folks! 😃
Thanks WesBos to share this with us! 😊💖
written by @vanribeiro.