Tuesday, October 1, 2024

Creating a Butterfly Animation Using HTML & CSS

/ with No comments /

In this tutorial, I will guide you through how to create an amazing butterfly animation using HTML and CSS. We'll break down the code step-by-step and explain how both the HTML and CSS work together to produce the animation effect. Let’s dive into the magic of web development.

Butterfly_image_preview


HTML Structure

HTML forms the backbone of any webpage, and here, it structures the butterfly elements on the page. Below is the complete HTML file used for the butterfly animation:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Butterfly Animation</title>
<style>
    /* CSS goes here */
</style>
</head>
<body>
    <div class="box">
        <div class="wings-leftbox fly">
            <div class="wing-left-top bgclr"></div>
            <div class="wing-left-bottom bgclr"></div>
        </div>
        <div class="mid-body">
            <div class="mid-part start midshed"></div>
            <div class="mid-part midpoint midshed"></div>
            <div class="mid-part end midshed"></div>
        </div>
        <div class="wings-rightbox fly">
            <div class="wing-right-top bgclr"></div>
            <div class="wing-right-bottom bgclr"></div>
        </div>
    </div>
</body>
</html>

Explanation of HTML

  1. DOCTYPE and Meta Tags:
  • <!DOCTYPE html> defines the document as an HTML5 document.
  • <meta charset="UTF-8"> ensures proper character encoding, especially important for displaying special characters.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures the webpage is responsive, adjusting its layout based on the device width.
  1. Title:
  • The <title>Butterfly Animation</title> tag defines the title of the webpage. When opened in a browser, this title is shown in the browser tab.
  1. Main Container (.box):
  • The butterfly is contained within a div element with the class box. This div acts as a central container for the butterfly animation.
  1. Wings (.wings-leftbox, .wings-rightbox):
  • The butterfly's wings are split into two sections: left and right. Each wing section is further divided into a top (wing-left-top, wing-right-top) and bottom (wing-left-bottom, wing-right-bottom) wing.
  • These elements are where the visual effects (colors and shapes) are applied through CSS.
  1. Butterfly Body (.mid-body):
  • The butterfly’s body is represented by a div with the class mid-body. This body is split into three parts (head, midsection, and tail) for aesthetic purposes and to make it more lifelike.
  • Each section is styled using the class mid-part.

CSS Styling for Butterfly Animation

Next, we apply styles using CSS to bring the butterfly to life.


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --wings-tpheight: 40%;
    --wings-btmheight: 34%;
    --top-wing-width: 100%;
    --btm-wing-width: 86%;
    --midclr: white;
    --shadow: 2px 3px 1.5rem;
}

