In this blog, we’ll walk through a simple yet effective animation using HTML, CSS, and JavaScript to celebrate India's Independence Day. The code animates the Indian flag and displays a spinning Ashoka Chakra, with the messages "HAPPY INDEPENDENCE DAY" and "THE DAY OF VICTORY." Let’s break it down step by step.
1. HTML Structure
The HTML structure lays out the basic elements of the animation. Here’s the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Happy Independence Day</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="layer" id="orange"></div>
<div class="layer" id="white">
<div class="wheel"></div>
</div>
<div class="layer" id="green"></div>
<script src="script.js"></script>
</body>
</html>
Divs:
Three `div` elements with the class `layer` represent the three colors of the Indian flag—orange, white, and green. The middle `div` includes another `div` with the class `wheel`, which represents the Ashoka Chakra.
External Files:
The CSS and JavaScript code are separated into external files (`styles.css` and `script.js`).
2. CSS Styling
The CSS is responsible for the styling and animation of the webpage. Here’s the CSS code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--orange: scrlor 3s 1 linear;
--green: scrlgr 3s 1 linear;
}
body {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
overflow: hidden;
}
.layer {
position: relative;
height: 33.3%;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-style: italic;
font-size: 3em;
}
#orange {
background: orange;
transform: translateX(0%);
animation: var(--orange);
transition: 5s all ease-in-out;
}
#white {
background: white;
display: flex;
justify-content: center;
align-items: center;
}
#wheel {
height: 6rem;
width: 6rem;
border-radius: 50%;
border: 5px solid blue;
display: flex;
justify-content: center;
align-items: center;
position: relative;
animation: runwheel 5s infinite linear;
z-index: 10;
}
.stick {
background: blue;
height: 5%;
width: 100%;
position: absolute;
border-radius: 30%;
}
#green {
background: green;
transform: translateX(0%);
animation: var(--green);
transition: 5s all ease-in-out;
}
@keyframes scrlor {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0px);
}
}
@keyframes scrlgr {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0px);
}
}
@keyframes runwheel {
0% {}
100% {
transform: rotateZ(360deg);
}
}
Root Variables:
Custom properties `--orange` and `--green` define the keyframes for animating the orange and green layers.
Body and Layer Styling:
The `body` is set to occupy the full viewport and uses `flex-direction: column` to stack the three layers vertically. Each `.layer` is styled to fill one-third of the height and full width of the viewport.
Flag Colors:
The `#orange`, `#white`, and `#green` IDs style the layers according to the colors of the Indian flag.
Ashoka Chakra (`wheel`): The `.wheel` is a circular div with a blue border, and the `.stick` elements inside represent the spokes of the Ashoka Chakra. The Chakra rotates infinitely using the `runwheel` animation.
3. JavaScript for Animation
The JavaScript code controls the timing of the animations and text display. Here’s the JavaScript code:
let scrlor = document.querySelector("#orange");
let scrlgr = document.querySelector("#green");
let wheel = document.querySelector(".wheel");
let orstart = new Promise((res, rej) => {
setTimeout(() => {
if (scrlor.style.animation != "var(--orange)") {
scrlor.style.animation = "var(--orange)";
res("orange scrolled");
} else {
rej("function not working");
}
}, 100);
});
let grstart = () => {
return new Promise((res, rej) => {
setTimeout(() => {
if (scrlor.style.animation == "var(--orange)") {
scrlgr.style.animation = `var(--green)`;
res("green scrolled");
} else {
rej("function not working");
}
}, 500);
});
};
let wheelshow = () => {
return new Promise((res, rej) => {
setTimeout(() => {
if (scrlgr.style.animation == "var(--green)") {
wheel.style.display = "flex";
scrlor.textContent = "HAPPY INDEPENDENCE DAY";
scrlgr.textContent = "THE DAY OF VICTORY";
res("happy independence day");
} else {
rej("last function not working");
}
}, 4600);
});
};
orstart
.then((data) => {
console.log(data);
return grstart();
})
.then((blue) => {
console.log(blue);
return wheelshow();
})
.then((wheel) => {
console.log(wheel);
})
.catch((data) => {
console.log(data);
});
for (let e = 1; e <= 12; e++) {
let angl = e * 15;
let sticker = document.createElement("i");
sticker.className = "stick";
sticker.style.transform = `rotateZ(${angl}deg)`;
wheel.appendChild(sticker);
}
Query Selectors:
The `scrlor`, `scrlgr`, and `wheel` variables are assigned the orange, green, and wheel elements respectively.
Promises for Sequential Animation:
orstart:
Initiates the animation of the orange layer.
grstart:
Once the orange layer animation is complete, it starts the green layer animation.
wheelshow:
Finally, it reveals the Ashoka Chakra and displays the text "HAPPY INDEPENDENCE DAY" and "THE DAY OF VICTORY".
-Adding Chakra Spokes:The last part of the code dynamically creates 12 spokes for the Ashoka Chakra using a loop and the `transform: rotateZ` property.
0 comments:
Post a Comment