| title |
before |
folders |
after |
Project files |
After forking and cloning the repository & downloading and exporting the files you should have the following folder structure:
|
| label |
type |
animated-clock |
folder |
|
| label |
type |
indent |
notes |
images |
folder |
1 |
Export these from Illustrator |
|
| label |
indent |
clock-center.svg |
2 |
|
| label |
indent |
clock-face.svg |
2 |
|
| label |
indent |
hand-hour.svg |
2 |
|
| label |
indent |
hand-minute.svg |
2 |
|
| label |
type |
indent |
css |
folder |
1 |
|
|
| label |
indent |
modules.css |
2 |
|
| label |
indent |
index.html |
1 |
|
|
*There’s also some HTML & CSS already coded so we can concentrate completely on styling the clock and making it animate.*
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Write some HTML |
We’ll start by writing out some HTML for the clock face. The centre piece and the two hands will be `<img>` tags, but the clock face will be a `background-image`
|
html |
index.html |
⋮
<body>
<div class="clock-face">
<img class="hand hand-hour" src="images/hand-hour.svg" alt="">
<img class="hand hand-minute" src="images/hand-minute.svg" alt="">
<img class="clock-center" src="images/clock-center.svg" alt="">
</div>
</body>
⋮
|
| num |
text |
5-6 |
Notice that there are two classes here: `.hand` and a more specific one. We’re going to save some typing by putting the common CSS on the `.hand` class.
|
|
|
There isn’t really anything spectacular in that code—just plain ol’ HTML.
*In the browser we should see this—which isn’t much to look at:*
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Style the clock face |
Next up we need to style the clock face using `background-image` and a few other small things. It makes the most sense to use a `background-image` for the clock face for two reasons:
1. It doesn’t animate, so we don’t really need to access it.
2. The clock pieces, like the hands, are in front of it. Because the clock face is a background image it’s much less work to get the bits in front.
|
css |
css/main.css |
html {
background-color: #000;
}
.clock-face {
height: 300px;
margin: 50px auto;
position: relative;
width: 300px;
background: transparent url("../images/clock-face.svg") no-repeat center center;
}
|
|
| num |
text |
7 |
The `50px` margin is just to push the clock downwards from the top a little bit—we’d probably use `.pad-top` or something in a real website.
|
|
| num |
text |
11 |
To save some typing we have all the `background` properties on one line: `color`, `image`, `repeat`, `position`
|
|
|
So we should see this now:
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Style the hands |
Using `position` and some coordinates we can get the hands and the centre piece of the clock in place.
|
css |
css/main.css |
⋮
.clock-center {
bottom: calc(50% - 14px);
left: calc(50% - 14px);
position: absolute;
width: 28px;
}
.hand {
bottom: calc(50% - 8px);
left: calc(50% - 7px);
position: absolute;
width: 14px;
transform-origin: 50% calc(100% - 8px);
}
|
| num |
text |
3-4 |
We know that the centre piece is `28px` wide. So to get it exactly in the centre of the clock face we can set the `left` & `bottom` coordinates to `50% - 14px` (`14px` being half of `28px`).
|
|
| num |
text |
9 |
All these CSS properties are shared with both clock hands, that’s why we’re targeting the `.hand` class.
|
|
| num |
text |
10-11 |
This is definitely a little silly because the black centre peice covers it but I wanted to create the impression that the clock hands weren’t pivoting on their edge, but that they had like a physical “pin” set in the bottom center of the rounded part—so I positioned them in a “realistic” fashion.
|
|
| num |
text |
15 |
The default `transform-origin` for an element is the direct centre—that doesn’t make sense for a clock hand. So this will change the anchor point to be placed in my invisible “pin” rotation point for the clock hands.
|
|
|
Refresh it in your browser and you’ll see the hands and the centre piece are nicely aligned.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Animate the minute hand |
We’re going to start by animating the minute hand, because that’s the one we can see right now. We’ll need a `@keyframes` block and an `animation` property targeted at just that single hand.
|
css |
css/main.css |
⋮
.hand-minute {
animation: hand-rotate .5s linear infinite;
}
@keyframes hand-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
|
| num |
text |
3 |
The `animation` property is connecting the `@keyframes` block with this element. We are specifying the following things:
- `hand-rotate` is the name we chose for the `@keyframes` block.
- `.5s` is the time it takes for the hand to fully rotate around the clock.
- `linear` means there is no easing.
- `infinite` means that the animation never stops—it keeps looping.
|
|
| num |
text |
6 |
Immediately after the `@keyframes` keyword we need to come up with a name for this block, here we are naming these keyframes `hand-rotate`
|
|
| num |
text |
8-10 |
At the start of the animation (`0%`) the rotation of the hand is `0deg`
|
|
| num |
text |
12-14 |
At the end of the animation the rotation is `360deg` meaning the hand will complete a full rotation around a circle.
|
|
|
Try it out! You should see the minute hand moving around the clock.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Animate the hour hand |
Finally we’re going to make the hour hand rotate. This one is really easy because it’s animation is exactly the same as the minute hand—it just takes a longer time to rotate.
|
css |
css/main.css |
⋮
.hand-hour {
animation: hand-rotate 6s linear infinite;
}
|
| num |
text |
3 |
The only difference is that the time is now `6s`. From a clock perspective this allows the minute hand to rotate 12 times, 1 rotation for each hour, while the hour hand only rotates a single time.
|
|
|
That’s it—give it a whirl!
|
|