body {
    background: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    height: 300px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.box::after {
    content: "@Developer Manoj";
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    bottom: 10%;
    font-size: 3vh;
    text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
}

/* Wing styling */
.wings-rightbox, .wings-leftbox {
    height: 100%;
    width: 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform-origin: left, right;
}

.wing-left-top, .wing-right-top {
    background: blue;
    height: var(--wings-tpheight);
    width: var(--top-wing-width);
    border-radius: 90% 10% 10% 0%/ 100% 0% 10% 0%;
}

.wing-left-bottom, .wing-right-bottom {
    background: red;
    height: var(--wings-btmheight);
    width: var(--btm-wing-width);
    border-radius: 0% 30% 50% 90%/ 0% 50% 50% 90%;
}

/* Body Styling */
.mid-body {
    width: 10%;
    height: 50%;
    display: flex;
    flex-direction: column;
}

.mid-part {
    background: var(--midclr);
}

.start {
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

.midpoint {
    height: 45%;
    width: 100%;
    border-radius: 40%;
}

.end {
    width: 100%;
    height: 60%;
    border-radius: 50%;
}

/* Animation and Utility Classes */
.bgclr, .midshed {
    background: black;
    animation: butterfly 4s infinite linear;
}

@keyframes butterfly {
    0% {
        box-shadow: inset var(--shadow) aqua, var(--shadow) deepskyblue;
    }
    20% {
        box-shadow: inset var(--shadow) lime, var(--shadow) limegreen;
    }
    40% {
        box-shadow: inset var(--shadow) yellow, var(--shadow) greenyellow;
    }
    80% {
        box-shadow: inset var(--shadow) hotpink, var(--shadow) deeppink;
    }
    100% {
        box-shadow: inset var(--shadow) red, var(--shadow) orangered;
    }
}

.fly {
    animation: fly 0.2s infinite linear;
}

@keyframes fly {
    0%, 100% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(80deg);
    }
}

Explanation of CSS

  1. Global Reset:
  • All elements are reset to remove padding and margins, and box-sizing ensures padding and borders are included in an element's total width and height.
  1. CSS Variables:
  • The :root selector is used to define reusable variables such as --wings-tpheight, --wings-btmheight, and --shadow. These variables allow for flexibility and easier adjustments to styling.
  1. Body and Box Styling:
  • The body is styled to center the butterfly both vertically and horizontally using Flexbox.
  • The .box class is given a square aspect ratio (aspect-ratio: 1/1) to ensure the butterfly scales correctly.
  1. Wing Styling:
  • Each wing is divided into top and bottom parts, with colors applied using background properties (background: blue and background: red). The border-radius is adjusted to create the unique wing shapes.
  • The wings are animated using the fly animation, simulating a flapping effect with a keyframe that rotates the wings on the Y-axis.
  1. Butterfly Body:
  • The butterfly body is split into three parts: head, midsection, and tail. Each part is styled with rounded borders using border-radius, with aspect-ratio applied to the head for a circular appearance.
  1. Animations:
  • Wings Flapping: The class .fly applies the fly animation to simulate the wings flapping by rotating the Y-axis between 0 and 80 degrees.
  • Glow Effect: The keyframe animation butterfly creates a glowing effect on the wings and body. The glow color changes through a cycle from aqua to red.

Conclusion

This code combines both HTML and CSS to create a visually stunning butterfly animation with flapping wings and glowing effects. The key concepts we explored are CSS animations, Flexbox for layout control, and CSS variables for reusable values. This simple yet elegant butterfly animation demonstrates how creativity and coding can come together to bring animations to life on the web.

With a bit of modification, you can customize this butterfly by adjusting the colors, shapes, or animation timing to suit your own project!

Sunday, September 29, 2024

Building a Microsoft-Themed Loading Animation with HTML, CSS, and JavaScript

/ with No comments /

 Animations can make a website stand out by providing interactive and visually appealing elements. In this blog, we’ll walk you through how to create a unique Microsoft-themed loading animation using HTML, CSS, and JavaScript. This loading animation uses Microsoft’s classic four-color logo design, where each section of the logo lights up in a looped sequence.

Microsoft_logo_preview


This project focuses on clean and responsive design, making it adaptable for any modern web page.

Overview of the Animation

This animation is inspired by the iconic Microsoft logo, which is divided into four boxes, each representing a different color. The colors of the boxes change dynamically using JavaScript’s Promise function and setTimeout to achieve a seamless loading effect. In addition, the developer’s name is displayed at the bottom of the screen with an animated shadow.

HTML Structure

We’ll start by breaking down the HTML structure, which is simple and easy to follow. We create a container for the four boxes that make up the Microsoft logo and an <h2> tag for the "MICROSOFT" label.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Microsoft Loading Animation</title>
</head>

<body>

<!-- Microsoft logo container -->
<div class="box">
    <div class="child-box" id="box1"></div>
    <div class="child-box" id="box2"></div>
    <div class="child-box" id="box3"></div>
    <div class="child-box" id="box4"></div>
</div>

<!-- Microsoft text below the logo -->
<h2>MICROSOFT</h2>

<!-- JavaScript for animating the boxes -->
<script src="script.js"></script>
</body>
</html>

HTML Explanation:

  1. box div: This is the main container that holds four smaller boxes (child-box), each representing a section of the Microsoft logo.
  2. h2: This element displays the text "MICROSOFT" below the logo.
  3. JavaScript link: The <script> tag points to the external JavaScript file responsible for controlling the animation.

CSS for Styling

The CSS code is used to style the four boxes to resemble Microsoft’s logo. We also add styles for the body, headings, and a custom animation for the color changes.


* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    color: white;
}

