Making small user interface experiments is one of the best methods to get used to CSS animations and positioning. In this tutorial we will build a digital clock that is in animated water waves. The effect is simplistic in nature but clean in appearance and is a good practice project if you want to see animations on border radius and rotation creatively.
As I mentioned in previous CSS animation lessons on Codehemu, these types of animations are rarely used in practical HTML and CSS assignments. Still, they are a great way to try out new CSS code and learn new things in an enjoyable environment.
HTML Editor:
HTML Structure:
In HTML, we will start by creating the main div container for the clock (with class name class="container"). Inside this container, we will create four more layers. The layers are named - waterlayer_a, waterlayer_b, and waterlayer_c. These are the water layers of our clock, and the last layer is the time layer (Class name is time, class="time").
<div class="container">
<div class="waterlayer_a"></div>
<div class="waterlayer_b"></div>
<div class="waterlayer_c"></div>
<div class="time">00:00</div>
</div>
CSS:
Setting up the clock background:We have set the body of the document to gray (hex code #4f4f4f). And we know that browsers add some margin and padding to the body of the page by default, so to get rid of it we set the margin and padding to 0. Here we are done with the background of our water clock.
body {
margin: 0;
padding: 0;
background: #4f4f4f;
}The div container is the body of our water clock, which covers the entire screen, so we'll keep its background transparent. And to avoid any problems centering the water layers inside it, we've set the position to fixed and set all four sides to 0.
We didn't specify a height, so we've set the height to 100 (vh) to capture the entire viewport. And we've given the container a z-index value to show it on top of everything so that it's above the water layers.
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
height: 100vh;
background: transparent;
}The time box (class="time") displays the digital time (e.g. 12:20) shown on our water clock, which can be done with the help of javascript. We have given the width and height of this time box 400x200 pixels and used a light blue-white color to show the time clearly. The hex code of this text color is #f0f6f9. Here the position of the clock is a problem and its solution is a simple Transform Mathod. We have used the Transform Mathod to canter the time box of the water clock. This is very easy to do, set the css position property absolute then set the top, left to 50%, and finally give the css transform property the value translate(-50%,-50%). See here for a better understanding of the centering method. Here our time Box is finished and then the water layers.
.time {
width: 400px;
height: 200px;
font-size: 130px;
text-align: center;
font-family: cursive;
color: #f0f6f9;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}We first created 3 water layers in HTML with class names - waterlayer_a, waterlayer_b, waterlayer_b. To shape these water layers or DIV elements, we have given them width and height dimensions of 465px, so that they will be completely boxed. Here, the background color of the water layers is blue, the hex code of the color is #03a9f4. After that, for centering, we will use the transform method like time box again. After that, we need to shape each of the water layers.
.waterlayer_a,
.waterlayer_b,
.waterlayer_b
{
width: 465px;
height: 465px;
position: absolute;
top: 50%;
background: #03a9f4;
left: 50%;
transform: translate(-50%,-50%);
}We are going to start by resizing the water layer (class name is waterlayer_a). We are going to use border-radius to transform this box shape water layer into a real water wave. The dimensions of each corner of the water layer will be 50%, 35%, 40%, 37%.
Now comes the real fun, the animation attribute. So we have named the animation spin, which has not been set yet. The spin animation will rotate our water layer, and we want it to happen repeatedly, so we have set it to infinite. We have also set the animation duration to 10 seconds.
.waterlayer_a {
border-radius: 50% 35% 40% 37%;
animation: spin 10s linear infinite;
}We have used a different border-radius for this layer, here the corners of this water layer box are set to 40%, 35%, 50%, 30% which is completely different from the first water layer. And not only the border-radius is different here, the animation duration is set to 5 seconds. Which is 5 less than the first water layer.
.waterlayer_b {
border-radius: 40% 35% 50% 30%;
animation: spin 5s linear infinite;
}The third water layer will have a different border radius than the first two layers. Because we set the border radius to 50% to make this water layer a perfect circle. And there is no point in giving it a spin animation, so the styling of all water layers is finished here.
.waterlayer_c {
border-radius: 50%;
}With the help of keyframes, the actual animation of our water clock will start. So, first we want the water layers to spin, so we need a CSS property that will rotate the html water layers elements. To do this, let's start at 0%, where the css transform property value will be rotate(0deg), meaning the water layers will remain in their original position. Then when the keyframe reaches 100%, the value will change to rotate(360deg), meaning the water layers will rotate a full 360 degrees.
For your convenience, you can try using the CSS Spinner Generator Tool, this tool allows you to customize the entire water layer element.
@keyframes spin {
0% {
transform: translate(-50%,-50%)rotate(0deg);
}
100% {
transform: translate(-50%,-50%)rotate(360deg);
}
}
JavaScript:
Adding The Real Time:
function clock() {
const date = new Date();
var h = date.getHours();
var m = date.getMinutes();
if (h < 10)
h = '0' + h;
if (m < 10)
m = '0' + m;
document.querySelector(".time").innerText = h + ":" + m;
}
setInterval(clock, 1000);
Now the most important thing is to show real time on our water clock, now if you learn to understand and use this JavaScript then in the future you will not have any difficulty in creating html clock, so let's start.
First we have created a function named clock, and inside the function we have set some constant variables (const), such as - date, h, m.
We are getting the real time of our PC or device (which is set on your computer) with the help of javascript new Date() object. Which we have set as date variable. And from this date variable we are getting hours and minutes.
To get hours from date variable we used date.getHours() and for minutes we used date.getMinutes(). So h became Hours of our water clock and m is Minutes.
To show time on clock we have both Hours, Minutes, but think about how digital clock shows time. In digital clock we see time 01:12 like this, here 01 is Hours. But h variable gives us 1 value, where we want 01. So we used Javascript if method, where if h(Hours) is between 1 to 9 then we will add 0 before it and same thing will happen for m (Minutes) variable.
Now we have used javascript innerText(h + ":" + m) to insert Hours,Minutes into html time element. That's not all, now we have to call clock function. Our water clock will not always show time by calling it only once, for that we have to call clock function repeatedly. So we will use javascript setInterval to set clock function to 1 second, so setInterval will call clock function after every 1 second.
Post a Comment