Clock Animation Using Html Css Javascript

byAli Akbar - 0


Creating a clock animation using HTML, CSS, and JavaScript is a fun and interesting way to showcase your skills as a web developer. In this article, we will walk through the process of creating a simple clock animation that can be easily integrated into any website.

First, we will start by creating the HTML structure for our clock. We will use a div element to hold our clock and three span elements to represent the hours, minutes, and seconds. Within each span element, we will use another div element to represent the clock hand.

HTML

<!DOCTYPE Html>  
 <Html Lang="En">  
 <Head>  
   <Meta Charset="UTF-8">  
   <Meta Http-Equiv="X-UA-Compatible" Content="IE=Edge">  
   <Meta Name="Viewport" Content="Width=Device-Width, Initial-Scale=1.0">  
   <Title>Document</Title>  
 </Head>  
 <Body>  
 <Div Class="Clock">  
   <Div Class="Clock__second"></Div>  
   <Div Class="Clock__minute"></Div>  
    <Div Class="Clock__hour"></Div>  
   <Div Class="Clock__axis"></Div>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
    <Section Class="Clock__indicator"></Section>  
  </Div>  
   </Body>  
 </Html>



Next, we will add some basic CSS styles to our clock elements. We will use CSS transforms and transitions to create the animation effect.

                                                CSS

// Options  
 $Black: #1b1e23;  
 $Size: 200px;  
 $White: #F4eed7;  
 $Feature : #4b9aaa;  
 Html,  
 Body {  
  Height: 100%;  
 }  
 Body {  
  Background: $Black;  
  Display: Flex;  
  Flex-Direction: Column;  
  Justify-Content: Center;  
  Align-Items: Center;  
  Font-Family: Sans-Serif;  
  Color: White;  
 }  
 P {  
  Color: $White;  
  Font-Size: 0.8em;  
  Opacity: 0.75;  
 }  
 .Clock {  
  Height: $Size;  
  Width: $Size;  
  Border-Radius: #{$Size / 2};  
  Display: Flex;  
  Justify-Content: Center;  
  Position: Relative;  
  &__second,  
  &__minute,  
  &__hour, &__indicator {  
   Position: Absolute;  
   Left: Calc(50% - 1px);  
   Width: 2px;  
   Background: $White;  
   Transform-Origin: Bottom Center;  
   Z-Index: 2;  
   Border-Radius: 1px;  
  }  
  &__second {  
   Height: #{($Size / 2) - 10};  
   Margin-Top: 10px;  
   Background: $Feature;  
   Animation: Time 60s Infinite Steps(60);  
   Z-Index: 3;  
  }  
  &__minute {  
   Height: #{($Size / 2) - 20};  
   Margin-Top: 20px;  
   Opacity: 0.75;  
   Animation: Time 3600s Linear Infinite;  
  }  
  &__hour {  
   Height: #{($Size / 2) - 40};  
   Margin-Top: 40px;  
   Animation: Time 43200s Linear Infinite;  
  }  
  &__indicator {  
   Height: #{($Size / 2) - 2};  
   Border-Top: 2px Solid $Feature;  
   Background: None;  
  }  
  &__indicator:nth-Of-Type(5n) {  
   Opacity: 1;  
   Height: #{($Size / 2) - 7};  
   Border-Top: 7px Solid $White;  
  }  
  &__axis {  
   Background: $Feature;  
   Width: 5px;  
   Height: 5px;  
   Border-Radius: 3px;  
   Position: Absolute;  
   Z-Index: 4;  
   Top: #{$Size / 2 - 3};  
  }  
 }  
 @For $I From 1 Through 60 {  
  Section:nth-Of-Type(#{$I}) {  
   Transform: RotateZ(Calc(6deg * #{$I}));  
  }  
 }  
 @Keyframes Time {  
  To {  
   Transform: RotateZ(360deg);  
  }  
 }       
Finally, we will use JavaScript to update the rotation of the clock hands based on the current time. We will use the setInterval function to update the clock every second.

JAVA-SCRIPT
 Var CurrentSec = GetSecondsToday();  
 Var Seconds = (CurrentSec / 60) % 1;  
 Var Minutes = (CurrentSec / 3600) % 1;  
 Var Hours = (CurrentSec / 43200) % 1;  
 SetTime(60 * Seconds, "Second");  
 SetTime(3600 * Minutes, "Minute");  
 SetTime(43200 * Hours, "Hour");  
 Function SetTime(Left, Hand) {  
  $(".Clock__" + Hand).Css("Animation-Delay", "" + Left * -1 + "S");  
 }  
 Function GetSecondsToday() {  
  Let Now = New Date();  
  Let Today = New Date(Now.GetFullYear(), Now.GetMonth(), Now.GetDate());  
  Let Diff = Now - Today;   
  Return Math.Round(Diff )

Post a Comment

Post a Comment (0)

Previous Post Next Post