body {
    min-height: 100vh;
    background: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h3 {
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
    position: absolute;
    bottom: 10%;
    z-index: 5;
    font-size: 3vh;
}

h2 {
    margin-top: 10%;
    text-shadow: 2px 2px 2rem white;
}

.box {
    height: 20vh;
    width: 20vh;
    display: flex;
    flex-wrap: wrap;
}

/* Individual boxes representing the Microsoft logo */
.child-box {
    height: 50%;
    width: 50%;
    background: white;
    border: 1px solid #111;
}

.child-box:nth-child(1) {
    background: orangered;
}

.child-box:nth-child(2) {
    background: lightseagreen;
}

.child-box:nth-child(3) {
    background: royalblue;
}

.child-box:nth-child(4) {
    background: yellow;
}

@keyframes clrload {
    to {
        background: #444;
    }
}

CSS Explanation:

  1. Global Styles: Basic resets are applied to remove margin and padding from all elements. The text color is set to white.
  2. Body: The body of the page is styled using flexbox to center the content both vertically and horizontally.
  3. child-box Styles: These boxes represent the four quadrants of the Microsoft logo, each with a unique background color. The boxes are evenly distributed using flex-wrap.
  4. Animation Keyframes: The clrload animation creates a smooth color transition for the boxes, giving the loading effect.

JavaScript for Dynamic Animation

The animation logic is controlled using JavaScript. Here’s how it works:

'use strict'
console.log('Welcome to the script created by @Developer Manoj');

let box1 = document.querySelector("#box1");
let box2 = document.querySelector("#box2");
let box3 = document.querySelector("#box4");
let box4 = document.querySelector("#box3");

let box = [box1, box2, box3, box4];
let boxNum = 0;
let changeclr = 'clrload 2s infinite';

let devtext = document.createElement("h3");
let webdev = document.createTextNode("@Developer Manoj");
devtext.appendChild(webdev);
document.body.appendChild(devtext);

function changenow() {
    const changemove = new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve("OK");
            box[boxNum].style.animation = changeclr;
            box[3].style.animation = "none";
            boxNum++;
        }, 1000);
    });

    changemove.then((data) => {
        return new Promise((resolve, reject) => {
            setTimeout(function() {
                resolve("ok");
                box[boxNum - 1].style.animation = "none";
                nowtime(boxNum);
                boxNum++;
            }, 1000);
        }).then(() => {
            return new Promise((resolve, reject) => {
                setTimeout(function() {
                    resolve("OK");
                    box[boxNum - 1].style.animation = "none";
                    nowtime(boxNum);
                    boxNum++;
                }, 1000);
            }).then(() => {
                return new Promise((resolve, reject) => {
                    setTimeout(function() {
                        resolve("OK");
                        box[boxNum - 1].style.animation = "none";
                        box[3].style.animation = changeclr;
                        boxNum = 0;
                        setTimeout(changenow(), 1000);
                    }, 1000);
                });
            });
        });
    });
}

function nowtime(number) {
    box[number].style.animation = changeclr;
}

changenow();

