Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a unique clocks animation. To create this animation we will use HTML,CSS an JavaScript. We do not make use of any images, icons or external libraries and plugins to create this animation. We first create the clocks from scratch and then add keyframes to it to build the animation.

If you want to see this clock animation template better, you can visit our open source project, where we have added many more themes for this clock animation. add-ons name Klak - new tab.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.

Also, I do post multiple choice questions and quizzes that will help you with your interviews.

Project Folder Structure:

Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Water Clocks Animation’. Inside this folder, we have two files. These files are – index.html, style.css and index.js. The first file is the HTML document while the second one is the stylesheet.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Water Clock</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
      <div class="waterlayer_q"></div>
      <div class="waterlayer_w"></div>
      <div class="waterlayer_e"></div>
      <div class="waterlayer_r"></div>
      <div class="waterlayer_a"></div>
      <div class="waterlayer_b"></div>
      <div class="waterlayer_c"></div>
      <div class="time"></div>
    <div>
    <script src="index.js"></script>
</div></div></body>
</html>

CSS:

Next, we style the elements created by HTML to give them shape and add animation using CSS. Now copy the code provided to you below and paste it into your stylesheet.

body {
  background: #191919;
}

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 100vh;
  background: transparent;
}

.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%);
}

.waterlayer_a {
  width: 465px;
  height: 465px;
  position: absolute;
  top: 50%;
  background: #03a9f4;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50% 35% 40% 37%;
  animation: spin 10s linear infinite;
}

.waterlayer_b {
  width: 465px;
  height: 465px;
  position: absolute;
  background: #03a9f4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 40% 35% 50% 30%;
  animation: spin 5s linear infinite;
}

.waterlayer_c {
  width: 465px;
  height: 465px;
  position: absolute;
  border-radius: 50%;
  background: #00bcd4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%)rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%)rotate(360deg);
  }
}

JavaScript:

setInterval(clock, 1000);
function clock() {
  const date = new Date();
  const hours = ((date.getHours() + 11) % 12 + 1);
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const hour = hours * 30;
  const minute = minutes * 6;
  const second = seconds * 6;
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  if (h < 10) h = '0' + h;
  if (m < 10) m = '0' + m;
  if (s < 10) s = '0' + s;
  document.querySelector(".time").innerText = h + ":" + m;
}
Tags

Post a Comment

إرسال تعليق

أحدث أقدم