You will become more familiar with CSS animations by doing small projects. So today I come to you with another small project.
In this tutorial we will build a digital clock that is in animated water waves. Such animations are uncommon in practical projects. I created today's tutorial to experiment with the CSS animation property. So let's have some fun using CSS.
Table of Content
How To Build an Wave Clock Folder Structure
First, you create your HTML structure. I’m asking you to create an HTML structure because it will make things easier to understand later. I have written a post in case you are having any difficulty creating a project structure. So if you are having any difficulty creating files or folders, you can see this post—How to structure an HTML project.
To create the clock, you will create two files—one is index.html, and the other is style.css. These two files are the HTML document and the stylesheet. In the index.html file, you will paste the HTML codes I have given you. You will paste the CSS codes that I will give you to style the clock into the style.css file.
Along with these two files, you need to create another script.js file. In this file, you will learn how to use the JavaScript code I provide, and then just copy and paste it inside.
Step 1: Create the HTML Pages
We will start writing the HTML by creating a DIV element with a container class name. Inside this container, we will create four more DIV elements. The first three DIV elements will be the water waves of our clock, and we will use the remaining one element to display the time.
Next, we need to give the four elements we created class names. So we set the class names of the elements we will use to create the water layer to 123. That means we will name the first wave element ‘wave-1’, the second ‘wave-2’, and the third ‘wave-3’. The element created to display the clock time has the class name Time. Now, there is no need to do anything else in HTML. So let us move on to the CSS code.
<div class="container">
<div class="wave-1"></div>
<div class="wave-2"></div>
<div class="wave-3"></div>
<div class="time">00:00</div>
</div>
Live Demo:
Below is a live demo to help you see how the wave Clock look. Click "Run Code" to see the clock live.
Step 2: Create the Stylesheet(CSS)
Setting the body:
First, we will set up some basic CSS for the document body. In all projects, whether large or small, we apply settings like removing default margins and padding. Here too, we have set the body margin and padding to zero to remove the default spacing. Then we chose a dark color for the background behind the clock.
body {
margin: 0;
padding: 0;
background: #4f4f4f;
}Setting the container:
Now it's time to style our main container. Later on, we may have difficulty centering the elements inside the container. So, we will add some CSS properties to the container beforehand so that there is no difficulty during centering. First, we fixed the position of the container. Then we set the values of all four sides of the container to zero.
Then the CSS z-index property is used, which will place the container on top of everything else. There is no need to show the container here, so we will set its background to transparent.
We are missing one important thing here, which is height. So let's set a minimum height of 100vh for this container.
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: transparent;
height: 100vh;
}Styling the waves:
Now we will style all three water waves together. It means that all the CSS properties set here will affect each water wave element. So let us start by setting the size of the water waves. Here we have kept the height and width of each water wave the same. This will make them take the shape of a box. Then we used the CSS transform method to center each water wave element. Since each wave here has the same center and size, you will see only one box.
Oh lol, you won't see any boxes because the background of the water waves isn't set here. So next we'll set the background of the water waves using a hex code of blue.
.wave-1,
.wave-2,
.wave-3
{
width: 300px;
height: 300px;
/*Transform method*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/*--------------*/
background: #03a9f4;
}We have given each water wave the same style, meaning they all share the same shape. So here we need to create a difference between the waves in the water. let us give the first wave element a slightly different shape. To do this, we didn't change the height and width—we just changed the four corners of this elements.
We will use the Border Radius property to give the four corners of the first two water waves different values. Instead of changing the shape of the last water wave, we made it completely round. Then we set the first two waves to the same animation with two different durations.
We set the animation to infinity to make the waves seem to move endlessly, just like time.
.wave-1 {
border-radius: 50% 35% 40% 37%;
animation: spin 10s linear infinite;
}
.wave-2{
border-radius: 40% 35% 50% 30%;
animation: spin 5s linear infinite;
}
.wave-3{
border-radius: 50%;
}
Styling the text:
We have used a light blue-white color to clearly display the time and used the same transform method to center it. The CSS font-family property is set to cursive to enhance the beauty of the text.
.time {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 80px;
font-family: cursive;
color: #f0f6f9;
}Setting Up the Keyframes:
With the help of keyframes, the actual animation of our water clock will start. First we want the water layers to spin, so we need a CSS property that will rotate the wave 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. Once the keyframe hits 100%, we set the value to rotate(360deg), so the water layers make a full rotation.
@keyframes spin {
0% {
transform: translate(-50%,-50%)rotate(0deg);
}
100% {
transform: translate(-50%,-50%)rotate(360deg);
}
}
Step 2: Create the Javascript file:
Now the most important thing is to show real time. In Javascript we will start by defining a function called clock(). Inside the function, we create a constant variable date and assign it the value of new Date(). The JavaScript Date object helps us access the current time on the user’s system. It includes hours, minutes, and seconds.
Next, we create two variables, h and m, to store the hours and minutes from the date object. This is done using the methods getHours() and getMinutes().
The next part checks whether the hour or minute is less than 10. If so, it adds a leading zero to make the time consistent. This is important for digital clocks because we usually display the time as 07:05 instead of 7:5. After formatting, the time is updated on the webpage.
Finally, the code calls setInterval(clock, 1000);. This tells the browser to run the clock() function every 1 second. This causes the clock to update in 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);
Conclusion
In this tutorial, we learned how to create a live clock using JavaScript and make it look unique with CSS water wave animation. This project is a fun way to practice CSS styling and animation techniques. If you have any questions or feedback, don't hesitate to share them in the comments. For more updates and tutorials, follow our YouTube channel. Namaste🙏
0 Comments