JavaScript Explanation:

  1. Box Selection: The four boxes are selected using their IDs (#box1, #box2, etc.), and stored in an array (box) for easy access during the animation.
  2. Promise-based Animation: A Promise is used to handle the asynchronous color changes. The boxes change color one by one, creating a looping effect where the color of each box transitions using the clrload animation.

This Microsoft-themed loading animation is a creative way to add some visual flair to your website’s loading process. With a combination of HTML for structure, CSS for styling, and JavaScript for dynamic animation, you can easily incorporate this effect into your projects.

The code is fully customizable, so feel free to tweak the colors, timings, or animation styles to fit your design needs!

Saturday, September 28, 2024

Creating a Dynamic Loading Animation Inspired by the MI Logo

/ with No comments /

 Loading animations are a vital part of modern web design. They provide visual feedback to users during loading times, enhancing the overall user experience. In this blog post, we'll walk you through creating a unique loading animation inspired by the iconic MI logo using HTML and CSS. This animation incorporates a sleek logo animation combined with a series of blinking dots, offering a polished and modern look.


Mi_logo_preview


Overview of the Animation

The loading animation consists of two main parts:

  1. The MI-inspired logo: This element is creatively designed with borders and shapes to mimic the MI logo. It has a subtle sliding effect to create an elegant transition.
  2. Blinking dots: These dots continuously pulse in and out, giving a sense of motion and loading activity. The pulsating dots are designed using CSS animations to scale and change color, creating a smooth, dynamic effect.

HTML Structure

Let’s start with the basic structure in HTML. We’ll use semantic tags and simple divs to organize our content.


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MI Loading Animation</title>
    <link rel="stylesheet" href="style.css"> <!-- Link to the CSS file -->
</head>

<body>
    <div class="logobox">
        <div class="m-element"></div>
    </div>

     <div class="box">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>

    <h3 class="devtext">@Developer Manoj</h3>

</body>
</html>

HTML Explanation

  1. MI-inspired logo: The logobox div houses the custom-designed logo, built using CSS shapes.
  2. Blinking dots: The box div contains three dot divs that are animated to blink continuously.

CSS for Styling and Animation

Here’s where the magic happens! The following CSS styles bring the logo and the blinking dots to life.


* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    color: white;
}

body {
    display: flex;
    background: black;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.devtext {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
    position: absolute;
    bottom: 5%;
}

.box {
    height: 20px;
    width: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 10%;
}

.dot {
    height: 33%;
    aspect-ratio: 1/1;
    background: silver;
    border-radius: 50%;
    animation: blinkshow 1s infinite linear;
}

.dot:nth-child(1) {
    animation-delay: 0.1s;
}
.dot:nth-child(2) {
    animation-delay: 0.2s;
}
.dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes blinkshow {
    100% {
        background: white;
        transform: scale(1.3);
        box-shadow: 2px 2px 20px #fff;
    }
}

.logobox {
    background: white;
    height: 60px;
    aspect-ratio: 1/1;
    border-radius: 36%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.logobox:after {
    content: "";
    width: 4px;
    background: transparent;
    height: 200%;
    box-shadow: 2px 2px 12px silver;
    transform: rotateZ(20deg);
    animation: logoslide 4s infinite linear;
    position: absolute;
    left: 0px;
    transition: 2s all ease-in-out;
}

@keyframes logoslide {
    to {
        left: 100%;
    }
}

.m-element {
    height: 30%;
    width: 40%;
    border: 5px solid black;
    border-bottom: none;
    display: flex;
    border-top-right-radius: 30%;
    justify-content: center; 
    align-items: center;
    position: relative;
    transform: translateX(-30%);
}

.m-element:before {
    content: "";
    position: absolute;
    height: 80%;
    border-left: 5px solid black;
}

.m-element:after {
    content: "";
    position: absolute;
    height: 140%;
    border-left: 5px solid black;
    right: -100%;
    top: 38%;
    transform: translate(50%, -50%);
}

CSS Explanation

  1. Global Styles:
  • We apply a reset for padding and margin across all elements and set the default text color to white.
  • The body is styled using flexbox to center the elements both vertically and horizontally.
  1. Logo (logobox):
  • The logobox creates the circular background for the MI logo.
  • A pseudo-element (::after) adds a sliding effect over the logo, which moves across the logo from left to right using the logoslide animation.
  1. The "M" Element:
  • The "M" shape is created using the m-element class and two ::before and ::after pseudo-elements for the vertical bars. These elements position the borders of the "M" shape and are aligned perfectly using CSS transforms.
  1. Blinking Dots (dot):
  • Each dot represents a circle, created with an aspect ratio of 1:1 and a silver background.
  • The blinkshow animation enlarges the dot, changes its color to white, and applies a shadow for a glowing effect. Each dot is given a different animation delay to create a sequence.

Bringing It All Together

This code creates a sophisticated loading animation that mimics the MI logo with a sliding effect, and the blinking dots add an extra layer of visual appeal. You can use this type of animation on any website to keep users engaged during loading times, particularly if you're designing for a tech or gadget-related project

Loading animations not only improve user experience but also add a layer of professionalism to your website. This MI-inspired loading animation is a perfect blend of creativity and functionality. It's built entirely with HTML and CSS, making it efficient and easy to integrate into any project.

Feel free to experiment with the colors, animation speeds, and dot patterns to make the animation your own!

Thursday, September 26, 2024

Creating a Music Beats Animation with HTML and CSS

/ with No comments /

 Music has a rhythm that makes us move, and wouldn’t it be cool if we could visualize that rhythm on a website? In this tutorial, I'll show you how to create a simple music beats animation using just HTML and CSS. The animation mimics the rise and fall of audio waves, giving the illusion of beats pulsing in time. This is perfect for music-themed websites or as a fun addition to your personal portfolio.

Music_beat_preview



The Concept

The core of this project is based on creating several bars (or "waves") that change height and color over time, simulating the motion of sound waves. We'll use CSS @keyframes to animate the bars and bring the beats to life.

HTML Structure

We start by setting up the basic HTML structure. It’s simple and consists of a container div with several child divs that will act as the individual waves.


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Music Beats Animation</title>
    <link rel="stylesheet" href="style.css"> <!-- Link to the CSS file -->
</head>

<body>
    <div class="box">
        <div class="wave"></div>    
        <div class="wave"></div>    
        <div class="wave"></div>    
        <div class="wave"></div>    
        <div class="wave"></div>    
        <div class="wave"></div>    
        <div class="wave"></div>    
        <div class="wave"></div>    
        <div class="wave"></div>    
    </div>
</body>

</html>

HTML Explanation

The HTML here is quite minimal. The key component is the box container that holds nine wave divs, each of which will represent a different bar in our music visualizer. The waves will be animated via CSS to pulse and change colors, simulating the movement of music beats.

CSS Styling and Animation

The visual magic happens in the CSS. We’ll start by styling the waves, then use the @keyframes rule to animate their height and color.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
}

.box {
    position: relative;
    height: 40vh;
    width: 40vh;
    background: rgba(255, 255, 225, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.box::after {
    content: "@Developer Manoj";
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
    position: absolute;
    bottom: -25%;
    z-index: 10;
    font-size: 3vh;
}

.wave {
    width: 10%;
    height: 30%;
    border-radius: 20px;
    box-shadow: inset 1px 1px 3px #333, 4px 4px 2rem whitesmoke;
}

.wave:nth-child(odd) {
    background: lime;
    transform: scaleY(2);
    animation-delay: 1.5s;
    animation: waverun 1s infinite ease-in-out;
}

.wave:nth-child(even) {
    background: hotpink;
    transform: scaleY(1);
    animation: waverun 2s infinite ease-in-out;
}

@keyframes waverun {
    0% {
        transform: scaleY(0.5);
        background: lime;
    }
    20% {
        transform: scaleY(2);
        background: deeppink;
    }
    40% {
        transform: scaleY(1);
        background: deepskyblue;
    }
    60% {
        transform: scaleY(0.5);
        background: deeppink;
    }
    80% {
        transform: scaleY(2);
        background: lime;
    }
    100% {
        transform: scaleY(1);
        background: white;
    }
}

.wave:nth-child(5) {
    height: 15%;
    background: white;
    transform: scaleY(1.5);
    animation: waverun 1s infinite ease-in-out;
}

CSS Explanation

  1. Basic Setup:
  • We reset the default margins and paddings with * to ensure consistent layout across browsers.
  • The body is styled to center the content using flexbox, with a dark background to create contrast against the waves.
  1. The box Class:
  • The box div is given a size (40vh x 40vh) and a semi-transparent background using rgba().
  • The backdrop-filter: blur(10px) adds a blurred effect behind the waves, giving it a modern, frosted glass appearance.
  1. The wave Class:
  • Each wave is styled as a small rectangular bar with a border-radius for smooth edges and a shadow to add depth.
  • The nth-child pseudo-class is used to give alternating waves (odd and even) different colors and animations.
  1. Animation with Keyframes:
  • The @keyframes rule defines the scaling and color transitions for the waves. Each wave scales vertically (scaleY) to simulate a pulsing motion.
  • As the wave height changes (from 0.5 to 2), the background color shifts from lime green to pink, sky blue, and white, adding dynamic visual interest.
  • The animation is continuous, running infinitely (infinite), and each wave starts at a slightly different time for a staggered effect.

Bringing it Together

This CSS and HTML combination brings the beats animation to life. By using CSS keyframes and the nth-child selector, we achieve a dynamic visual that mimics sound waves. The animation runs smoothly and adds a colorful, rhythmic effect to your web page.

This music beats animation is a fun and engaging way to add some movement and life to your website. Whether you want to create a visualizer for your music tracks or just add an eye-catching feature, this simple but effective use of HTML and CSS will do the job. The use of animations and shadows creates a 3D-like experience, making the beats appear to jump off the screen. Happy coding!

Feel free to copy the code and experiment with the animation speed, colors, and effects to suit your needs. You can also expand the animation to respond to actual music or user input for an even more interactive experience

Wednesday, September 25, 2024

dynamic, real-time clock using HTML, CSS, and JavaScript

/ with No comments /

This project creates a dynamic, real-time clock using HTML, CSS, and JavaScript. The HTML provides the structure, defining a circular clock face with hour, minute, and second hands, as well as a digital time display. The CSS adds the visual styling, making the clock circular with a glowing effect and coloring the hands differently for clear distinction. It also ensures the clock is centered on the page and gives the timebox and developer credit a stylish appearance. The JavaScript is responsible for the functionality, updating the positions of the clock hands every second by calculating their respective rotation angles based on the current time. Additionally, it displays the current time digitally within the clock. This combination of HTML, CSS, and JavaScript provides both aesthetic appeal and functional precision, delivering a visually engaging, working clock for the web page.

Clock_preview




	
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Clock Animation</title>
    <link rel="stylesheet" href="style.css"> <!-- Link to the CSS file -->
</head>
<body>
    <div class="clock">
        <div class="innerclock">
            <div class="pin hou"></div>
            <div class="pin min"></div>
            <div class="pin sec"></div>
            <div class="timebox"></div>
        </div>  
    </div>

    <script src="script.js"></script> <!-- Link to the JS file -->
</body>
</html>



HTML Explanation:

  1. DOCTYPE Declaration: Specifies that the document is HTML5.
  2. Meta Tags:
  • charset="UTF-8": Ensures the document uses the UTF-8 character encoding.
  • meta name="viewport": Ensures the page is responsive on different screen sizes.
  1. Title: The page is titled "Clock Animation".
  2. Clock Structure:
  • A div with the class clock acts as the outer container for the clock.
  • Inside it, the innerclock holds the hour (hou), minute (min), and second (sec) hands.
  • The timebox displays the current time in digital format.
  1. Linking CSS and JS:
  • The <link> tag links the external style.css file for styling.
  • The <scrip> tag links the external script.js file for clock functionality.
	
	
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: white;
}

:root {
    --black: #333;
}

body {
    background: var(--black);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock {
    height: 45vh;
    width: 45vh;
    background: white;
    border-radius: 50%;
    border: 5px solid goldenrod;
    box-shadow: 1px 1px 2em deeppink;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.innerclock {
    box-shadow: inset 1px 1px 2em deeppink;
    background: var(--black);
    height: 98%;
    width: 98%;
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pin {
    position: absolute;
    height: 50%;
    width: 4%;
    background: white;
    bottom: 50%;
    transform-origin: 50% 100%;
    transform: rotateZ(0deg);
}

.hou {
    height: 30%;
    background: lime;
}

.min {
    height: 40%;
    background: deeppink;
}

.sec {
    height: 48%;
    background: white;
}

.timebox {
    font-size: 3vh;
    position: absolute;
    font-weight: bolder;
    bottom: 10%;
    box-shadow: 2px 2px 20px cyan, inset 2px 2px 20px hotpink;
    padding: 5px 20px;
    border-radius: 20px 10px;
}

h3 {
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
    position: absolute;
    bottom: 10%;
    z-index: 5;
    font-size: 3vh;
}

CSS Explanation:

  1. Universal Reset:
  • * { padding: 0; margin: 0; box-sizing: border-box; } ensures a consistent appearance across browsers.
  1. Variables:
  • --black: A CSS variable to reuse the black color (#333).
  1. Body Styling:
  • Sets the background color to black, centers the content, and ensures the height covers the viewport.
  1. Clock Styles:
  • .clock: A circular container with a golden border, pink shadow, and white background.
  • .innerclock: A smaller, inset circle with an inner shadow for depth.
  1. Clock Hands:
  • .pin: Basic style for all hands, positioned at the bottom center and rotating from the base.
  • .hou, .min, .sec: Hour, minute, and second hands styled with different colors and lengths.
  1. Digital Time Display:
  • .timebox: Displays the digital time with shadow effects and padding.
  1. Developer Credit:
  • h3: Styled with color and text shadow for the developer's name.
	
	

let hour = document.querySelector(".hou");
let min = document.querySelector(".min");
let sec = document.querySelector(".sec");
let timebox = document.querySelector(".timebox");

let devtext = document.createElement("h3");

setInterval(() => {
    const today = new Date();

    let secondNow = 360 / 60 * today.getSeconds();
    let minuteNow = 6 * today.getMinutes();
    let hournow = 30 * today.getHours() + 0.5 * today.getMinutes();

    let nowTime = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

    sec.style.transform = `rotateZ(${secondNow}deg)`;
    hour.style.transform = `rotateZ(${hournow}deg)`;
    min.style.transform = `rotateZ(${minuteNow}deg)`;

    timebox.innerHTML = nowTime;

}, 1000);

let webdev = document.createTextNode("@Developer Manoj");
devtext.appendChild(webdev);
document.body.appendChild(devtext);

JavaScript Explanation:

  1. Element Selection:
  • querySelector() selects the hour, minute, and second hands, as well as the time display box.
  1. Clock Logic (setInterval):
  • Runs every second (setInterval set to 1000ms).
  • The current time is obtained using the Date() object.
  • Calculating the Rotation Angles:
    • secondNow = 360 / 60 * today.getSeconds(): Each second rotates 6 degrees.
    • minuteNow = 6 * today.getMinutes(): Each minute rotates 6 degrees.
    • hournow = 30 * today.getHours() + 0.5 * today.getMinutes(): The hour hand rotates 30 degrees per hour and 0.5 degrees for every minute.
  1. Updating Clock Hands:
  • transform: rotateZ() rotates the hands based on the calculated angle.
  1. Digital Time:
  • The time is displayed in the timebox using the format "HH:MM:SS".

How It All Works Together:

  • HTML defines the structure of the page, including the clock and time display.
  • CSS styles the clock and gives it an aesthetic look with circular borders, shadows, and animations.
  • JavaScript handles the logic of the clock, calculating the angles for the hands and updating the digital time in real-time every second

Subscribe to: Comments (Atom)